Add MathML support #12836

adamsilverstein · 2018-01-16T04:35:13Z

Implements MathML support via an Iframe and the CDN hosted MathJax script. Fixes #12800

resizes the iframe height after the math formula renders
ideally the iframes should also scale their width so smaller formulas could be embedded inline.

Includes a few example of formulas, I wasn't sure how to make these small to begin with, in my testing they started large then resized smaller when the formula rendered.

googlebot · 2018-01-16T04:35:19Z

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.

If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.
If your company signed a CLA, they designated a Point of Contact who decides which employees are authorized to participate. You may need to contact the Point of Contact for your company and ask to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the project maintainer to go/cla#troubleshoot. The email used to register you as an authorized contributor must be the email used for the Git commit.
In order to pass this check, please resolve this problem and have the pull request author add another comment and the bot will run again. If the bot doesn't comment, it means it doesn't think anything has changed.

adamsilverstein · 2018-01-16T04:37:24Z

Hey @googlebot - I signed it!

googlebot · 2018-01-16T04:37:30Z

CLAs look good, thanks!

honeybadgerdontcare · 2018-01-16T18:35:24Z

extensions/amp-mathml/validator-amp-mathml.protoascii

@@ -0,0 +1,69 @@
+#


Please take a look at Contributing Validator Rules. The format for allowing the script tag has been simplified greatly.

Ok, will do - thanks for the feedback.

I fixed the extensions/amp-mathml/validator-amp-mathml.protoascii file in f6d93f3 - I still need to add some valid and invalid test cases

aghassemi

@adamsilverstein Thanks so much for contributing this. Great initial PR. Left bunch of comments.

Reading resizing, we only resize with and AMP components are block elements by default. User would need to use flex or other parent CSS ways to make this inline. We won't do resizing for width.

aghassemi · 2018-01-16T22:40:31Z

3p/mathml.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright 2017 The AMP HTML Authors. All Rights Reserved.


oh yea; sorry, i started by copying an existing component, I'll clean this up.

aghassemi · 2018-01-16T22:40:59Z

3p/mathml.js

+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+console.log( 'mathml.js' );


don't forget to remove.

aghassemi · 2018-01-16T22:41:30Z

3p/mathml.js

+import {user} from '../src/log';
+
+/**
+ * Get the correct script for the gist.


for the mathml

yes, thanks

aghassemi · 2018-01-16T22:55:06Z

3p/mathml.js

+      delete data.height;
+      const div = document.createElement('div');
+      div.setAttribute('id','mathmlformula');
+      div.innerHTML = data.formula;


must be div.textContent = otherwise this crease an XSS vulnerability given formula is not sanitized. textContent should be fine for Latex and Ascii Math. Worht testing for MathML, if it does not work, we unfortunately need to remove support for MathML as input and stick to LaText and ASCII Math since we don't have enough utilities to safely sanitize mathml input.

interesting, ok i'll change and do some testing

So far my test cases look fine after the change to textContent, I'll add some more samples from https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/MathML_Torture_Test to my example page

aghassemi · 2018-01-16T22:55:32Z

3p/mathml.js

+      const div = document.createElement('div');
+      div.setAttribute('id','mathmlformula');
+      div.innerHTML = data.formula;
+      document.body.appendChild(div);


global.document.

ok, will change - what is the context/reason behind global.?

It may not be the current window in certain situations where an AMP doc is embedded differently.

aghassemi · 2018-01-16T23:00:55Z

3p/mathml.js

+      document.body.appendChild(div);
+      MathJax.Hub.Queue( function () {
+        const rendered = document.getElementById('MathJax-Element-1-Frame');
+        context.requestResize(


updateDimensions is okay in this case ( requestResize is not guaranteed to resize). We make exceptions for updateDimensions per component and this should be fine.

also mathml needs to be added to updateDimensionsEnabled_() method in ampcontext-integration.js file for it to work.

interesting, will add

@aghassemi when adding this I noticed on a line I was touching that the check for 'github' isn't using a strict equality check, see https://github.com/ampproject/amphtml/blob/master/3p/ampcontext-integration.js#L72

This should be ===, right? Should I open a separate pull request for this issue? I don't want to introduce unrelated changes here.

Our JS compiler handles discrepencies between == and === so it is fine in practices, would be nice for consistency, you can change it here in this PR

aghassemi · 2018-01-16T23:02:21Z

extensions/amp-mathml/0.1/amp-mathml.js

+  /** @override */
+  buildCallback() {
+    const formula = this.element.getAttribute('formula');
+    if (!formula || '' === formula) {


let's have

user().assert( data.formula, 'The formula attribute is required for <amp-mathml> %s', data.element);

here instead.

that bit is in mathml.js, i removed the buildCallback entirely, it seems superfluous

aghassemi · 2018-01-16T23:05:35Z

extensions/amp-mathml/0.1/amp-mathml.js

+    super(element);
+
+    /** @private {!Element} */
+    this.container_ = this.win.document.createElement('div');


not used, remove

aghassemi · 2018-01-16T23:09:42Z

validator/testdata/feature_tests/amp-mathml.html

@@ -0,0 +1,27 @@
+<!doctype html>


keep this in the extension folder. Also needs a .out file. See https://github.com/ampproject/amphtml/blob/master/extensions/amp-sidebar/0.1/test/validator-amp-sidebar.html and https://github.com/ampproject/amphtml/blob/master/extensions/amp-sidebar/0.1/test/validator-amp-sidebar.out as a good sample.

ok, i have an uncommitted out file that i think was generated when i started, I'll check that and commit it.

I added the file, but I am still missing something.

Move this file to extensions/amp-mathml/0.1/test/validator-amp-mathml.html. The out file will be extensions/amp-mathml/0.1/test/validator-amp-mathml.out.

See here for an example extensions test directory with an .html and .out.

aghassemi · 2018-01-16T23:09:57Z

yarn.lock

@@ -178,6 +178,12 @@ [email protected], acorn-globals@^4.0.0:
  dependencies:
    acorn "^5.0.0"

+acorn-globals@^3.1.0:


revert this file

ok, will do

adamsilverstein · 2018-01-17T04:11:20Z

@aghassemi thanks for the careful review and detailed feedback. I will work on all of the points raised and get back to you when I am ready for another review.

I still have a question about the resizing: is it possible to get the iframe to resize its width as well as its height, currently my listener only changes height. any tips to getting this working?

adamsilverstein · 2018-01-22T20:58:12Z

@aghassemi You are very welcome, thanks for your assistance along the way. Adding tests later sounds good, please tag me in the PR as I would like to see and learn from how you add these.

I fixed the linting errors and added the OWNERS.yaml file as well as changing the tagname to allcaps as suggested by @honeybadgerdontcare.

Did you see my question above about clearing the valtador errors (#12836 (comment)) - unless the allcaps change in 6fdb6e4 fixes them, I'm not sure how to correct those. On a related note, I'm blocked from running gulp validator locally - when I do, I hit an error I haven't been able to resolve: google.protobuf.descriptor not found. Try "apt-get install python-protobuf" - any suggestions for getting around that, I'm on the latest mac osx (and I already installed protobuf with brew).

adamsilverstein · 2018-01-22T21:44:01Z

@aghassemi I think I have fixed all the warnings other than the validator messages I mentioned above that I am not sure how to clear. Please let me know how to fix or just go for it and get the validator passing.

Thanks!

adamsilverstein · 2018-01-23T00:49:32Z

missed the earlier comment from @honeybadgerdontcare - move the test and out files into the test folder in 98d0039

honeybadgerdontcare · 2018-01-23T05:44:40Z

@adamsilverstein it looks like you're still missing the .out file. If this is inconvenient please open an issue assigned to me with your current .html test file and I'll take care of the rest. That will get you around any travis/test issues.

honeybadgerdontcare

I approve protoascii changes. Test file changes can come later.

honeybadgerdontcare

I approve protoascii changes. Test file changes can come later.

adamsilverstein · 2018-01-23T13:47:10Z

it looks like you're still missing the .out file. If this is inconvenient please open an issue assigned to me with your current .html test file and I'll take care of the rest. That will get you around any travis/test issues.

@honeybadgerdontcare Thanks for your patience with me as I'm learning the ropes around here :)

I thought this was the correct location for the .out file? https://github.com/ampproject/amphtml/pull/12836/files#diff-467d44e03597d8a2c58c30d30be27e60

I'll go ahead and open an issue as you suggested and let you take care of the rest, thank you!

adamsilverstein · 2018-01-23T13:51:02Z

@honeybadgerdontcare I created an issue but don't have the capability to assign it to you: #12973

honeybadgerdontcare · 2018-01-23T17:00:29Z

I've taken the issue. The problem, or at least the easiest to see, is with the out file. It doesn't include the actual .html contents. See this as an example. Regardless, I can take care of it for you in a separate PR. So remove the test html and out files from this PR.

adamsilverstein · 2018-01-23T17:30:07Z

@honeybadgerdontcare thanks so much for your assistance, I removed the test files in 85bf039.

adamsilverstein · 2018-01-23T18:17:22Z

@aghassemi all checks have passed :)

aghassemi · 2018-01-23T18:23:34Z

@adamsilverstein merged! I am super happy to see large contributions like this from the community. Thanks again Adam.

/cc @mrjoro

adamsilverstein · 2018-01-23T18:29:11Z

Wooohooo! Thanks for all your shepherding @aghassemi I learned a ton about AMP along the way, and this feature will be a big improvement for our client's site.

How long does it take for this feature to make it to production/the wild?

aghassemi · 2018-01-23T18:32:41Z

@adamsilverstein For production use, ~3 weeks (Validator changes take a bit to make it to prod. A comment will be added to this PR when validation rules are in prod). Folks can start experimenting with it in next Dev Channel (tomorrow) however.

* Add an amp-video test that shows which tagspec is picked for errors. * Revision bump for #12654 * Revision bump for #12836 * Make sure the light validator doesn't run amp4ads tests.

* Add an amp-video test that shows which tagspec is picked for errors. * Revision bump for ampproject#12654 * Revision bump for ampproject#12836 * Make sure the light validator doesn't run amp4ads tests.

Adam Silverstein added 13 commits January 11, 2018 20:06

amp-mathml based on amp-gist: first pass

7871260

update first pass

4197b1c

simplify callback

555d3c1

cleanup

b614b65

no tests for now

9fe5d53

Rendering! First pass at resizing

ff4dd23

cleanup

d96cafc

remove mathjax-node

f1c81b6

add mathml.js, first pass

248fcd0

make example methml items responsive

0085161

register mathml integration

70160b0

amp-mathml cleanup

45064bf

more cleanup

744208a

googlebot added the cla: no label Jan 16, 2018

googlebot added cla: yes and removed cla: no labels Jan 16, 2018

adamsilverstein mentioned this pull request Jan 16, 2018

Add support for MathML #12800

Closed

honeybadgerdontcare requested changes Jan 16, 2018

View reviewed changes

aghassemi suggested changes Jan 16, 2018

View reviewed changes

Adam Silverstein added 7 commits January 17, 2018 12:19

remove some console logging

c2e79d1

inline docs: mathml not gist

b204fb2

use the MathJax global

8afa5c1

switch callback to arrow function, passing mathjax

7d1854f

used the passed mathjax object instead of the global

2145996

switch div.innerHTML to div.textContent

1962ff4

Adam Silverstein added 2 commits January 22, 2018 15:40

Add OWNERS.yaml

0746c11

Fix some linting issues

37c39b5

remove integration tests for now

31cad04

move test and out file to mathml tests folder

98d0039

honeybadgerdontcare approved these changes Jan 23, 2018

View reviewed changes

adamsilverstein mentioned this pull request Jan 23, 2018

MathML validation assistance #12973

Closed

remove incomplete/broken test files from PR for now, will add back later

85bf039

aghassemi approved these changes Jan 23, 2018

View reviewed changes

aghassemi merged commit 33ae37a into ampproject:master Jan 23, 2018

Gregable pushed a commit that referenced this pull request Jan 24, 2018

Revision bump for #12836

a3cf0fc

Gregable added a commit that referenced this pull request Jan 24, 2018

Validator Rollup (#12999)

6e55c75

* Add an amp-video test that shows which tagspec is picked for errors. * Revision bump for #12654 * Revision bump for #12836 * Make sure the light validator doesn't run amp4ads tests.

gzgogo pushed a commit to gzgogo/amphtml that referenced this pull request Jan 26, 2018

Add MathML support (ampproject#12836)

ee61d94

ampprojectbot added the PR use: In Stable label Jan 31, 2018

aghassemi mentioned this pull request Feb 5, 2018

Status Update 2018-02-05 #13235

Closed

RanAbram pushed a commit to RanAbram/amphtml that referenced this pull request Mar 12, 2018

Add MathML support (ampproject#12836)

d1e1a5a

		@@ -0,0 +1,68 @@
		/**
		* Copyright 2017 The AMP HTML Authors. All Rights Reserved.

Add MathML support #12836

Add MathML support #12836

Conversation

adamsilverstein commented Jan 16, 2018 • edited Loading

googlebot commented Jan 16, 2018

adamsilverstein commented Jan 16, 2018

googlebot commented Jan 16, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aghassemi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adamsilverstein commented Jan 17, 2018

adamsilverstein commented Jan 22, 2018 • edited Loading

adamsilverstein commented Jan 22, 2018

adamsilverstein commented Jan 23, 2018

honeybadgerdontcare commented Jan 23, 2018

honeybadgerdontcare left a comment

Choose a reason for hiding this comment

honeybadgerdontcare left a comment

Choose a reason for hiding this comment

adamsilverstein commented Jan 23, 2018

adamsilverstein commented Jan 23, 2018

honeybadgerdontcare commented Jan 23, 2018

adamsilverstein commented Jan 23, 2018

adamsilverstein commented Jan 23, 2018

aghassemi commented Jan 23, 2018

adamsilverstein commented Jan 23, 2018

aghassemi commented Jan 23, 2018

adamsilverstein commented Jan 16, 2018 •

edited

Loading

adamsilverstein commented Jan 22, 2018 •

edited

Loading