ampproject · aghassemi · Jan 23, 2018 · Jan 12, 2018 · Jan 12, 2018 · Jan 12, 2018
diff --git a/3p/integration.js b/3p/integration.js
@@ -63,6 +63,7 @@ import {MessageType} from '../src/3p-frame-messaging';
 // 3P - please keep in alphabetic order
 import {facebook} from './facebook';
 import {github} from './github';
+import {mathml} from './mathml';
 import {reddit} from './reddit';
 import {twitter} from './twitter';
 
@@ -327,6 +328,7 @@ register('loka', loka);
 register('mads', mads);
 register('mantis-display', mantisDisplay);
 register('mantis-recommend', mantisRecommend);
+register('mathml', mathml);
 register('mediaimpact', mediaimpact);
 register('medianet', medianet);
 register('mediavine', mediavine);

diff --git a/3p/mathml.js b/3p/mathml.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.
+ */
+console.log( 'mathml.js' );
+
+import {writeScript} from './3p';
+import {user} from '../src/log';
+
+/**
+ * Get the correct script for the gist.
+ *
+ * Use writeScript: Failed to execute 'write' on 'Document': It isn't possible
+ * to write into a document from an asynchronously-loaded external script unless
+ * it is explicitly opened.
+ *
+ * @param {!Window} global
+ * @param {string} scriptSource The source of the script, different for post and comment embeds.
+ */
+function getMathmlJs(global, scriptSource, cb) {
+ writeScript(global, scriptSource, function() {
+    cb(global.gist);
+  });
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function mathml(global, data) {
+  user().assert(
+      data.formula,
+      'The formula attribute is required for <amp-mathml> %s',
+      data.element);
+
+  getMathmlJs(
+    global,
+    'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML',
+    function() {
+      // Dimensions are given by the parent frame.
+      delete data.width;
+      delete data.height;
+      const div = document.createElement('div');
+      div.setAttribute('id','mathmlformula');
+      div.innerHTML = data.formula;
+      document.body.appendChild(div);
+      MathJax.Hub.Queue( function () {
+        const rendered = document.getElementById('MathJax-Element-1-Frame');
+        context.requestResize(
+                rendered./*OK*/offsetWidth + 20,
+                rendered./*OK*/offsetHeight + 20
+            );
+      } );
+
+    }
+  );
+}
diff --git a/examples/amp-mathml.amp.html b/examples/amp-mathml.amp.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>amp-mathml 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-mathml" src="https://cdn.ampproject.org/v0/amp-mathml-0.1.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h2>The Quadratic Formula</h2>
+  <amp-mathml
+    layout="responsive"
+    width="100" height="100" data-formula="\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]">
+  </amp-mathml>
+  <h2>Cauchy's Integral Formula</h2>
+  <amp-mathml
+    layout="responsive"
+    width="100" height="100" data-formula="\[f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz\]">
+  </amp-mathml>
+  <h2>Double angle formula for Cosines</h2>
+  <amp-mathml
+    layout="responsive"
+    width="100" height="100" data-formula="\[ \cos(θ+φ)=\cos(θ)\cos(φ)−\sin(θ)\sin(φ) \]">
+  </amp-mathml>
+</body>
+</html>
diff --git a/extensions/amp-mathml/0.1/amp-mathml.js b/extensions/amp-mathml/0.1/amp-mathml.js
@@ -0,0 +1,82 @@
+/**
+ * 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 {isLayoutSizeDefined} from '../../../src/layout';
+import {Layout} from '../../../src/layout';
+import {cssstyle} from 'cssstyle';
+import {getIframe} from '../../../src/3p-frame';
+import { addParamsToUrl } from '../../../src/url';
+import { getDataParamsFromAttributes, removeElement } from '../../../src/dom';
+import { listenFor } from '../../../src/iframe-helper';
+
+export class AmpMathml extends AMP.BaseElement {
+
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {!Element} */
+    this.container_ = this.win.document.createElement('div');
+
+    /** @private {?HTMLIFrameElement} */
+    this.iframe_ = null;
+  }
+
+  /**
+  * @param {boolean=} opt_onLayout
+  * @override
+  */
+  preconnectCallback () {
+    this.preconnect.url('https://cdnjs.cloudflare.com');
+  }
+  /** @override */
+  buildCallback() {
+    const formula = this.element.getAttribute('formula');
+    if (!formula || '' === formula) {
+      return;
+    }
+    this._formula = formula;
+  }
+  layoutCallback () {
+    const iframe = getIframe(this.win, this.element, 'mathml');
+    this.applyFillContent(iframe);
+    // Triggered by context.updateDimensions() inside the iframe.
+    listenFor(iframe, 'embed-size', data => {
+      this./*OK*/changeHeight(data['height']);
+    }, /* opt_is3P */true );
+    this.element.appendChild(iframe);
+    this.iframe_ = iframe;
+    return this.loadPromise(iframe);
+  }
+
+  unlayoutCallback () {
+    if (this.iframe_) {
+      removeElement(this.iframe_);
+      this.iframe_ = null;
+    }
+    return true;
+  }
+
+  /** @override */
+  isLayoutSupported (layout) {
+    return isLayoutSizeDefined(layout);
+  }
+
+}
+
+
+AMP.extension('amp-mathml', '0.1', AMP => {
+  AMP.registerElement('amp-mathml', AmpMathml);
+} );
diff --git a/extensions/amp-mathml/0.1/test/test-amp-mathml.js b/extensions/amp-mathml/0.1/test/test-amp-mathml.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 {AmpMathml} from '../amp-mathml';
+
+describes.realWin('amp-mathml', {
+  amp: {
+    extensions: ['amp-mathml'],
+  }
+}, env => {
+
+  let win;
+  let element;
+
+  beforeEach(() => {
+    win = env.win;
+    element = win.document.createElement('amp-mathml');
+    win.document.body.appendChild(element);
+  });
+
+});
diff --git a/extensions/amp-mathml/amp-mathml.md b/extensions/amp-mathml/amp-mathml.md
@@ -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.
+-->
+
+# <a name="`amp-mathml`"></a> `amp-mathml`
+
+<table>
+  <tr>
+    <td width="40%"><strong>Description</strong></td>
+    <td>FILL THIS IN</td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>Availability</strong></td>
+    <td>FILL THIS IN</td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>Required Script</strong></td>
+    <td><code>&lt;script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-mathml-0.1.js">&lt;/script></code></td>
+  </tr>
+  <tr>
+    <td class="col-fourty"><strong><a href="https://www.ampproject.org/docs/guides/responsive/control_layout.html">Supported Layouts</a></strong></td>
+    <td>FILL THIS IN</td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>Examples</strong></td>
+    <td>FILL THIS IN</td>
+  </tr>
+</table>
+
+## Behavior
+
+FILL THIS IN. What does this extension do?
+
+## Attributes
+
+FILL THIS IN. Does this extension allow for properties to configure?
+
+## Validation
+See [amp-mathml rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-mathml/validator-amp-mathml.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-mathml/validator-amp-mathml.protoascii b/extensions/amp-mathml/validator-amp-mathml.protoascii
@@ -0,0 +1,69 @@
+#
+# 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.
+#
+
+tags: {  # amp-mathml
+  html_format: AMP
+  tag_name: "SCRIPT"
+  spec_name: "amp-mathml extension .js script"
+  satisfies: "amp-mathml extension .js script"
+  requires: "amp-mathml"
+  mandatory_parent: "HEAD"
+  unique: true
+  extension_unused_unless_tag_present: "amp-mathml"
+  attrs: {
+    name: "async"
+    mandatory: true
+    value: ""
+  }
+  attrs: {
+    name: "formula"
+    mandatory: true
+  }
+  attrs: {
+    name: "custom-element"
+    mandatory: true
+    value: "amp-mathml"
+    dispatch_key: true
+  }
+  attrs: { name: "nonce" }
+  attrs: {
+    name: "src"
+    mandatory: true
+    value_regex: "https://cdn\.ampproject\.org/v0/amp-mathml-(latest|0\.1).js"
+  }
+  attrs: {
+    name: "type"
+    value: "text/javascript"
+  }
+  cdata: {
+    blacklisted_cdata_regex: {
+      regex: "."
+      error_message: "contents"
+    }
+  }
+  spec_url: "https://www.ampproject.org/docs/reference/components/amp-mathml"
+}
+tags: {  # <amp-mathml>
+  html_format: AMP
+  tag_name: "AMP-MATHML"
+  satisfies: "amp-mathml"
+  requires: "amp-mathml extension .js script"
+  attr_lists: "extended-amp-global"
+  spec_url: "https://www.ampproject.org/docs/reference/components/amp-hello-world"
+  amp_layout: {
+    supported_layouts: RESPONSIVE
+  }
+}
diff --git a/gulpfile.js b/gulpfile.js
@@ -112,6 +112,7 @@ declareExtension('amp-lightbox', '0.1', true);
 declareExtension('amp-lightbox-viewer', '0.1', true);
 declareExtension('amp-list', '0.1', false);
 declareExtension('amp-live-list', '0.1', true);
+declareExtension('amp-mathml', '0.1', false);
 declareExtension('amp-mustache', '0.1', false);
 declareExtension('amp-nexxtv-player', '0.1', false);
 declareExtension('amp-o2-player', '0.1', false);

diff --git a/validator/testdata/feature_tests/amp-mathml.html b/validator/testdata/feature_tests/amp-mathml.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>amp-mathml 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-mathml {
+      color: red;
+    }
+  </style>
+  <script async custom-element="amp-mathml" src="https://cdn.ampproject.org/v0/amp-mathml-0.1.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+    <amp-mathml layout="responsive" formula="\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]">
+    </amp-mathml>
+    <h2>Cauchy's Integral Formula</h2>
+    <amp-mathml layout="responsive" formula="\[f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz\]">
+    </amp-mathml>
+    <h2>Double angle formula for Cosines</h2>
+    <amp-mathml layout="responsive" formula="\[ \cos(θ+φ)=\cos(θ)\cos(φ)−\sin(θ)\sin(φ) \]">
+    </amp-mathml>
+</body>
+</html>