Merge pull request #1356 from mathjax/update/clip-path

Update clip-path CSS to handler older browsers

Author: dpvc

ts/output/chtml.ts

@@ -110,13 +110,22 @@ export class CHTML<N, T, D> extends CommonOutputJax<
       'mjx-mtext > mjx-c',
     ].join(', ')]: {
       'clip-path':
-        'padding-box xywh(-1em -2px calc(100% + 2em) calc(100% + 4px))',
+        'padding-box polygon(' +
+        [
+          '-1em -2px',
+          'calc(100% + 1em) -2px',
+          'calc(100% + 1em) calc(100% + 2px)',
+          '-1em calc(100% + 2px)',
+        ].join(', ') +
+        ')',
     },
     'mjx-stretchy-h': {
-      'clip-path': 'padding-box xywh(0 -2px 100% calc(100% + 4px))',
+      'clip-path':
+        'padding-box polygon(0 -2px, 100% -2px, 100% calc(100% + 2px), 0 calc(100% + 2px))',
     },
     'mjx-stretchy-v': {
-      'clip-path': 'padding-box xywh(-2px 0 calc(100% + 4px) 100%)',
+      'clip-path':
+        'padding-box polygon(-2px 0, calc(100% + 2px) 0, calc(100% + 2px) 100%, -2px 100%)',
     },
 
     'mjx-container [space="1"]': { 'margin-left': '.111em' },

ts/output/chtml/Wrappers/mo.ts

@@ -147,7 +147,8 @@ export const ChtmlMo = (function <N, T, D>(): ChtmlMoClass<N, T, D> {
         'text-align': 'right',
       },
       'mjx-stretchy-h > mjx-ext': {
-        'clip-path': 'padding-box xywh(0 -1em 100% calc(100% + 2em))',
+        'clip-path':
+          'padding-box polygon(0 -1em, 100% -1em, 100% calc(100% + 1em), 0 calc(100% + 1em))',
         width: '100%',
         border: '0px solid transparent',
         'box-sizing': 'border-box',
@@ -166,11 +167,12 @@ export const ChtmlMo = (function <N, T, D>(): ChtmlMoClass<N, T, D> {
         display: 'block',
       },
       'mjx-stretchy-v > mjx-ext': {
-        'clip-path': 'padding-box xywh(-1em 0 calc(100% + 2em) 100%)',
+        'clip-path':
+          'padding-box polygon(-1em 0, calc(100% + 1em) 0, calc(100% + 1em) 100%, -1em 100%)',
         height: '100%',
         border: '0.1px solid transparent',
         'box-sizing': 'border-box',
-        'white-space': 'wrap',
+        'white-space': 'pre',
       },
       'mjx-mark': {
         display: 'inline-block',