{{ message }}

# ampproject / amphtml Public

Merged
merged 56 commits into from Jan 23, 2018
Merged

merged 56 commits into from Jan 23, 2018

## Conversation

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

 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. The text was updated successfully, but these errors were encountered:
added 13 commits Jan 12, 2018
 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 commented Jan 16, 2018

 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 commented Jan 16, 2018

 Hey @googlebot - I signed it!

### googlebot commented Jan 16, 2018

 CLAs look good, thanks!

mentioned this pull request Jan 16, 2018
requested changes
 @@ -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

suggested changes

### aghassemi left a comment

@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.

3p/mathml.js Outdated

### aghassemi Jan 16, 2018

2018 ;)

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

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

### aghassemi Jan 16, 2018

don't forget to remove.

:doh:

3p/mathml.js Outdated
 import {user} from '../src/log'; /** * Get the correct script for the gist.

### aghassemi Jan 16, 2018

for the mathml

yes, thanks

3p/mathml.js Outdated
 delete data.height; const div = document.createElement('div'); div.setAttribute('id','mathmlformula'); div.innerHTML = data.formula;

### aghassemi Jan 16, 2018

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

3p/mathml.js Outdated
 const div = document.createElement('div'); div.setAttribute('id','mathmlformula'); div.innerHTML = data.formula; document.body.appendChild(div);

### aghassemi Jan 16, 2018

global.document.

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

### aghassemi Jan 17, 2018

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

3p/mathml.js Outdated
 document.body.appendChild(div); MathJax.Hub.Queue( function () { const rendered = document.getElementById('MathJax-Element-1-Frame'); context.requestResize(

### aghassemi Jan 16, 2018

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

### aghassemi Jan 16, 2018

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

@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.

### aghassemi Jan 17, 2018

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

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

### aghassemi Jan 16, 2018

let's have

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


ok!

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

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

### aghassemi Jan 16, 2018

not used, remove

ok

 @@ -0,0 +1,27 @@

### aghassemi Jan 16, 2018

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.

yarn.lock Outdated
 @@ -178,6 +178,12 @@ acorn-globals@4.1.0, acorn-globals@^4.0.0: dependencies: acorn "^5.0.0" acorn-globals@^3.1.0:

revert this file

ok, will do

### adamsilverstein commented Jan 17, 2018

 @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?

added 7 commits Jan 17, 2018
 copyright should be 2018 
 4a89349 
 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 
added 2 commits Jan 22, 2018
 Add OWNERS.yaml 
 0746c11 
 Fix some linting issues 
 37c39b5 

 @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).

 remove integration tests for now 
 31cad04 

### adamsilverstein commented Jan 22, 2018

 @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!

 move test and out file to mathml tests folder 
 98d0039 

### adamsilverstein commented Jan 23, 2018

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

### honeybadgerdontcare commented Jan 23, 2018

 @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.

approved these changes

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

approved these changes

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

### adamsilverstein commented Jan 23, 2018

 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!

mentioned this pull request Jan 23, 2018

### adamsilverstein commented Jan 23, 2018

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

### honeybadgerdontcare commented Jan 23, 2018

 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.

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

### adamsilverstein commented Jan 23, 2018

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

### adamsilverstein commented Jan 23, 2018

 @aghassemi all checks have passed :)

approved these changes
merged commit 33ae37a into ampproject:master Jan 23, 2018
4 checks passed

### aghassemi commented Jan 23, 2018

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

### adamsilverstein commented Jan 23, 2018

 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 commented Jan 23, 2018

 @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.

added a commit that referenced this issue Jan 24, 2018
 Revision bump for #12836 
 a3cf0fc 
added a commit that referenced this issue 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.
added a commit to gzgogo/amphtml that referenced this issue Jan 26, 2018
 Add MathML support (ampproject#12836) 
 ee61d94 
added a commit to gzgogo/amphtml that referenced this issue Jan 26, 2018
 Validator Rollup (ampproject#12999) 
 d7f06d4 
* 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.
mentioned this pull request Feb 5, 2018
added a commit to RanAbram/amphtml that referenced this issue Mar 12, 2018
 Add MathML support (ampproject#12836) 
 d1e1a5a 
added a commit to RanAbram/amphtml that referenced this issue Mar 12, 2018
 Validator Rollup (ampproject#12999) 
 40f1f32 
* 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.