plotly · archmoj · Oct 26, 2021 · Oct 18, 2021 · Oct 20, 2021 · Oct 20, 2021
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -163,6 +163,43 @@ jobs:
          name: Test MathJax on firefox-81
          command: .circleci/test.sh mathjax-firefox

+  mathjax-firefox82:
+    docker:
+      # need '-browsers' version to test in real (xvfb-wrapped) browsers
+      - image: cimg/node:16.8.0-browsers
+    environment:
+      # Alaska time (arbitrary timezone to test date logic)
+      TZ: "America/Anchorage"
+    working_directory: ~/plotly.js
+    steps:
+      - browser-tools/install-browser-tools: &browser-versions
+          firefox-version: '82.0'
+          install-chrome: false
+          install-chromedriver: false
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Test MathJax on firefox-82
+          command: .circleci/test.sh mathjax-firefox82+
+
+  mathjax-firefoxLatest:
+    docker:
+      # need '-browsers' version to test in real (xvfb-wrapped) browsers
+      - image: cimg/node:16.8.0-browsers
+    environment:
+      # Alaska time (arbitrary timezone to test date logic)
+      TZ: "America/Anchorage"
+    working_directory: ~/plotly.js
+    steps:
+      - browser-tools/install-browser-tools: &browser-versions
+          install-chrome: false
+          install-chromedriver: false
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Test MathJax on firefox-latest
+          command: .circleci/test.sh mathjax-firefox82+
+
  make-baselines:
    parallelism: 4
    docker:
@@ -343,6 +380,12 @@ workflows:
      - mathjax-firefox81:
          requires:
            - install-and-cibuild
+      - mathjax-firefox82:
+          requires:
+            - install-and-cibuild
+      - mathjax-firefoxLatest:
+          requires:
+            - install-and-cibuild
      - no-gl-jasmine:
          requires:
            - install-and-cibuild

diff --git a/.circleci/test.sh b/.circleci/test.sh
@@ -74,6 +74,11 @@ case $1 in
        exit $EXIT_STATE
        ;;

+    mathjax-firefox82+)
+        ./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --skip-tags=noFF82 --bundleTest=mathjax --nowatch || EXIT_STATE=$?
+        exit $EXIT_STATE
+        ;;
+
    make-baselines)
        SUITE=$(find $ROOT/test/image/mocks/ -type f -printf "%f\n" | sed 's/\.json$//1' | circleci tests split)
        python3 test/image/make_baseline.py $SUITE || EXIT_STATE=$?

diff --git a/draftlogs/5993_fix.md b/draftlogs/5993_fix.md
@@ -0,0 +1 @@
+ - Temporary fix to improve rendering of graphs with Mathjax on Firefox v82 and higher [[#5993](https://github.com/plotly/plotly.js/pull/5993)]
diff --git a/src/lib/svg_text_utils.js b/src/lib/svg_text_utils.js
@@ -94,9 +94,12 @@ exports.convertToTspans = function(_context, gd, _callback) {
                                               newSvg.node().firstChild);
                }

+                var w0 = _svgBBox.width;
+                var h0 = _svgBBox.height;
+
                newSvg.attr({
                    'class': svgClass,
-                    height: _svgBBox.height,
+                    height: h0,
                    preserveAspectRatio: 'xMinYMin meet'
                })
                .style({overflow: 'visible', 'pointer-events': 'none'});
@@ -105,9 +108,18 @@ exports.convertToTspans = function(_context, gd, _callback) {
                var g = newSvg.select('g');
                g.attr({fill: fill, stroke: fill});

-                var gBB = g.node().getBoundingClientRect();
-                var newSvgW = gBB.width;
-                var newSvgH = gBB.height;
+                var bb = g.node().getBoundingClientRect();
+                var w = bb.width;
+                var h = bb.height;
+
+                if(w > w0 || h > h0) {
+                    // this happen in firefox v82+ | see https://bugzilla.mozilla.org/show_bug.cgi?id=1709251 addressed
+                    // temporary fix:
+                    newSvg.style('overflow', 'hidden');
+                    bb = newSvg.node().getBoundingClientRect();
+                    w = bb.width;
+                    h = bb.height;
+                }

                var x = +_context.attr('x');
                var y = +_context.attr('y');
@@ -119,21 +131,21 @@ exports.convertToTspans = function(_context, gd, _callback) {
                if(svgClass[0] === 'y') {
                    mathjaxGroup.attr({
                        transform: 'rotate(' + [-90, x, y] +
-                        ')' + strTranslate(-newSvgW / 2, dy - newSvgH / 2)
+                        ')' + strTranslate(-w / 2, dy - h / 2)
                    });
                } else if(svgClass[0] === 'l') {
-                    y = dy - newSvgH / 2;
+                    y = dy - h / 2;
                } else if(svgClass[0] === 'a' && svgClass.indexOf('atitle') !== 0) {
                    x = 0;
                    y = dy;
                } else {
                    var anchor = _context.attr('text-anchor');

-                    x = x - newSvgW * (
+                    x = x - w * (
                        anchor === 'middle' ? 0.5 :
                        anchor === 'end' ? 1 : 0
                    );
-                    y = y + dy - newSvgH / 2;
+                    y = y + dy - h / 2;
                }

                newSvg.attr({

diff --git a/tasks/test_syntax.js b/tasks/test_syntax.js
@@ -31,7 +31,7 @@ assertCircularDeps();
 // check for for focus and exclude jasmine blocks
 function assertJasmineSuites() {
    var BLACK_LIST = ['fdescribe', 'fit', 'xdescribe', 'xit'];
-    var TAGS = ['noCI', 'noCIdep', 'gl', 'flaky'];
+    var TAGS = ['noCI', 'noCIdep', 'noFF82', 'gl', 'flaky'];
    var IT_ONLY_TAGS = ['gl', 'flaky'];
    var logs = [];


diff --git a/test/jasmine/bundle_tests/mathjax_test.js b/test/jasmine/bundle_tests/mathjax_test.js
@@ -98,7 +98,7 @@ describe('Test MathJax:', function() {
            .then(done, done.fail);
        });

-        it('should scoot x-axis title (with MathJax) below x-axis ticks', function(done) {
+        it('@noFF82 should scoot x-axis title (with MathJax) below x-axis ticks', function(done) {
            expect(window.MathJax).toBeDefined();

            testTitleScoot({
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Temporary fix to improve rendering of graphs with Mathjax on Firefox v82 and higher [[#5993](https://github.com/plotly/plotly.js/pull/5993)]