Merge pull request #799 from mathjax/handle-borders

Handle border and padding CSS in CHTML and SVG output

Author: dpvc

ts/output/chtml/Wrappers/math.ts

@@ -113,7 +113,7 @@ CommonMathMixin<CHTMLConstructor<any, any, any>>(CHTMLWrapper) {
     if (this.bbox.pwidth === BBox.fullWidth) {
       adaptor.setAttribute(parent, 'width', 'full');
       if (this.jax.table) {
-        let {L, w, R} = this.jax.table.getBBox();
+        let {L, w, R} = this.jax.table.getOuterBBox();
         if (align === 'right') {
           R = Math.max(R || -shift, -shift);
         } else if (align === 'left') {

ts/output/chtml/Wrappers/msqrt.ts

@@ -78,7 +78,7 @@ export class CHTMLmsqrt<N, T, D> extends CommonMsqrtMixin<CHTMLConstructor<any,
     //  Get the parameters for the spacing of the parts
     //
     const sbox = surd.getBBox();
-    const bbox = base.getBBox();
+    const bbox = base.getOuterBBox();
     const [ , q] = this.getPQ(sbox);
     const t = this.font.params.rule_thickness;
     const H = bbox.h + q + t;

ts/output/chtml/Wrappers/munderover.ts

@@ -85,8 +85,8 @@ CommonMunderMixin<CHTMLWrapper<any, any, any>, Constructor<CHTMLmsub<any, any, a
     ) as N;
     this.baseChild.toCHTML(base);
     this.scriptChild.toCHTML(under);
-    const basebox = this.baseChild.getBBox();
-    const underbox = this.scriptChild.getBBox();
+    const basebox = this.baseChild.getOuterBBox();
+    const underbox = this.scriptChild.getOuterBBox();
     const k = this.getUnderKV(basebox, underbox)[0];
     const delta = (this.isLineBelow ? 0 : this.getDelta(true));
     this.adaptor.setStyle(under, 'paddingTop', this.em(k));
@@ -140,8 +140,8 @@ CommonMoverMixin<CHTMLWrapper<any, any, any>, Constructor<CHTMLmsup<any, any, an
     const base = this.adaptor.append(this.chtml, this.html('mjx-base')) as N;
     this.scriptChild.toCHTML(over);
     this.baseChild.toCHTML(base);
-    const overbox = this.scriptChild.getBBox();
-    const basebox = this.baseChild.getBBox();
+    const overbox = this.scriptChild.getOuterBBox();
+    const basebox = this.baseChild.getOuterBBox();
     this.adjustBaseHeight(base, basebox);
     const k = this.getOverKU(basebox, overbox)[0];
     const delta = (this.isLineAbove ? 0 : this.getDelta());
@@ -207,9 +207,9 @@ CommonMunderoverMixin<CHTMLWrapper<any, any, any>, Constructor<CHTMLmsubsup<any,
     this.overChild.toCHTML(over);
     this.baseChild.toCHTML(base);
     this.underChild.toCHTML(under);
-    const overbox = this.overChild.getBBox();
-    const basebox = this.baseChild.getBBox();
-    const underbox = this.underChild.getBBox();
+    const overbox = this.overChild.getOuterBBox();
+    const basebox = this.baseChild.getOuterBBox();
+    const underbox = this.underChild.getOuterBBox();
     this.adjustBaseHeight(base, basebox);
     const ok = this.getOverKU(basebox, overbox)[0];
     const uk = this.getUnderKV(basebox, underbox)[0];

ts/output/common/OutputJax.ts

@@ -273,7 +273,7 @@ export abstract class CommonOutputJax<
     this.math = math;
     math.root.setTeXclass(null);
     this.nodeMap = new Map<MmlNode, W>();
-    let bbox = this.factory.wrap(math.root).getBBox();
+    let bbox = this.factory.wrap(math.root).getOuterBBox();
     this.nodeMap = null;
     return bbox;
   }

ts/output/common/Wrapper.ts

@@ -314,14 +314,34 @@ export class CommonWrapper<
     return bbox;
   }
 
+  /**
+   * Return the wrapped node's bounding box that includes borders and padding
+   *
+   * @param {boolean} save  Whether to cache the bbox or not (used for stretchy elements)
+   * @return {BBox}  The computed bounding box
+   */
+  public getOuterBBox(save: boolean = true): BBox {
+    const bbox = this.getBBox(save);
+    if (!this.styles) return bbox;
+    const obox = new BBox();
+    Object.assign(obox, bbox);
+    for (const [name, side] of BBox.StyleAdjust) {
+      const x = this.styles.get(name);
+      if (x) {
+        (obox as any)[side] += this.length2em(x, 1, obox.rscale);
+      }
+    }
+    return obox;
+  }
+
   /**
    * @param {BBox} bbox           The bounding box to modify (either this.bbox, or an empty one)
    * @param {boolean} recompute   True if we are recomputing due to changes in children that have percentage widths
    */
   protected computeBBox(bbox: BBox, recompute: boolean = false) {
     bbox.empty();
     for (const child of this.childNodes) {
-      bbox.append(child.getBBox());
+      bbox.append(child.getOuterBBox());
     }
     bbox.clean();
     if (this.fixesPWidth && this.setChildPWidths(recompute)) {
@@ -348,7 +368,7 @@ export class CommonWrapper<
     }
     let changed = false;
     for (const child of this.childNodes) {
-      const cbox = child.getBBox();
+      const cbox = child.getOuterBBox();
       if (cbox.pwidth && child.setChildPWidths(recompute, w === null ? cbox.w : w, clear)) {
         changed = true;
       }

ts/output/common/Wrappers/maction.ts

@@ -184,7 +184,7 @@ export function CommonMactionMixin<
      * @override
      */
     public computeBBox(bbox: BBox, recompute: boolean = false) {
-      bbox.updateFrom(this.selected.getBBox());
+      bbox.updateFrom(this.selected.getOuterBBox());
       this.selected.setChildPWidths(recompute);
     }
 

ts/output/common/Wrappers/mfenced.ts

@@ -135,7 +135,7 @@ export function CommonMfencedMixin<T extends WrapperConstructor>(Base: T): Mfenc
      * @override
      */
     public computeBBox(bbox: BBox, recompute: boolean = false) {
-      bbox.updateFrom(this.mrow.getBBox());
+      bbox.updateFrom(this.mrow.getOuterBBox());
       this.setChildPWidths(recompute);
     }
 

ts/output/common/Wrappers/mfrac.ts

@@ -159,8 +159,8 @@ export function CommonMfracMixin<T extends WrapperConstructor>(Base: T): MfracCo
      * @param {number} t         The thickness of the line
      */
     public getFractionBBox(bbox: BBox, display: boolean, t: number) {
-      const nbox = this.childNodes[0].getBBox();
-      const dbox = this.childNodes[1].getBBox();
+      const nbox = this.childNodes[0].getOuterBBox();
+      const dbox = this.childNodes[1].getOuterBBox();
       const tex = this.font.params;
       const a = tex.axis_height;
       const {T, u, v} = this.getTUV(display, t);
@@ -204,8 +204,8 @@ export function CommonMfracMixin<T extends WrapperConstructor>(Base: T): MfracCo
      *    the separation between the two, and the bboxes themselves.
      */
     public getUVQ(display: boolean): {u: number, v: number, q: number, nbox: BBox, dbox: BBox} {
-      const nbox = this.childNodes[0].getBBox() as BBox;
-      const dbox = this.childNodes[1].getBBox() as BBox;
+      const nbox = this.childNodes[0].getOuterBBox();
+      const dbox = this.childNodes[1].getOuterBBox();
       const tex = this.font.params;
       //
       //  Initial offsets (u, v)
@@ -234,7 +234,7 @@ export function CommonMfracMixin<T extends WrapperConstructor>(Base: T): MfracCo
      */
     public getBevelledBBox(bbox: BBox, display: boolean) {
       const {u, v, delta, nbox, dbox} = this.getBevelData(display);
-      const lbox = this.bevel.getBBox();
+      const lbox = this.bevel.getOuterBBox();
       bbox.combine(nbox, 0, u);
       bbox.combine(lbox, bbox.w - delta / 2, 0);
       bbox.combine(dbox, bbox.w - delta / 2, v);
@@ -249,8 +249,8 @@ export function CommonMfracMixin<T extends WrapperConstructor>(Base: T): MfracCo
     public getBevelData(display: boolean): {
       H: number, delta: number, u: number, v: number, nbox: BBox, dbox: BBox
     } {
-      const nbox = this.childNodes[0].getBBox() as BBox;
-      const dbox = this.childNodes[1].getBBox() as BBox;
+      const nbox = this.childNodes[0].getOuterBBox();
+      const dbox = this.childNodes[1].getOuterBBox();
       const delta = (display ? .4 : .15);
       const H = Math.max(nbox.scale * (nbox.h + nbox.d), dbox.scale * (dbox.h + dbox.d)) + 2 * delta;
       const a = this.font.params.axis_height;
@@ -282,7 +282,7 @@ export function CommonMfracMixin<T extends WrapperConstructor>(Base: T): MfracCo
     public getWrapWidth(i: number) {
       const attributes = this.node.attributes;
       if (attributes.get('bevelled')) {
-        return this.childNodes[i].getBBox().w;
+        return this.childNodes[i].getOuterBBox().w;
       }
       const w = this.getBBox().w;
       const thickness = this.length2em(attributes.get('linethickness'));

ts/output/common/Wrappers/mmultiscripts.ts

@@ -254,7 +254,7 @@ export function CommonMmultiscriptsMixin<
         if (child.node.isKind('mprescripts')) {
           script = 'psubList';
         } else {
-          lists[script].push(child.getBBox());
+          lists[script].push(child.getOuterBBox());
           script = NextScript[script];
         }
       }

ts/output/common/Wrappers/mroot.ts

@@ -66,7 +66,7 @@ export function CommonMrootMixin<T extends MsqrtConstructor>(Base: T): MrootCons
      * @override
      */
     public combineRootBBox(BBOX: BBox, sbox: BBox, H: number) {
-      const bbox = this.childNodes[this.root].getBBox();
+      const bbox = this.childNodes[this.root].getOuterBBox();
       const h = this.getRootDimens(sbox, H)[1];
       BBOX.combine(bbox, 0, h);
     }
@@ -76,7 +76,7 @@ export function CommonMrootMixin<T extends MsqrtConstructor>(Base: T): MrootCons
      */
     public getRootDimens(sbox: BBox, H: number) {
       const surd = this.childNodes[this.surd] as CommonMo;
-      const bbox = this.childNodes[this.root].getBBox();
+      const bbox = this.childNodes[this.root].getOuterBBox();
       const offset = (surd.size < 0 ? .5 : .6) * sbox.w;
       const {w, rscale} = bbox;
       const W = Math.max(w, offset / rscale);