Merge pull request #15 from PoongalOO/webkit-mobile/ticket8

Tentative add webkit and mobile

README.fr.md

@@ -10,7 +10,7 @@ Version anglaise : [readme.md](readme.md)
 
 Ce fork a été testé avec jQuery `4.0.0` dans la démo minimale et il est couvert par des tests unitaires et visuels automatisés. Le coeur du plugin peut s'initialiser, naviguer, redimensionner, ajouter/supprimer des pages et se détruire correctement dans les tests sur navigateur moderne.
 
-La compatibilité avec tous les navigateurs et appareils modernes n'est pas encore garantie. Safari/WebKit, iOS, Android tactile, l'accessibilité et les régressions visuelles en contexte produit restent à valider spécifiquement.
+La couverture visuelle automatisée tourne actuellement sur Chromium desktop et sur un viewport mobile compact Chromium. Un projet Playwright WebKit est configuré quand l'hôte possède les dépendances système WebKit requises ; sur la machine locale actuelle, il n'est pas activé car `libgstcodecparsers-1.0.so.0` est absente. Les appareils iOS/Android natifs, l'accessibilité et les régressions visuelles en contexte produit restent à valider spécifiquement.
 
 ## Modifications réalisées
 
@@ -38,6 +38,8 @@ La compatibilité avec tous les navigateurs et appareils modernes n'est pas enco
 - Correction de la mise en page de la démo minimale afin que les dimensions mesurées par turn.js correspondent à la taille réellement rendue des pages.
 - Ajout de tests unitaires avec Vitest et JSDOM.
 - Ajout de tests visuels Playwright et de snapshots de référence pour la démo minimale.
+- Ajout d'une validation visuelle Chromium mobile pour la démo minimale et les démos magazine.
+- Ajout d'une validation Playwright WebKit conditionnelle pour les hôtes qui possèdent les dépendances système WebKit requises.
 - Ajout des scripts npm et de la configuration projet pour les tests automatisés.
 - Régénération de `turn.min.js` à partir de la source mise à jour.
 
@@ -185,6 +187,8 @@ La suite actuelle couvre :
 - le rendu de la démo minimale ;
 - le rendu après page tournée ;
 - la géométrie en viewport compact ;
+- les contrôles et la géométrie en viewport mobile Chromium ;
+- les smoke tests des démos magazine et magazine monopage en Chromium desktop et mobile ;
 - les mesures de page pendant l'animation.
 
 ## Prérequis
@@ -192,6 +196,8 @@ La suite actuelle couvre :
 - Node.js pour le développement et les tests.
 - jQuery `4.0.0` pour la démo maintenue et la configuration de test actuelle.
 - Un navigateur pris en charge par Playwright pour les tests visuels.
+- Les tests visuels Chromium utilisent l'exécutable Chromium local quand `/usr/bin/chromium` est disponible.
+- Les tests visuels WebKit requièrent Playwright WebKit et la bibliothèque système `libgstcodecparsers-1.0.so.0` ; définir `TURNJS_ENABLE_WEBKIT=1` force le projet WebKit sur un hôte préparé.
 
 Les anciennes versions de jQuery faisaient partie du spike de compatibilité, mais ce dépôt utilise désormais jQuery `4.0.0` comme cible moderne pour la démo et les tests automatisés.
 
@@ -199,7 +205,7 @@ Les anciennes versions de jQuery faisaient partie du spike de compatibilité, ma
 
 Le README d'origine mentionnait Chrome 12, Safari 5, Firefox 10 et IE 9 pour la 3e release historique.
 
-Cette copie maintenue cible les navigateurs modernes, mais la couverture automatisée actuelle se limite aux navigateurs configurés par Playwright et à l'environnement de test local. Safari/WebKit, les appareils mobiles tactiles et le comportement d'accessibilité doivent être considérés comme des validations encore ouvertes.
+Cette copie maintenue cible les navigateurs modernes. La couverture automatisée actuelle valide Chromium desktop avec snapshots de référence et Chromium mobile/compact avec des contrôles fonctionnels et géométriques. La validation WebKit est configurée mais conditionnelle : elle a été tentée localement et Playwright n'a pas pu lancer WebKit parce que l'hôte ne possède pas `libgstcodecparsers-1.0.so.0`. Considérer Safari/WebKit comme validé seulement sur les hôtes où ce projet s'exécute, et garder les appareils tactiles mobiles natifs et l'accessibilité comme validations ouvertes.
 
 ## Licence
 

playwright.config.mjs

@@ -2,6 +2,45 @@ import { defineConfig } from '@playwright/test';
 import { existsSync } from 'node:fs';
 
 const chromiumExecutable = process.env.CHROMIUM_EXECUTABLE_PATH || '/usr/bin/chromium';
+const chromiumLaunchOptions = existsSync(chromiumExecutable) ? { executablePath: chromiumExecutable } : {};
+const desktopViewport = { width: 1100, height: 760 };
+const webkitSystemDepsAvailable = [
+  '/lib/x86_64-linux-gnu/libgstcodecparsers-1.0.so.0',
+  '/usr/lib/x86_64-linux-gnu/libgstcodecparsers-1.0.so.0'
+].some(existsSync);
+
+const projects = [
+  {
+    use: {
+      browserName: 'chromium',
+      viewport: desktopViewport,
+      deviceScaleFactor: 1,
+      launchOptions: chromiumLaunchOptions
+    }
+  },
+  {
+    name: 'chromium-mobile',
+    use: {
+      browserName: 'chromium',
+      viewport: { width: 390, height: 844 },
+      deviceScaleFactor: 2,
+      isMobile: true,
+      hasTouch: true,
+      launchOptions: chromiumLaunchOptions
+    }
+  }
+];
+
+if (webkitSystemDepsAvailable || process.env.TURNJS_ENABLE_WEBKIT === '1') {
+  projects.push({
+    name: 'webkit-desktop',
+    use: {
+      browserName: 'webkit',
+      viewport: desktopViewport,
+      deviceScaleFactor: 1
+    }
+  });
+}
 
 export default defineConfig({
   testDir: './tests/visual',
@@ -12,10 +51,5 @@ export default defineConfig({
       maxDiffPixelRatio: 0.02
     }
   },
-  use: {
-    browserName: 'chromium',
-    viewport: { width: 1100, height: 760 },
-    deviceScaleFactor: 1,
-    launchOptions: existsSync(chromiumExecutable) ? { executablePath: chromiumExecutable } : {}
-  }
+  projects
 });

readme.md

@@ -10,7 +10,7 @@ French version: [README.fr.md](README.fr.md)
 
 This fork has been smoke-tested with jQuery `4.0.0` in the minimal demo and covered by automated unit and visual tests. The core plugin can initialize, navigate, resize, add/remove pages, and destroy itself in modern browser test runs.
 
-Compatibility is not yet guaranteed for every modern browser or device. Safari/WebKit, iOS, Android touch behavior, accessibility, and production visual regressions still need dedicated validation.
+Automated visual coverage currently runs on Chromium desktop and a compact Chromium mobile viewport. A WebKit Playwright project is configured when the host has the required WebKit system dependencies; on the current local machine it is not enabled because `libgstcodecparsers-1.0.so.0` is missing. Native iOS/Android devices, accessibility, and production visual regressions still need dedicated validation.
 
 ## What Changed
 
@@ -38,6 +38,8 @@ Compatibility is not yet guaranteed for every modern browser or device. Safari/W
 - Fixed minimal demo layout so turn.js page measurements match the real rendered page size.
 - Added unit tests with Vitest and JSDOM.
 - Added Playwright visual tests and reference snapshots for the minimal demo.
+- Added Chromium mobile visual validation for the minimal demo and magazine demos.
+- Added conditional WebKit Playwright validation for hosts with the required WebKit system dependencies.
 - Added npm scripts and project configuration for automated tests.
 - Regenerated `turn.min.js` from the updated source.
 
@@ -185,6 +187,8 @@ The current suite covers:
 - minimal demo rendering;
 - page turn rendering;
 - compact viewport geometry;
+- mobile viewport controls and geometry in Chromium;
+- magazine and single-page magazine smoke tests in desktop and mobile Chromium;
 - page measurements during animation.
 
 ## Requirements
@@ -192,6 +196,8 @@ The current suite covers:
 - Node.js for development and tests.
 - jQuery `4.0.0` for the current maintained demo and test setup.
 - A browser supported by Playwright for visual tests.
+- Chromium visual tests use the local Chromium executable when `/usr/bin/chromium` is available.
+- WebKit visual tests require Playwright WebKit plus the system library `libgstcodecparsers-1.0.so.0`; set `TURNJS_ENABLE_WEBKIT=1` to force the WebKit project on a prepared host.
 
 Older jQuery versions were part of the compatibility spike, but this repository now uses jQuery `4.0.0` as the modern target for its demo and automated tests.
 
@@ -199,7 +205,7 @@ Older jQuery versions were part of the compatibility spike, but this repository
 
 The original README listed Chrome 12, Safari 5, Firefox 10, and IE 9 for the historical 3rd release.
 
-This maintained copy targets modern browsers, but the current automated coverage is limited to the configured Playwright browsers and the local test environment. Treat Safari/WebKit, mobile touch devices, and accessibility behavior as open validation work.
+This maintained copy targets modern browsers. The current automated coverage validates Chromium desktop with reference screenshots and Chromium mobile/compact behavior with functional and geometry checks. WebKit validation is configured but conditional: it was attempted locally and Playwright could not launch WebKit because the host is missing `libgstcodecparsers-1.0.so.0`. Treat Safari/WebKit as validated only on hosts where that project runs, and treat native mobile touch devices and accessibility behavior as open validation work.
 
 ## License
 

tests/visual/minimal.spec.js

@@ -64,13 +64,19 @@ test.beforeEach(async ({ page }) => {
   });
 });
 
-test('minimal demo renders the opening page', async ({ page }) => {
+const isScreenshotProject = testInfo => testInfo.project.name === '';
+
+test('minimal demo renders the opening page', async ({ page }, testInfo) => {
   await page.goto(`${baseUrl}/demos/minimal/index.html`);
   await page.waitForFunction(() => window.jQuery && window.jQuery.fn.jquery === '4.0.0' && typeof window.jQuery.fn.turn === 'function');
-  await expect(page.locator('#book')).toHaveScreenshot('minimal-book-page-1.png');
+
+  await expect(page.locator('#status')).toHaveText('Page 1 / 6');
+  if (isScreenshotProject(testInfo)) {
+    await expect(page.locator('#book')).toHaveScreenshot('minimal-book-page-1.png');
+  }
 });
 
-test('minimal demo renders after turning to the next page', async ({ page }) => {
+test('minimal demo renders after turning to the next page', async ({ page }, testInfo) => {
   await page.goto(`${baseUrl}/demos/minimal/index.html`);
   await page.waitForFunction(() => window.jQuery && window.jQuery.fn.jquery === '4.0.0' && typeof window.jQuery.fn.turn === 'function');
 
@@ -78,10 +84,12 @@ test('minimal demo renders after turning to the next page', async ({ page }) =>
   await expect(page.locator('#status')).toHaveText('Page 2 / 6');
   await page.waitForTimeout(700);
 
-  await expect(page.locator('#book')).toHaveScreenshot('minimal-book-page-2.png');
+  if (isScreenshotProject(testInfo)) {
+    await expect(page.locator('#book')).toHaveScreenshot('minimal-book-page-2.png');
+  }
 });
 
-test('minimal demo keeps turn geometry aligned in a compact viewport', async ({ page }) => {
+test('minimal demo keeps turn geometry aligned in a compact viewport', async ({ page }, testInfo) => {
   await page.setViewportSize({ width: 600, height: 720 });
   await page.goto(`${baseUrl}/demos/minimal/index.html`);
   await page.waitForFunction(() => window.jQuery && window.jQuery.fn.jquery === '4.0.0' && typeof window.jQuery.fn.turn === 'function');
@@ -101,10 +109,12 @@ test('minimal demo keeps turn geometry aligned in a compact viewport', async ({
   expect(metrics.size).toEqual(metrics.book);
   expect(metrics.wrapper.height).toBe(metrics.book.height);
   expect(metrics.wrapper.width).toBe(metrics.book.width / 2);
-  await expect(page.locator('#book')).toHaveScreenshot('minimal-book-compact-page-1.png');
+  if (isScreenshotProject(testInfo)) {
+    await expect(page.locator('#book')).toHaveScreenshot('minimal-book-compact-page-1.png');
+  }
 });
 
-test('minimal demo keeps page measurements aligned during a page turn', async ({ page }) => {
+test('minimal demo keeps page measurements aligned during a page turn', async ({ page }, testInfo) => {
   await page.goto(`${baseUrl}/demos/minimal/index.html`);
   await page.waitForFunction(() => window.jQuery && window.jQuery.fn.jquery === '4.0.0' && typeof window.jQuery.fn.turn === 'function');
 
@@ -163,7 +173,37 @@ test('minimal demo keeps page measurements aligned during a page turn', async ({
     }
   }
 
-  await expect(page.locator('#book')).toHaveScreenshot('minimal-book-turning-page-4.png');
+  if (isScreenshotProject(testInfo)) {
+    await expect(page.locator('#book')).toHaveScreenshot('minimal-book-turning-page-4.png');
+  }
+});
+
+test('minimal demo supports page controls in a mobile viewport', async ({ page }, testInfo) => {
+  test.skip(testInfo.project.name !== 'chromium-mobile', 'Mobile viewport scenario runs in the mobile project.');
+
+  await page.goto(`${baseUrl}/demos/minimal/index.html`);
+  await page.waitForFunction(() => window.jQuery && window.jQuery.fn.jquery === '4.0.0' && typeof window.jQuery.fn.turn === 'function');
+
+  await expect(page.locator('#status')).toHaveText('Page 1 / 6');
+  await page.locator('#next').click();
+  await expect(page.locator('#status')).toHaveText('Page 2 / 6');
+  await page.waitForTimeout(700);
+  await page.locator('#previous').click();
+  await expect(page.locator('#status')).toHaveText('Page 1 / 6');
+
+  const metrics = await page.evaluate(() => {
+    const book = document.querySelector('#book').getBoundingClientRect();
+    const wrapper = document.querySelector('.turn-page-wrapper').getBoundingClientRect();
+
+    return {
+      book: { width: Math.round(book.width), height: Math.round(book.height) },
+      wrapper: { width: Math.round(wrapper.width), height: Math.round(wrapper.height) }
+    };
+  });
+
+  expect(metrics.book.width).toBeLessThanOrEqual(390);
+  expect(metrics.wrapper.height).toBe(metrics.book.height);
+  expect(metrics.wrapper.width).toBe(metrics.book.width / 2);
 });
 
 test('magazine demo loads with jQuery 4 and turns pages', async ({ page }) => {