Add option to use virtual-webgl for handling multiple WebGL contexts

.circleci/config.yml

@@ -122,6 +122,26 @@ jobs:
           name: Run jasmine tests (part B)
           command: .circleci/test.sh webgl-jasmine
 
+  virtual-webgl-jasmine:
+    docker:
+      # need '-browsers' version to test in real (xvfb-wrapped) browsers
+      - image: cimg/node:16.17.1-browsers
+    environment:
+      # Alaska time (arbitrary timezone to test date logic)
+      TZ: "America/Anchorage"
+    parallelism: 8
+    working_directory: ~/plotly.js
+    steps:
+      - browser-tools/install-browser-tools: &browser-versions
+          chrome-version: 110.0.5481.100
+          install-firefox: false
+          install-geckodriver: false
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Run jasmine tests (part B)
+          command: .circleci/test.sh virtual-webgl-jasmine
+
   flaky-no-gl-jasmine:
     docker:
       # need '-browsers' version to test in real (xvfb-wrapped) browsers
@@ -216,6 +236,25 @@ jobs:
           name: Test MathJax on firefox-latest
           command: .circleci/test.sh mathjax-firefox82+
 
+  make-baselines-virtual-webgl:
+    parallelism: 2
+    docker:
+      - image: circleci/python:3.8.9
+    working_directory: ~/plotly.js
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Install kaleido, plotly.io and required fonts
+          command: .circleci/env_image.sh
+      - run:
+          name: Create png files using virtual-webgl & WebGL v1
+          command: .circleci/test.sh make-baselines-virtual-webgl
+      - persist_to_workspace:
+          root: ~/
+          paths:
+            - plotly.js
+
   make-baselines-mathjax3:
     docker:
       - image: circleci/python:3.8.9
@@ -267,6 +306,20 @@ jobs:
           path: build
           destination: /
 
+  test-baselines-virtual-webgl:
+    docker:
+      - image: circleci/node:16.9.0
+    working_directory: ~/plotly.js
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Compare pixels
+          command: .circleci/test.sh test-image-virtual-webgl ; find build -maxdepth 1 -type f -delete
+      - store_artifacts:
+          path: build
+          destination: /
+
   test-baselines-mathjax3:
     docker:
       - image: circleci/node:16.9.0
@@ -441,9 +494,18 @@ workflows:
       - webgl-jasmine:
           requires:
             - install-and-cibuild
+      - virtual-webgl-jasmine:
+          requires:
+            - install-and-cibuild
       - flaky-no-gl-jasmine:
           requires:
             - install-and-cibuild
+      - make-baselines-virtual-webgl:
+          requires:
+            - install-and-cibuild
+      - test-baselines-virtual-webgl:
+          requires:
+            - make-baselines-virtual-webgl
       - make-baselines-mathjax3:
           requires:
             - install-and-cibuild

.circleci/test.sh

@@ -53,6 +53,16 @@ case $1 in
         exit $EXIT_STATE
         ;;
 
+    virtual-webgl-jasmine)
+        SHARDS=($(node $ROOT/tasks/shard_jasmine_tests.js --limit=5 --tag=gl | circleci tests split))
+        for s in ${SHARDS[@]}; do
+            MAX_AUTO_RETRY=2
+            retry ./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --virtualWebgl --tags=gl --skip-tags=noCI,noVirtualWebgl --doNotFailOnEmptyTestSuite -- "$s"
+        done
+
+        exit $EXIT_STATE
+        ;;
+
     flaky-no-gl-jasmine)
         SHARDS=($(node $ROOT/tasks/shard_jasmine_tests.js --limit=1 --tag=flaky | circleci tests split))
 
@@ -82,6 +92,15 @@ case $1 in
         exit $EXIT_STATE
         ;;
 
+    make-baselines-virtual-webgl)
+        SUITE=$({\
+                  find $ROOT/test/image/mocks/gl*     -type f -printf "%f\n"; \
+                  find $ROOT/test/image/mocks/mapbox* -type f -printf "%f\n"; \
+                } | sed 's/\.json$//1' | circleci tests split)
+        python3 test/image/make_baseline.py virtual-webgl $SUITE || EXIT_STATE=$?
+        exit $EXIT_STATE
+        ;;
+
     make-baselines-mathjax3)
         python3 test/image/make_baseline.py mathjax3    legend_mathjax_title_and_items mathjax parcats_grid_subplots table_latex_multitrace_scatter table_plain_birds table_wrapped_birds ternary-mathjax || EXIT_STATE=$?
         exit $EXIT_STATE
@@ -103,6 +122,11 @@ case $1 in
         exit $EXIT_STATE
         ;;
 
+    test-image-virtual-webgl)
+        node test/image/compare_pixels_test.js virtual-webgl || { tar -cvf build/baselines.tar build/test_images/*.png ; exit 1 ; } || EXIT_STATE=$?
+        exit $EXIT_STATE
+        ;;
+
     source-syntax)
         npm run lint        || EXIT_STATE=$?
         npm run test-syntax || EXIT_STATE=$?