From 8dd068eb51edf2249978c765bb4d67784278b465 Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Tue, 2 Aug 2022 22:23:03 -0400
Subject: [PATCH 01/10] Add general test for WebAgg backend

---
 .appveyor.yml                                 |   2 +
 .github/workflows/tests.yml                   |   3 +
 azure-pipelines.yml                           |   3 +
 environment.yml                               |   2 +
 .../test_backend_webagg/chromium.png          | Bin 0 -> 7382 bytes
 .../test_backend_webagg/firefox.png           | Bin 0 -> 12942 bytes
 .../test_backend_webagg/webkit.png            | Bin 0 -> 6500 bytes
 lib/matplotlib/tests/test_backend_webagg.py   |  61 +++++++++++++++++-
 requirements/testing/all.txt                  |   1 +
 9 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 lib/matplotlib/tests/baseline_images/test_backend_webagg/chromium.png
 create mode 100644 lib/matplotlib/tests/baseline_images/test_backend_webagg/firefox.png
 create mode 100644 lib/matplotlib/tests/baseline_images/test_backend_webagg/webkit.png

diff --git a/.appveyor.yml b/.appveyor.yml
index 87f6cbde6384..e8b6c720f29c 100644
--- a/.appveyor.yml
+++ b/.appveyor.yml
@@ -62,6 +62,8 @@ install:
   - activate mpl-dev
   - conda install -c conda-forge pywin32
   - echo %PYTHON_VERSION% %TARGET_ARCH%
+  # Install browsers for testing
+  - playwright install --with-deps
   # Show the installed packages + versions
   - conda list
 
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 8875a38cc1bb..72936870b803 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -281,6 +281,9 @@ jobs:
             --index-url https://pypi.anaconda.org/scientific-python-nightly-wheels/simple \
             --upgrade --only-binary=:all: numpy pandas
 
+      - name: Install browsers for testing
+        run: playwright install --with-deps
+
       - name: Install Matplotlib
         run: |
           ccache -s
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index 4c50c543846a..14bcc7125d84 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -163,6 +163,9 @@ stages:
                 --verbose --editable .[dev]
             displayName: "Install self"
 
+          - bash: playwright install --with-deps
+            displayName: 'Install browsers for testing'
+
           - script: env
             displayName: 'print env'
 
diff --git a/environment.yml b/environment.yml
index 2930ccf17e83..edc4e9cc9946 100644
--- a/environment.yml
+++ b/environment.yml
@@ -56,6 +56,8 @@ dependencies:
   - nbconvert[execute]!=6.0.0,!=6.0.1,!=7.3.0,!=7.3.1
   - nbformat!=5.0.0,!=5.0.1
   - pandas!=0.25.0
+  - pip:
+      - pytest-playwright
   - psutil
   - pre-commit
   - pydocstyle>=5.1.0
diff --git a/lib/matplotlib/tests/baseline_images/test_backend_webagg/chromium.png b/lib/matplotlib/tests/baseline_images/test_backend_webagg/chromium.png
new file mode 100644
index 0000000000000000000000000000000000000000..3d1f0a89a631cc33a32eccde56015316d9dff47d
GIT binary patch
literal 7382
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
U>GYF=gFpy(_QILU(;nac2Ms>?r2qf`

literal 0
HcmV?d00001

diff --git a/lib/matplotlib/tests/baseline_images/test_backend_webagg/firefox.png b/lib/matplotlib/tests/baseline_images/test_backend_webagg/firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ba9183c61a032d1db3dc4c7cc52e3c7c002cb60
GIT binary patch
literal 12942
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
UB||#+KNE<P!@eB_+m4?5C)fn!2><{9

literal 0
HcmV?d00001

diff --git a/lib/matplotlib/tests/baseline_images/test_backend_webagg/webkit.png b/lib/matplotlib/tests/baseline_images/test_backend_webagg/webkit.png
new file mode 100644
index 0000000000000000000000000000000000000000..08f512fb9ebeb24f4883c7ccbe4aca9cac7824f9
GIT binary patch
literal 6500
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
Ytz5mXy}x=}BXFS9b*|-Kx%22h07-ukvH$=8

literal 0
HcmV?d00001

diff --git a/lib/matplotlib/tests/test_backend_webagg.py b/lib/matplotlib/tests/test_backend_webagg.py
index 1d6769494ef9..527553f4912d 100644
--- a/lib/matplotlib/tests/test_backend_webagg.py
+++ b/lib/matplotlib/tests/test_backend_webagg.py
@@ -1,14 +1,33 @@
 import os
+import shutil
+import subprocess
 import sys
+
 import pytest
 
 import matplotlib.backends.backend_webagg_core
 from matplotlib.testing import subprocess_run_for_testing
 
+import matplotlib.pyplot as plt
+from matplotlib.backends.backend_webagg import WebAggApplication
+from matplotlib.testing.compare import compare_images
+from matplotlib.testing.decorators import _image_directories
+from matplotlib.testing.exceptions import ImageComparisonFailure
+
+
+pytest.importorskip("tornado")
+
+
+try:
+    import pytest_playwright  # noqa
+except ImportError:
+    @pytest.fixture
+    def page():
+        pytest.skip(reason='Missing pytest-playwright')
+
 
 @pytest.mark.parametrize("backend", ["webagg", "nbagg"])
 def test_webagg_fallback(backend):
-    pytest.importorskip("tornado")
     if backend == "nbagg":
         pytest.importorskip("IPython")
     env = dict(os.environ)
@@ -30,3 +49,43 @@ def test_webagg_fallback(backend):
 def test_webagg_core_no_toolbar():
     fm = matplotlib.backends.backend_webagg_core.FigureManagerWebAgg
     assert fm._toolbar2_class is None
+
+
+@pytest.mark.backend('webagg')
+def test_webagg_general(page):
+    from playwright.sync_api import expect
+
+    # Listen for all console logs.
+    page.on('console', lambda msg: print(f'CONSOLE: {msg.text}'))
+
+    fig, ax = plt.subplots(facecolor='w')
+
+    # Don't start the Tornado event loop, but use the existing event loop
+    # started by the `page` fixture.
+    WebAggApplication.initialize()
+    WebAggApplication.started = True
+
+    page.goto(f'http://{WebAggApplication.address}:{WebAggApplication.port}/')
+    expect(page).to_have_title('MPL | WebAgg current figures')
+
+    # Check title.
+    expect(page.locator('div.ui-dialog-title')).to_have_text('Figure 1')
+
+    # Check toolbar buttons.
+    assert page.locator('button.mpl-widget').count() == len([
+        name for name, *_ in fig.canvas.manager.ToolbarCls.toolitems
+        if name is not None])
+
+    # Check canvas actually contains something.
+    baseline_dir, result_dir = _image_directories(test_webagg_general)
+    browser = page.context.browser.browser_type.name
+    actual = result_dir / f'{browser}.png'
+    expected = result_dir / f'{browser}-expected.png'
+
+    canvas = page.locator('canvas.mpl-canvas')
+    canvas.screenshot(path=actual)
+    shutil.copyfile(baseline_dir / f'{browser}.png', expected)
+
+    err = compare_images(expected, actual, tol=0)
+    if err:
+        raise ImageComparisonFailure(err)
diff --git a/requirements/testing/all.txt b/requirements/testing/all.txt
index e386924a9b67..9ee4a732fe76 100644
--- a/requirements/testing/all.txt
+++ b/requirements/testing/all.txt
@@ -6,6 +6,7 @@ coverage!=6.3
 psutil
 pytest!=4.6.0,!=5.4.0,!=8.1.0
 pytest-cov
+pytest-playwright
 pytest-rerunfailures
 pytest-timeout
 pytest-xdist

From 361f9d6f56896e8936559b177fc270630dc2dc76 Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Tue, 2 Aug 2022 23:11:01 -0400
Subject: [PATCH 02/10] WebAgg: Add test for the toolbar

---
 lib/matplotlib/tests/test_backend_webagg.py | 68 +++++++++++++++++++--
 1 file changed, 63 insertions(+), 5 deletions(-)

diff --git a/lib/matplotlib/tests/test_backend_webagg.py b/lib/matplotlib/tests/test_backend_webagg.py
index 527553f4912d..95b2dcea2119 100644
--- a/lib/matplotlib/tests/test_backend_webagg.py
+++ b/lib/matplotlib/tests/test_backend_webagg.py
@@ -2,6 +2,7 @@
 import shutil
 import subprocess
 import sys
+import warnings
 
 import pytest
 
@@ -71,11 +72,6 @@ def test_webagg_general(page):
     # Check title.
     expect(page.locator('div.ui-dialog-title')).to_have_text('Figure 1')
 
-    # Check toolbar buttons.
-    assert page.locator('button.mpl-widget').count() == len([
-        name for name, *_ in fig.canvas.manager.ToolbarCls.toolitems
-        if name is not None])
-
     # Check canvas actually contains something.
     baseline_dir, result_dir = _image_directories(test_webagg_general)
     browser = page.context.browser.browser_type.name
@@ -89,3 +85,65 @@ def test_webagg_general(page):
     err = compare_images(expected, actual, tol=0)
     if err:
         raise ImageComparisonFailure(err)
+
+
+@pytest.mark.backend('webagg')
+@pytest.mark.parametrize('toolbar', ['toolbar2', 'toolmanager'])
+def test_webagg_toolbar(page, toolbar):
+    from playwright.sync_api import expect
+
+    # Listen for all console logs.
+    page.on('console', lambda msg: print(f'CONSOLE: {msg.text}'))
+
+    with warnings.catch_warnings():
+        warnings.filterwarnings('ignore', message='Treat the new Tool classes',
+                                category=UserWarning)
+        plt.rcParams['toolbar'] = toolbar
+
+    fig, ax = plt.subplots(facecolor='w')
+
+    # Don't start the Tornado event loop, but use the existing event loop
+    # started by the `page` fixture.
+    WebAggApplication.initialize()
+    WebAggApplication.started = True
+
+    page.goto(f'http://{WebAggApplication.address}:{WebAggApplication.port}/')
+
+    expect(page.locator('button.mpl-widget')).to_have_count(
+        len([
+            name for name, *_ in fig.canvas.manager.ToolbarCls.toolitems
+            if name is not None]))
+
+    home = page.locator('button.mpl-widget').nth(0)
+    expect(home).to_be_visible()
+
+    back = page.locator('button.mpl-widget').nth(1)
+    expect(back).to_be_visible()
+    forward = page.locator('button.mpl-widget').nth(2)
+    expect(forward).to_be_visible()
+    if toolbar == 'toolbar2':
+        # ToolManager doesn't implement history button disabling.
+        # https://github.com/matplotlib/matplotlib/issues/17979
+        expect(back).to_be_disabled()
+        expect(forward).to_be_disabled()
+
+    pan = page.locator('button.mpl-widget').nth(3)
+    expect(pan).to_be_visible()
+    zoom = page.locator('button.mpl-widget').nth(4)
+    expect(zoom).to_be_visible()
+
+    save = page.locator('button.mpl-widget').nth(5)
+    expect(save).to_be_visible()
+    format_dropdown = page.locator('select.mpl-widget')
+    expect(format_dropdown).to_be_visible()
+
+    if toolbar == 'toolmanager':
+        # Location in status bar is not supported by ToolManager.
+        return
+
+    ax.set_position([0, 0, 1, 1])
+    bbox = page.locator('canvas.mpl-canvas').bounding_box()
+    x, y = bbox['x'] + bbox['width'] / 2, bbox['y'] + bbox['height'] / 2
+    page.mouse.move(x, y, steps=2)
+    message = page.locator('span.mpl-message')
+    expect(message).to_have_text('x=0.500 y=0.500')

From 345509382284eb7bc1818ca57e6dc0ca41f78c9a Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Tue, 2 Aug 2022 23:24:03 -0400
Subject: [PATCH 03/10] WebAgg: Add test for toolbar save button

---
 lib/matplotlib/tests/test_backend_webagg.py | 27 +++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/lib/matplotlib/tests/test_backend_webagg.py b/lib/matplotlib/tests/test_backend_webagg.py
index 95b2dcea2119..10990433b062 100644
--- a/lib/matplotlib/tests/test_backend_webagg.py
+++ b/lib/matplotlib/tests/test_backend_webagg.py
@@ -147,3 +147,30 @@ def test_webagg_toolbar(page, toolbar):
     page.mouse.move(x, y, steps=2)
     message = page.locator('span.mpl-message')
     expect(message).to_have_text('x=0.500 y=0.500')
+
+
+@pytest.mark.backend('webagg')
+def test_webagg_toolbar_save(page):
+    from playwright.sync_api import expect
+
+    # Listen for all console logs.
+    page.on('console', lambda msg: print(f'CONSOLE: {msg.text}'))
+
+    fig, ax = plt.subplots(facecolor='w')
+
+    # Don't start the Tornado event loop, but use the existing event loop
+    # started by the `page` fixture.
+    WebAggApplication.initialize()
+    WebAggApplication.started = True
+
+    page.goto(f'http://{WebAggApplication.address}:{WebAggApplication.port}/')
+
+    save = page.locator('button.mpl-widget').nth(5)
+    expect(save).to_be_visible()
+
+    with page.context.expect_page() as new_page_info:
+        save.click()
+    new_page = new_page_info.value
+
+    new_page.wait_for_load_state()
+    assert new_page.url.endswith('download.png')

From d6e116499af97f4e2f07b4932c635237aca82a83 Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Wed, 3 Aug 2022 01:54:31 -0400
Subject: [PATCH 04/10] Handle port passed to WebAggApplication.initialize

---
 lib/matplotlib/backends/backend_webagg.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/matplotlib/backends/backend_webagg.py b/lib/matplotlib/backends/backend_webagg.py
index dfc5747ef77c..45a50cb7cb2a 100644
--- a/lib/matplotlib/backends/backend_webagg.py
+++ b/lib/matplotlib/backends/backend_webagg.py
@@ -234,9 +234,9 @@ def random_ports(port, n):
             cls.address = mpl.rcParams['webagg.address']
         else:
             cls.address = address
-        cls.port = mpl.rcParams['webagg.port']
-        for port in random_ports(cls.port,
-                                 mpl.rcParams['webagg.port_retries']):
+        if port is None:
+            port = mpl.rcParams['webagg.port']
+        for port in random_ports(port, mpl.rcParams['webagg.port_retries']):
             try:
                 app.listen(port, cls.address)
             except OSError as e:

From 97259e1aee870e156e74e1717527bdb4c6c87756 Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Wed, 3 Aug 2022 01:44:30 -0400
Subject: [PATCH 05/10] Use a random port for WebAgg tests

This prevents them from conflicting when run in parallel. Even though
there is some attempt to pick alternative ports, that seems to cause a
socket leak somewhere in Tornado, which Pytest converts to an error, so
we have to do it manually.
---
 lib/matplotlib/tests/conftest.py               | 18 ++++++++++++++++++
 lib/matplotlib/tests/test_backend_webagg.py    | 12 ++++++------
 .../tests/test_backends_interactive.py         |  7 ++++---
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/lib/matplotlib/tests/conftest.py b/lib/matplotlib/tests/conftest.py
index 54a1bc6cae94..a49a97d51c32 100644
--- a/lib/matplotlib/tests/conftest.py
+++ b/lib/matplotlib/tests/conftest.py
@@ -1,2 +1,20 @@
+import contextlib
+import socket
+
+import pytest
+
 from matplotlib.testing.conftest import (  # noqa
     mpl_test_settings, pytest_configure, pytest_unconfigure, pd, xr)
+
+
+@pytest.fixture
+def random_port():
+    with contextlib.closing(
+            socket.socket(socket.AF_INET, socket.SOCK_STREAM)) as s:
+        s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
+        s.bind(('', 0))
+        s.listen(1)
+        addr = s.getsockname()
+        port = addr[1]
+
+    return port
diff --git a/lib/matplotlib/tests/test_backend_webagg.py b/lib/matplotlib/tests/test_backend_webagg.py
index 10990433b062..38bed92e24d7 100644
--- a/lib/matplotlib/tests/test_backend_webagg.py
+++ b/lib/matplotlib/tests/test_backend_webagg.py
@@ -53,7 +53,7 @@ def test_webagg_core_no_toolbar():
 
 
 @pytest.mark.backend('webagg')
-def test_webagg_general(page):
+def test_webagg_general(random_port, page):
     from playwright.sync_api import expect
 
     # Listen for all console logs.
@@ -63,7 +63,7 @@ def test_webagg_general(page):
 
     # Don't start the Tornado event loop, but use the existing event loop
     # started by the `page` fixture.
-    WebAggApplication.initialize()
+    WebAggApplication.initialize(port=random_port)
     WebAggApplication.started = True
 
     page.goto(f'http://{WebAggApplication.address}:{WebAggApplication.port}/')
@@ -89,7 +89,7 @@ def test_webagg_general(page):
 
 @pytest.mark.backend('webagg')
 @pytest.mark.parametrize('toolbar', ['toolbar2', 'toolmanager'])
-def test_webagg_toolbar(page, toolbar):
+def test_webagg_toolbar(random_port, page, toolbar):
     from playwright.sync_api import expect
 
     # Listen for all console logs.
@@ -104,7 +104,7 @@ def test_webagg_toolbar(page, toolbar):
 
     # Don't start the Tornado event loop, but use the existing event loop
     # started by the `page` fixture.
-    WebAggApplication.initialize()
+    WebAggApplication.initialize(port=random_port)
     WebAggApplication.started = True
 
     page.goto(f'http://{WebAggApplication.address}:{WebAggApplication.port}/')
@@ -150,7 +150,7 @@ def test_webagg_toolbar(page, toolbar):
 
 
 @pytest.mark.backend('webagg')
-def test_webagg_toolbar_save(page):
+def test_webagg_toolbar_save(random_port, page):
     from playwright.sync_api import expect
 
     # Listen for all console logs.
@@ -160,7 +160,7 @@ def test_webagg_toolbar_save(page):
 
     # Don't start the Tornado event loop, but use the existing event loop
     # started by the `page` fixture.
-    WebAggApplication.initialize()
+    WebAggApplication.initialize(port=random_port)
     WebAggApplication.started = True
 
     page.goto(f'http://{WebAggApplication.address}:{WebAggApplication.port}/')
diff --git a/lib/matplotlib/tests/test_backends_interactive.py b/lib/matplotlib/tests/test_backends_interactive.py
index 6830e7d5c845..1ad3848bde60 100644
--- a/lib/matplotlib/tests/test_backends_interactive.py
+++ b/lib/matplotlib/tests/test_backends_interactive.py
@@ -479,14 +479,15 @@ def test_cross_Qt_imports(host, mpl):
 @pytest.mark.skipif('TF_BUILD' in os.environ,
                     reason="this test fails an azure for unknown reasons")
 @pytest.mark.skipif(sys.platform == "win32", reason="Cannot send SIGINT on Windows.")
-def test_webagg():
+def test_webagg(random_port):
     pytest.importorskip("tornado")
     proc = subprocess.Popen(
         [sys.executable, "-c",
          inspect.getsource(_test_interactive_impl)
-         + "\n_test_interactive_impl()", "{}"],
+         + "\n_test_interactive_impl()",
+         json.dumps({'webagg.port': random_port})],
         env={**os.environ, "MPLBACKEND": "webagg", "SOURCE_DATE_EPOCH": "0"})
-    url = f'http://{mpl.rcParams["webagg.address"]}:{mpl.rcParams["webagg.port"]}'
+    url = f'http://{mpl.rcParams["webagg.address"]}:{random_port}'
     timeout = time.perf_counter() + _test_timeout
     try:
         while True:

From 9bd2331f04b1f0946a7993b984d50248ece34cd8 Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Wed, 3 Aug 2022 02:01:01 -0400
Subject: [PATCH 06/10] WebAgg: Add a test for resizing the figure

---
 lib/matplotlib/tests/test_backend_webagg.py | 29 +++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/lib/matplotlib/tests/test_backend_webagg.py b/lib/matplotlib/tests/test_backend_webagg.py
index 38bed92e24d7..8db49ac688f8 100644
--- a/lib/matplotlib/tests/test_backend_webagg.py
+++ b/lib/matplotlib/tests/test_backend_webagg.py
@@ -87,6 +87,35 @@ def test_webagg_general(random_port, page):
         raise ImageComparisonFailure(err)
 
 
+@pytest.mark.backend('webagg')
+def test_webagg_resize(random_port, page):
+    # Listen for all console logs.
+    page.on('console', lambda msg: print(f'CONSOLE: {msg.text}'))
+
+    fig, ax = plt.subplots(facecolor='w')
+    orig_bbox = fig.bbox.frozen()
+
+    # Don't start the Tornado event loop, but use the existing event loop
+    # started by the `page` fixture.
+    WebAggApplication.initialize(port=random_port)
+    WebAggApplication.started = True
+
+    page.goto(f'http://{WebAggApplication.address}:{WebAggApplication.port}/')
+
+    canvas = page.locator('canvas.mpl-canvas')
+
+    # Resize the canvas to be twice as big.
+    bbox = canvas.bounding_box()
+    x, y = bbox['x'] + bbox['width'] - 1, bbox['y'] + bbox['height'] - 1
+    page.mouse.move(x, y)
+    page.mouse.down()
+    page.mouse.move(x + bbox['width'], y + bbox['height'])
+    page.mouse.up()
+
+    assert fig.bbox.height == orig_bbox.height * 2
+    assert fig.bbox.width == orig_bbox.width * 2
+
+
 @pytest.mark.backend('webagg')
 @pytest.mark.parametrize('toolbar', ['toolbar2', 'toolmanager'])
 def test_webagg_toolbar(random_port, page, toolbar):

From 99b815e2beca70bfc265b83247596a61793b4b95 Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Wed, 3 Aug 2022 04:10:17 -0400
Subject: [PATCH 07/10] WebAgg: Add tests for pan/zoom tool

---
 lib/matplotlib/tests/test_backend_webagg.py | 116 ++++++++++++++++++++
 1 file changed, 116 insertions(+)

diff --git a/lib/matplotlib/tests/test_backend_webagg.py b/lib/matplotlib/tests/test_backend_webagg.py
index 8db49ac688f8..9ece1f85fbca 100644
--- a/lib/matplotlib/tests/test_backend_webagg.py
+++ b/lib/matplotlib/tests/test_backend_webagg.py
@@ -1,4 +1,5 @@
 import os
+import re
 import shutil
 import subprocess
 import sys
@@ -203,3 +204,118 @@ def test_webagg_toolbar_save(random_port, page):
 
     new_page.wait_for_load_state()
     assert new_page.url.endswith('download.png')
+
+
+@pytest.mark.backend('webagg')
+def test_webagg_toolbar_pan(random_port, page):
+    from playwright.sync_api import expect
+
+    # Listen for all console logs.
+    page.on('console', lambda msg: print(f'CONSOLE: {msg.text}'))
+
+    fig, ax = plt.subplots(facecolor='w')
+    ax.plot([3, 2, 1])
+    orig_lim = ax.viewLim.frozen()
+    # Make figure coords ~= axes coords, with ticks visible for inspection.
+    ax.set_position([0, 0, 1, 1])
+    ax.tick_params(axis='y', direction='in', pad=-22)
+    ax.tick_params(axis='x', direction='in', pad=-15)
+
+    # Don't start the Tornado event loop, but use the existing event loop
+    # started by the `page` fixture.
+    WebAggApplication.initialize()
+    WebAggApplication.started = True
+
+    page.goto(f'http://{WebAggApplication.address}:{WebAggApplication.port}/')
+
+    canvas = page.locator('canvas.mpl-canvas')
+    expect(canvas).to_be_visible()
+    home = page.locator('button.mpl-widget').nth(0)
+    expect(home).to_be_visible()
+    pan = page.locator('button.mpl-widget').nth(3)
+    expect(pan).to_be_visible()
+    zoom = page.locator('button.mpl-widget').nth(4)
+    expect(zoom).to_be_visible()
+
+    active_re = re.compile(r'active')
+    expect(pan).not_to_have_class(active_re)
+    expect(zoom).not_to_have_class(active_re)
+    assert ax.get_navigate_mode() is None
+    pan.click()
+    expect(pan).to_have_class(active_re)
+    expect(zoom).not_to_have_class(active_re)
+    assert ax.get_navigate_mode() == 'PAN'
+
+    # Pan 50% of the figure diagonally toward bottom-right.
+    bbox = canvas.bounding_box()
+    x, y = bbox['x'] + bbox['width'] / 4, bbox['y'] + bbox['height'] / 4
+    page.mouse.move(x, y)
+    page.mouse.down()
+    page.mouse.move(x + bbox['width'] / 2, y + bbox['height'] / 2,
+                    steps=20)
+    page.mouse.up()
+
+    assert ax.get_xlim() == (orig_lim.x0 - orig_lim.width / 2,
+                             orig_lim.x1 - orig_lim.width / 2)
+    assert ax.get_ylim() == (orig_lim.y0 + orig_lim.height / 2,
+                             orig_lim.y1 + orig_lim.height / 2)
+
+    # Reset.
+    home.click()
+    assert ax.viewLim.bounds == orig_lim.bounds
+
+    # Pan 50% of the figure diagonally toward bottom-right, while holding 'x'
+    # key, to constrain the pan horizontally.
+    bbox = canvas.bounding_box()
+    x, y = bbox['x'] + bbox['width'] / 4, bbox['y'] + bbox['height'] / 4
+    page.mouse.move(x, y)
+    page.mouse.down()
+    page.keyboard.down('x')
+    page.mouse.move(x + bbox['width'] / 2, y + bbox['height'] / 2,
+                    steps=20)
+    page.mouse.up()
+    page.keyboard.up('x')
+
+    assert ax.get_xlim() == (orig_lim.x0 - orig_lim.width / 2,
+                             orig_lim.x1 - orig_lim.width / 2)
+    assert ax.get_ylim() == (orig_lim.y0, orig_lim.y1)
+
+    # Reset.
+    home.click()
+    assert ax.viewLim.bounds == orig_lim.bounds
+
+    # Pan 50% of the figure diagonally toward bottom-right, while holding 'y'
+    # key, to constrain the pan vertically.
+    bbox = canvas.bounding_box()
+    x, y = bbox['x'] + bbox['width'] / 4, bbox['y'] + bbox['height'] / 4
+    page.mouse.move(x, y)
+    page.mouse.down()
+    page.keyboard.down('y')
+    page.mouse.move(x + bbox['width'] / 2, y + bbox['height'] / 2,
+                    steps=20)
+    page.mouse.up()
+    page.keyboard.up('y')
+
+    assert ax.get_xlim() == (orig_lim.x0, orig_lim.x1)
+    assert ax.get_ylim() == (orig_lim.y0 + orig_lim.height / 2,
+                             orig_lim.y1 + orig_lim.height / 2)
+
+    # Reset.
+    home.click()
+    assert ax.viewLim.bounds == orig_lim.bounds
+
+    # Zoom 50% of the figure diagonally toward bottom-right.
+    bbox = canvas.bounding_box()
+    x, y = bbox['x'], bbox['y']
+    page.mouse.move(x, y)
+    page.mouse.down(button='right')
+    page.mouse.move(x + bbox['width'] / 2, y + bbox['height'] / 2,
+                    steps=20)
+    page.mouse.up(button='right')
+
+    # Expands in x-direction.
+    assert ax.viewLim.x0 == orig_lim.x0
+    assert ax.viewLim.x1 < orig_lim.x1 - orig_lim.width / 2
+    # Contracts in y-direction.
+    assert ax.viewLim.y1 == orig_lim.y1
+    assert ax.viewLim.y0 < orig_lim.y0 - orig_lim.height / 2

From 7faa294a5828b1098feb99d63077bc4a86c65d9b Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Wed, 3 Aug 2022 04:21:10 -0400
Subject: [PATCH 08/10] WebAgg: Add tests of the zoom-to-rect tool

---
 lib/matplotlib/tests/test_backend_webagg.py | 115 ++++++++++++++++++++
 1 file changed, 115 insertions(+)

diff --git a/lib/matplotlib/tests/test_backend_webagg.py b/lib/matplotlib/tests/test_backend_webagg.py
index 9ece1f85fbca..1096c461a668 100644
--- a/lib/matplotlib/tests/test_backend_webagg.py
+++ b/lib/matplotlib/tests/test_backend_webagg.py
@@ -319,3 +319,118 @@ def test_webagg_toolbar_pan(random_port, page):
     # Contracts in y-direction.
     assert ax.viewLim.y1 == orig_lim.y1
     assert ax.viewLim.y0 < orig_lim.y0 - orig_lim.height / 2
+
+
+@pytest.mark.backend('webagg')
+def test_webagg_toolbar_zoom(random_port, page):
+    from playwright.sync_api import expect
+
+    # Listen for all console logs.
+    page.on('console', lambda msg: print(f'CONSOLE: {msg.text}'))
+
+    fig, ax = plt.subplots(facecolor='w')
+    ax.plot([3, 2, 1])
+    orig_lim = ax.viewLim.frozen()
+    # Make figure coords ~= axes coords, with ticks visible for inspection.
+    ax.set_position([0, 0, 1, 1])
+    ax.tick_params(axis='y', direction='in', pad=-22)
+    ax.tick_params(axis='x', direction='in', pad=-15)
+
+    # Don't start the Tornado event loop, but use the existing event loop
+    # started by the `page` fixture.
+    WebAggApplication.initialize()
+    WebAggApplication.started = True
+
+    page.goto(f'http://{WebAggApplication.address}:{WebAggApplication.port}/')
+
+    canvas = page.locator('canvas.mpl-canvas')
+    expect(canvas).to_be_visible()
+    home = page.locator('button.mpl-widget').nth(0)
+    expect(home).to_be_visible()
+    pan = page.locator('button.mpl-widget').nth(3)
+    expect(pan).to_be_visible()
+    zoom = page.locator('button.mpl-widget').nth(4)
+    expect(zoom).to_be_visible()
+
+    active_re = re.compile(r'active')
+    expect(pan).not_to_have_class(active_re)
+    expect(zoom).not_to_have_class(active_re)
+    assert ax.get_navigate_mode() is None
+    zoom.click()
+    expect(pan).not_to_have_class(active_re)
+    expect(zoom).to_have_class(active_re)
+    assert ax.get_navigate_mode() == 'ZOOM'
+
+    # Zoom 25% in on each side.
+    bbox = canvas.bounding_box()
+    x, y = bbox['x'] + bbox['width'] / 4, bbox['y'] + bbox['height'] / 4
+    page.mouse.move(x, y)
+    page.mouse.down()
+    page.mouse.move(x + bbox['width'] / 2, y + bbox['height'] / 2,
+                    steps=20)
+    page.mouse.up()
+
+    assert ax.get_xlim() == (orig_lim.x0 + orig_lim.width / 4,
+                             orig_lim.x1 - orig_lim.width / 4)
+    assert ax.get_ylim() == (orig_lim.y0 + orig_lim.height / 4,
+                             orig_lim.y1 - orig_lim.height / 4)
+
+    # Reset.
+    home.click()
+
+    # Zoom 25% in on each side, while holding 'x' key, to constrain the zoom
+    # horizontally..
+    bbox = canvas.bounding_box()
+    x, y = bbox['x'] + bbox['width'] / 4, bbox['y'] + bbox['height'] / 4
+    page.mouse.move(x, y)
+    page.mouse.down()
+    page.keyboard.down('x')
+    page.mouse.move(x + bbox['width'] / 2, y + bbox['height'] / 2,
+                    steps=20)
+    page.mouse.up()
+    page.keyboard.up('x')
+
+    assert ax.get_xlim() == (orig_lim.x0 + orig_lim.width / 4,
+                             orig_lim.x1 - orig_lim.width / 4)
+    assert ax.get_ylim() == (orig_lim.y0, orig_lim.y1)
+
+    # Reset.
+    home.click()
+
+    # Zoom 25% in on each side, while holding 'y' key, to constrain the zoom
+    # vertically.
+    bbox = canvas.bounding_box()
+    x, y = bbox['x'] + bbox['width'] / 4, bbox['y'] + bbox['height'] / 4
+    page.mouse.move(x, y)
+    page.mouse.down()
+    page.keyboard.down('y')
+    page.mouse.move(x + bbox['width'] / 2, y + bbox['height'] / 2,
+                    steps=20)
+    page.mouse.up()
+    page.keyboard.up('y')
+
+    assert ax.get_xlim() == (orig_lim.x0, orig_lim.x1)
+    assert ax.get_ylim() == (orig_lim.y0 + orig_lim.height / 4,
+                             orig_lim.y1 - orig_lim.height / 4)
+
+    # Reset.
+    home.click()
+
+    # Zoom 25% out on each side.
+    bbox = canvas.bounding_box()
+    x, y = bbox['x'] + bbox['width'] / 4, bbox['y'] + bbox['height'] / 4
+    page.mouse.move(x, y)
+    page.mouse.down(button='right')
+    page.mouse.move(x + bbox['width'] / 2, y + bbox['height'] / 2,
+                    steps=20)
+    page.mouse.up(button='right')
+
+    # Limits were doubled, but based on the central point.
+    cx = orig_lim.x0 + orig_lim.width / 2
+    x0 = cx - orig_lim.width
+    x1 = cx + orig_lim.width
+    assert ax.get_xlim() == (x0, x1)
+    cy = orig_lim.y0 + orig_lim.height / 2
+    y0 = cy - orig_lim.height
+    y1 = cy + orig_lim.height
+    assert ax.get_ylim() == (y0, y1)

From 785b169470928ad8628be8d66deb24531d4d6991 Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Tue, 4 Oct 2022 04:07:10 -0400
Subject: [PATCH 09/10] ci: Explicitly ask for all browsers

---
 .github/workflows/tests.yml | 7 ++++---
 azure-pipelines.yml         | 1 +
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 72936870b803..36a2476457f6 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -197,10 +197,10 @@ jobs:
             ~/.cache/matplotlib
             !~/.cache/matplotlib/tex.cache
             !~/.cache/matplotlib/test_cache
-          key: 4-${{ runner.os }}-py${{ matrix.python-version }}-mpl-${{ github.ref }}-${{ github.sha }}
+          key: 5-${{ runner.os }}-py${{ matrix.python-version }}-mpl-${{ github.ref }}-${{ github.sha }}
           restore-keys: |
-            4-${{ runner.os }}-py${{ matrix.python-version }}-mpl-${{ github.ref }}-
-            4-${{ runner.os }}-py${{ matrix.python-version }}-mpl-
+            5-${{ runner.os }}-py${{ matrix.python-version }}-mpl-${{ github.ref }}-
+            5-${{ runner.os }}-py${{ matrix.python-version }}-mpl-
 
       - name: Install Python dependencies
         run: |
@@ -314,6 +314,7 @@ jobs:
       - name: Run pytest
         run: |
           pytest -rfEsXR -n auto \
+            --browser chromium --browser firefox --browser webkit \
             --maxfail=50 --timeout=300 --durations=25 \
             --cov-report=xml --cov=lib --log-level=DEBUG --color=yes
 
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index 14bcc7125d84..bc48d870740e 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -228,6 +228,7 @@ stages:
               fi
               PYTHONFAULTHANDLER=1 pytest -rfEsXR -n 2 \
                   --maxfail=50 --timeout=300 --durations=25 \
+                  --browser chromium --browser firefox --browser webkit \
                   --junitxml=junit/test-results.xml --cov-report=xml --cov=lib
               if [[ -n $SESSION_ID ]]; then
                 if [[ $VS_VER == 2022 ]]; then

From f63df0d3841918841f73764445af1faeb6a2ed81 Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Fri, 4 Nov 2022 03:33:13 -0400
Subject: [PATCH 10/10] Debug other OSs

---
 .github/workflows/tests.yml                 | 7 +++++++
 lib/matplotlib/tests/test_backend_webagg.py | 4 ++++
 2 files changed, 11 insertions(+)

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 36a2476457f6..a9331ae7ebb4 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -315,6 +315,7 @@ jobs:
         run: |
           pytest -rfEsXR -n auto \
             --browser chromium --browser firefox --browser webkit \
+            --slowmo=100 --tracing=on --video=on \
             --maxfail=50 --timeout=300 --durations=25 \
             --cov-report=xml --cov=lib --log-level=DEBUG --color=yes
 
@@ -381,6 +382,12 @@ jobs:
           name: "${{ matrix.python-version }} ${{ matrix.os }} ${{ matrix.name-suffix }} result images"
           path: ./result_images
 
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: "${{ matrix.python-version }} ${{ matrix.os }} ${{ matrix.name-suffix }} playwright"
+          path: ./test-results
+
   # Separate dependent job to only upload one issue from the matrix of jobs
   create-issue:
     if: ${{ failure() && github.event_name == 'schedule' }}
diff --git a/lib/matplotlib/tests/test_backend_webagg.py b/lib/matplotlib/tests/test_backend_webagg.py
index 1096c461a668..cc1f9d2e5a4c 100644
--- a/lib/matplotlib/tests/test_backend_webagg.py
+++ b/lib/matplotlib/tests/test_backend_webagg.py
@@ -105,12 +105,16 @@ def test_webagg_resize(random_port, page):
 
     canvas = page.locator('canvas.mpl-canvas')
 
+    print(f'{orig_bbox=}')
     # Resize the canvas to be twice as big.
     bbox = canvas.bounding_box()
+    print(f'{bbox=}')
     x, y = bbox['x'] + bbox['width'] - 1, bbox['y'] + bbox['height'] - 1
+    print(f'{x=} {y=}')
     page.mouse.move(x, y)
     page.mouse.down()
     page.mouse.move(x + bbox['width'], y + bbox['height'])
+    print(f'{x + bbox["width"]=} {y + bbox["height"]=}')
     page.mouse.up()
 
     assert fig.bbox.height == orig_bbox.height * 2