ep_font_size 0.4.103 → 0.4.105

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "Apply sizes to fonts",
   "name": "ep_font_size",
-  "version": "0.4.103",
+  "version": "0.4.105",
   "license": "Apache-2.0",
   "author": {
     "name": "John McLear",

package/static/tests/frontend-new/specs/font_size.spec.ts

@@ -0,0 +1,79 @@
+import {expect, test} from '@playwright/test';
+import {clearPadContent, getPadBody, goToNewPad, selectAllText, writeToPad}
+    from 'ep_etherpad-lite/tests/frontend-new/helper/padHelper';
+
+test.beforeEach(async ({page}) => {
+  await goToNewPad(page);
+});
+
+test.describe('ep_font_size', () => {
+  // The #font-size <select> is wrapped by niceSelect, which intercepts
+  // native change events. Mirror the legacy spec by setting .value on
+  // the underlying <select> and dispatching change manually.
+  const setFontSizeIndex = (page: any, index: string) => page.evaluate((i: string) => {
+    const sel = document.querySelector<HTMLSelectElement>('#font-size')!;
+    sel.value = i;
+    sel.dispatchEvent(new Event('change', {bubbles: true}));
+  }, index);
+
+  test('Changes from size 8 to 9 and back to 8', async ({page}) => {
+    const padBody = await getPadBody(page);
+    await padBody.click();
+    await clearPadContent(page);
+    await writeToPad(page, 'foo');
+    await selectAllText(page);
+
+    // Index 1 → font-size:9
+    await setFontSizeIndex(page, '1');
+    await expect(
+      padBody.locator('div').first().locator('span').first()
+    ).toHaveClass(/font-size:9/);
+
+    await selectAllText(page);
+
+    // Index 0 → font-size:8
+    await setFontSizeIndex(page, '0');
+    await expect(
+      padBody.locator('div').first().locator('span').first()
+    ).toHaveClass(/font-size:8/);
+  });
+
+  // Regression test for ep_font_size#4914: applying very large font to
+  // ~120 lines should grow ace_inner past 2000px (the legacy bug pinned
+  // the iframe to a smaller height regardless of content).
+  test('iframe height grows under very large font (regression #4914)', async ({page}) => {
+    const padBody = await getPadBody(page);
+    await padBody.click();
+    await clearPadContent(page);
+
+    // Build content quickly via the inner DOM rather than typing 120 lines.
+    const numLines = 120;
+    const innerFrame = page.frame('ace_inner')!;
+    await innerFrame.evaluate((n: number) => {
+      const body = document.getElementById('innerdocbody')!;
+      body.innerHTML = '';
+      for (let i = 0; i < n - 1; i++) body.appendChild(document.createElement('div'));
+      const last = document.createElement('div');
+      last.textContent = 'Very large text that ideally spans across multiple lines';
+      body.appendChild(last);
+    }, numLines);
+
+    await page.waitForTimeout(800);
+    await selectAllText(page);
+
+    // Index 22 → font-size:60 (largest published option in the legacy spec).
+    await setFontSizeIndex(page, '22');
+
+    // The ace_inner iframe lives inside the ace_outer iframe, so a top-level
+    // page.evaluate() can't see it (document.querySelector returns null and
+    // getComputedStyle then throws "parameter 1 is not of type 'Element'").
+    // Run the lookup in the ace_outer frame's document instead.
+    const outerFrame = page.frame('ace_outer')!;
+    const heightOf = () => outerFrame.evaluate(() => {
+      const f = document.querySelector<HTMLIFrameElement>('iframe[name="ace_inner"]');
+      if (!f) return 0;
+      return parseInt(window.getComputedStyle(f).height || '0', 10);
+    });
+    await expect.poll(heightOf, {timeout: 10_000}).toBeGreaterThan(2000);
+  });
+});

package/static/tests/frontend/specs/l10n.js

@@ -1,48 +0,0 @@
-'use strict';
-
-describe('ep_font_size - Select font-size dropdown localization', function () {
-  const changeEtherpadLanguageTo = async (lang) => {
-    const boldTitles = {
-      en: 'Bold (Ctrl+B)',
-      fr: 'Gras (Ctrl + B)',
-    };
-    const chrome$ = helper.padChrome$;
-
-    // click on the settings button to make settings visible
-    const $settingsButton = chrome$('.buttonicon-settings');
-    $settingsButton.click();
-
-    // select the language
-    const $language = chrome$('#languagemenu');
-    $language.val(lang);
-    $language.change();
-
-    // hide settings again
-    $settingsButton.click();
-
-    await helper.waitForPromise(
-        () => chrome$('.buttonicon-bold').parent()[0].title === boldTitles[lang]);
-  };
-
-  // create a new pad with comment before each test run
-  beforeEach(async function () {
-    this.timeout(60000);
-    await helper.aNewPad();
-    await changeEtherpadLanguageTo('fr');
-  });
-
-  // ensure we go back to English to avoid breaking other tests:
-  after(async function () {
-    await changeEtherpadLanguageTo('en');
-  });
-
-  it('Localizes dropdown when Etherpad language is changed', async function () {
-    const optionTranslations = {
-      'ep_font_size.size': 'Taille de police',
-    };
-    const chrome$ = helper.padChrome$;
-    const $option = chrome$('#editbar').find('#font-size').find('option').first();
-
-    expect($option.text()).to.be(optionTranslations[$option.attr('data-l10n-id')]);
-  });
-});

package/static/tests/frontend/specs/test.js

@@ -1,74 +0,0 @@
-'use strict';
-
-describe('ep_font_size - Set Font size and ensure its removed properly', function () {
-  // Tests still to do
-  // Ensure additional chars keep the same formatting
-  // Ensure heading value is properly set when caret is placed on font size changed content
-
-  // create a new pad before each test run
-  beforeEach(async function () {
-    this.timeout(60000);
-    await helper.aNewPad();
-  });
-
-  // Create Pad
-  // Select all text
-  // Set it to size 9
-  // Select all text
-  // Set it to size 8
-
-  it('Changes from size 8 to 9 and back to 8', async function () {
-    this.timeout(60000);
-    const chrome$ = helper.padChrome$;
-    const inner$ = helper.padInner$;
-
-    let $firstTextElement = inner$('div').first();
-
-    $firstTextElement.sendkeys('foo');
-    $firstTextElement.sendkeys('{selectall}');
-
-    // sets first line to Font size 9
-    chrome$('#font-size').val('1');
-    chrome$('#font-size').change();
-
-    let fElement = inner$('div').first();
-    await helper.waitForPromise(() => {
-      const elementHasClass = fElement.children().first().hasClass('font-size:9');
-      return expect(elementHasClass).to.be(true);
-    });
-    $firstTextElement = inner$('div').first();
-    $firstTextElement.sendkeys('{selectall}');
-    // sets first line to Font size 8
-    chrome$('#font-size').val('0');
-    chrome$('#font-size').change();
-    await helper.waitForPromise(() => {
-      fElement = inner$('div').first();
-      const elementHasClass = fElement.children().first().hasClass('font-size:8');
-      return expect(elementHasClass).to.be(true);
-    });
-  });
-
-  it('iframe height is correct using very large font, regression for #4914', async function () {
-    await helper.clearPad();
-    const height = () => parseInt(window.getComputedStyle(
-        helper.padOuter$("iframe[name='ace_inner']").get(0)).height);
-    expect(height()).to.not.be.above(2000);
-
-    const numLines = 120;
-    await helper.edit('\n'.repeat(numLines - 1));
-    await helper.edit('Very large text that ideally spans across multiple lines');
-    await helper.edit('Another very large text that should span across multiple lines', 80);
-
-    const lines = helper.linesDiv();
-    expect(lines.length).to.be(numLines);
-    helper.selectLines(lines[0], lines[lines.length - 1]);
-    await helper.waitForPromise(() => !helper.padInner$.document.getSelection().isCollapsed);
-
-    // font size 60
-    helper.padChrome$('#font-size').val('22');
-    helper.padChrome$('#font-size').change();
-
-    // ace_inner should be above 2000px now
-    await helper.waitForPromise(() => height() > 2000);
-  });
-});