Add a test for backward compatibility with legacy setting

Intrepidd · Intrepidd · commit 117440d0f4a8 · 2025-03-14T16:34:05.000+01:00
diff --git a/src/tests/fixtures/transitions/left_legacy.html b/src/tests/fixtures/transitions/left_legacy.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>Left</title>
+  <meta name="view-transition" content="same-origin" />
+  <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+
+  <style>
+    .square {
+      display: block;
+      width: 100px;
+      height: 100px;
+      border-radius: 6px;
+      background-color: blue;
+      view-transition-name: square;
+    }
+
+    .square.right {
+      margin-left: auto;
+    }
+  </style>
+</head>
+
+<body style="background-color: orange">
+  <h1>Left</h1>
+  <p><a id="go-right" href="/src/tests/fixtures/transitions/right_legacy.html">go right</a></p>
+  <div class="square"></div>
+  <p><a id="go-other" href="/src/tests/fixtures/transitions/other.html">go other</a></p>
+</body>
+
+</html>
diff --git a/src/tests/fixtures/transitions/right_legacy.html b/src/tests/fixtures/transitions/right_legacy.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Right</title>
+  <meta name="view-transition" content="same-origin" />
+  <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+
+  <style>
+    .square {
+      display: block;
+      width: 100px;
+      height: 100px;
+      border-radius: 6px;
+      background-color: blue;
+      view-transition-name: square;
+    }
+
+    .square.right {
+      margin-left: auto;
+    }
+  </style>
+</head>
+
+<body style="background-color: red">
+  <h1>Right</h1>
+  <p><a id="go-left" href="/src/tests/fixtures/transitions/left_legacy.html">go left</a></p>
+  <div class="square right"></div>
+</body>
+
+</html>
diff --git a/src/tests/functional/drive_view_transition_legacy_test.js b/src/tests/functional/drive_view_transition_legacy_test.js
@@ -0,0 +1,30 @@
+import { test } from "@playwright/test"
+import { assert } from "chai"
+import { nextBody } from "../helpers/page"
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/src/tests/fixtures/transitions/left_legacy.html")
+
+  await page.evaluate(`
+    document.startViewTransition = (callback) => {
+      window.startViewTransitionCalled = true
+      callback()
+    }
+  `)
+})
+
+test("navigating triggers the view transition", async ({ page }) => {
+  await page.locator("#go-right").click()
+  await nextBody(page)
+
+  const called = await page.evaluate(`window.startViewTransitionCalled`)
+  assert.isTrue(called)
+})
+
+test("navigating does not trigger a view transition when meta tag not present", async ({ page }) => {
+  await page.locator("#go-other").click()
+  await nextBody(page)
+
+  const called = await page.evaluate(`window.startViewTransitionCalled`)
+  assert.isUndefined(called)
+})
