diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index b7477d65..7ab56102 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -24,7 +24,7 @@ jobs:
- name: Use Node.js
uses: actions/setup-node@v4
with:
- node-version: '20.x'
+ node-version: '24.x'
cache: 'npm'
- run: npm ci
- run: npm run build --if-present
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
new file mode 100644
index 00000000..c2062eb9
--- /dev/null
+++ b/.github/workflows/playwright.yml
@@ -0,0 +1,27 @@
+name: Playwright Visual Regression
+
+on:
+ push:
+ branches: ["develop"]
+ pull_request:
+ branches: ["develop"]
+
+jobs:
+ test:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+ - name: Use Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: "24.x"
+ cache: npm
+ - run: npm ci
+ - run: npx playwright install --with-deps chromium
+ - run: npm test
+ - uses: actions/upload-artifact@v4
+ if: failure()
+ with:
+ name: playwright-report
+ path: tests/playwright-report/
+ retention-days: 14
diff --git a/.github/workflows/update-snapshots.yml b/.github/workflows/update-snapshots.yml
new file mode 100644
index 00000000..3b45f85a
--- /dev/null
+++ b/.github/workflows/update-snapshots.yml
@@ -0,0 +1,27 @@
+name: Update Playwright Snapshots
+
+on:
+ workflow_dispatch:
+
+jobs:
+ update:
+ runs-on: ubuntu-latest
+ permissions:
+ contents: write
+ steps:
+ - uses: actions/checkout@v4
+ with:
+ ref: ${{ github.ref }}
+ fetch-depth: 0
+ - name: Use Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: "24.x"
+ cache: npm
+ - run: npm ci
+ - run: npx playwright install --with-deps chromium
+ - run: npm run build && npx playwright test --update-snapshots
+ - uses: stefanzweifel/git-auto-commit-action@v5
+ with:
+ commit_message: "chore: update playwright snapshots"
+ file_pattern: "tests/snapshots/*.png"
diff --git a/.gitignore b/.gitignore
index 9419a30d..5fbf63ae 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,8 @@
node_modules/
*.css.map
-tests/backstop_data/
\ No newline at end of file
+tests/backstop_data/
+tests/snapshots/local/
+tests/test-results/
+tests/playwright-report/
+blob-report/
+playwright/.cache/
\ No newline at end of file
diff --git a/.nvmrc b/.nvmrc
index 85aee5a5..18c92ea9 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v20
\ No newline at end of file
+v24
\ No newline at end of file
diff --git a/README.md b/README.md
index 4befa4ba..9a330841 100644
--- a/README.md
+++ b/README.md
@@ -56,12 +56,11 @@ Building and testing are relying on npm packages and scripts. To initialize your
npm install
```
-In case you’re encountering an error with Puppeteer, make sure you’re using at least Node v.20.11.1 – it might work with an earlier version but only the latest LTS as of March 21, 2024 has been tested.
-
-Then create reference bitmaps for visual regression testing:
+Then install the Playwright browser binary and generate reference screenshots for visual regression testing:
```
-npm run test:ref
+npx playwright install chromium
+npm run test:update
```
### Build
@@ -78,10 +77,10 @@ To test the updated styles and catch visual regression bugs:
npm run test
```
-To update reference bitmaps after a bugfix:
+To update reference screenshots after an intentional change:
```
-npm run test:approve
+npm run test:update
```
## Docs
diff --git a/backstop.json b/backstop.json
deleted file mode 100644
index 526b1699..00000000
--- a/backstop.json
+++ /dev/null
@@ -1,294 +0,0 @@
-{
- "id": "ReadiumCSS",
- "viewports": [
- {
- "label": "tablet",
- "width": 1024,
- "height": 768
- }
- ],
- "scenarios": [
- {
- "label": "Paged",
- "url": "http://localhost:8000/tests/base.html",
- "delay": 0,
- "selectors": ["viewport"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Paged rtl",
- "url": "http://localhost:8000/tests/base-rtl.html",
- "delay": 0,
- "selectors": ["viewport"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Paged vertical",
- "url": "http://localhost:8000/tests/base-vertical.html",
- "delay": 0,
- "selectors": ["viewport"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "1 column pref",
- "url": "http://localhost:8000/tests/cols-1.html",
- "delay": 0,
- "selectors": ["viewport"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "2 columns pref",
- "url": "http://localhost:8000/tests/cols-2.html",
- "delay": 0,
- "selectors": ["viewport"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "3 columns pref",
- "url": "http://localhost:8000/tests/cols-3.html",
- "delay": 0,
- "selectors": ["viewport"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Line length pref",
- "url": "http://localhost:8000/tests/line-length.html",
- "delay": 0,
- "selectors": ["viewport"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Scroll pref",
- "url": "http://localhost:8000/tests/scroll.html",
- "delay": 0,
- "selectors": ["viewport"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Scroll vertical pref",
- "url": "http://localhost:8000/tests/scroll-vertical.html",
- "delay": 0,
- "selectors": ["viewport"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Scroll padding pref",
- "url": "http://localhost:8000/tests/scroll-padding.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Default colors pref",
- "url": "http://localhost:8000/tests/default-colors.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Default custom colors pref",
- "url": "http://localhost:8000/tests/default-custom-colors.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Theming (Reading System)",
- "url": "http://localhost:8000/tests/theming.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Font family pref",
- "url": "http://localhost:8000/tests/font-family.html",
- "delay": 500,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Font size pref",
- "url": "http://localhost:8000/tests/font-size.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Deprecated font size pref",
- "url": "http://localhost:8000/tests/font-size-deprecated.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Font size normalize pref",
- "url": "http://localhost:8000/tests/font-size-normalize.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Type scale pref",
- "url": "http://localhost:8000/tests/type-scale.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Text align pref",
- "url": "http://localhost:8000/tests/text-align.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Hyphens pref",
- "url": "http://localhost:8000/tests/hyphens.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Line height pref",
- "url": "http://localhost:8000/tests/line-height.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Para spacing pref",
- "url": "http://localhost:8000/tests/para-spacing.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Para spacing vertical pref",
- "url": "http://localhost:8000/tests/para-spacing-vertical.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Wordspacing pref",
- "url": "http://localhost:8000/tests/word-spacing.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Letterspacing pref",
- "url": "http://localhost:8000/tests/letter-spacing.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Letterspacing CJK pref",
- "url": "http://localhost:8000/tests/letter-spacing-cjk.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Ligatures pref",
- "url": "http://localhost:8000/tests/arabic-ligatures.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Accessibility font pref",
- "url": "http://localhost:8000/tests/a11y-font.html",
- "delay": 500,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Accessibility normalize pref",
- "url": "http://localhost:8000/tests/a11y-normalize.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Accessibility custom pref",
- "url": "http://localhost:8000/tests/a11y-custom.html",
- "delay": 500,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "no Ruby pref",
- "url": "http://localhost:8000/tests/no-ruby.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Font optical sizing pref",
- "url": "http://localhost:8000/tests/font-optical-sizing.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Font weight pref",
- "url": "http://localhost:8000/tests/font-weight.html",
- "delay": 500,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Font width Keyword pref",
- "url": "http://localhost:8000/tests/font-width-keyword.html",
- "delay": 500,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Font width Percentage pref",
- "url": "http://localhost:8000/tests/font-width-percentage.html",
- "delay": 500,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Blend Filter pref",
- "url": "http://localhost:8000/tests/blend-filter.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Darken Filter pref",
- "url": "http://localhost:8000/tests/darken-filter.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- },
- {
- "label": "Invert Filter pref",
- "url": "http://localhost:8000/tests/invert-filter.html",
- "delay": 0,
- "selectors": ["document"],
- "misMatchThreshold" : 0.1
- }
- ],
- "paths": {
- "bitmaps_reference": "tests/backstop_data/bitmaps_reference",
- "bitmaps_test": "tests/backstop_data/bitmaps_test",
- "engine_scripts": "tests/backstop_data/engine_scripts",
- "html_report": "tests/backstop_data/html_report",
- "ci_report": "tests/backstop_data/ci_report"
- },
- "report": ["browser"],
- "engine": "puppeteer",
- "engineOptions": {
- "args": ["--no-sandbox"]
- },
- "asyncCaptureLimit": 5,
- "asyncCompareLimit": 50,
- "debug": false,
- "debugWindow": false
-}
diff --git a/css/postcss.config.js b/css/postcss.config.js
index a7e48d88..994a8f8b 100644
--- a/css/postcss.config.js
+++ b/css/postcss.config.js
@@ -1,21 +1,30 @@
-const version = require("../package.json").version;
+import { execSync } from 'child_process';
+import pkg from '../package.json' with { type: 'json' };
+import postcssImport from 'postcss-import';
+import postcssCustomSelectors from 'postcss-custom-selectors';
+import postcssImportJson from '@daltontan/postcss-import-json';
+import postcssDiscardComments from 'postcss-discard-comments';
+import stylelint from 'stylelint';
+import postcssSorting from 'postcss-sorting';
+import postcssHeader from 'postcss-header';
+
+const { version } = pkg;
// Get contributors from git
function getContributors() {
try {
- const log = require("child_process")
- .execSync("git log --format='%aN <%aE>' | sort -u")
+ const log = execSync("git log --format='%aN <%aE>' | sort -u")
.toString()
.split("\n")
.filter(Boolean);
-
+
// Process contributors: filter bots and specific names, extract names, deduplicate, and sort
return [
...new Set(
log
.filter(contributor => {
const name = contributor.toLowerCase();
- return !name.includes("dependabot") &&
+ return !name.includes("dependabot") &&
!name.includes("[bot]") &&
!name.includes("bot@") &&
!name.includes("jaypanoz") &&
@@ -44,18 +53,18 @@ const header = `/*!
${contributorsSection}
*/\n`;
-module.exports = (ctx) => ({
+export default (ctx) => ({
map: false,
plugins: [
- require("postcss-import")({
+ postcssImport({
root: ctx.file.dirname
}),
- require("postcss-custom-selectors")({}),
- require("@daltontan/postcss-import-json")({
+ postcssCustomSelectors({}),
+ postcssImportJson({
prefix: "--RS__"
}),
- require("postcss-discard-comments")({}),
- require("stylelint")({
+ postcssDiscardComments({}),
+ stylelint({
"fix": true,
"config": {
"defaultSeverity": "warning",
@@ -70,18 +79,18 @@ module.exports = (ctx) => ({
, "severity": "error"
}]
, "custom-property-pattern": [ "(RS|USER)__.+", {
- "message": "It looks like you’re using a CSS variable prefix which is not supported. It should either start with “--RS__” or “--USER__”."
+ "message": "It looks like you're using a CSS variable prefix which is not supported. It should either start with '--RS__' or '--USER__'."
, "severity": "error"
}]
, "color-hex-length": [ "long", {
"message": "We recommend using long color HEX to prevent unexpected issues."
}]
, "font-family-name-quotes": [ "always-where-recommended", {
- "message": "If looks like there are spaces or digits in your “font-family”, please use quotes."
+ "message": "It looks like there are spaces or digits in your 'font-family', please use quotes."
}]
, "function-url-quotes": "always"
, "length-zero-no-unit": [ true, {
- "message": "The value of this property being 0, you don’t need an unit. Please remove it."
+ "message": "The value of this property being 0, you don't need a unit. Please remove it."
}]
, "selector-type-case": "lower"
, "function-name-case": "lower"
@@ -93,17 +102,17 @@ module.exports = (ctx) => ({
, "rule-empty-line-before": "always"
, "no-duplicate-at-import-rules": true
, "no-invalid-double-slash-comments": [ true, {
- "message": "It looks like you’re using single-line JS comments. This is CSS, you can’t use that."
+ "message": "It looks like you're using single-line JS comments. This is CSS, you can't use that."
, "severity": "error"
}]
, "max-nesting-depth": [ 0, {
- "message": "We’re using Vanilla CSS with PostCSS and our current configuration doesn’t allow nesting selectors as in LESS or SASS."
+ "message": "We're using Vanilla CSS with PostCSS and our current configuration doesn't allow nesting selectors as in LESS or SASS."
, "severity": "error"
}]
}
}
}),
- require("postcss-sorting")({
+ postcssSorting({
"properties-order": [
"object-fit"
, "position"
@@ -270,9 +279,9 @@ module.exports = (ctx) => ({
],
"unspecified-properties-position": "bottomAlphabetical"
}),
- require("postcss-header")({
+ postcssHeader({
header: header,
headerLength: 0
})
]
-})
\ No newline at end of file
+})
diff --git a/docs/CSS22-npm.md b/docs/CSS22-npm.md
index e0f9fa0c..732bedcd 100644
--- a/docs/CSS22-npm.md
+++ b/docs/CSS22-npm.md
@@ -21,10 +21,11 @@ This will install all dev dependencies needed and make npm scripts available to
Then, once the install is finished, type:
```
-npm run test:ref
+npx playwright install chromium
+npm run test:update
```
-This will create reference screenshots for the CSS regression tests.
+This will install the Playwright browser binary and create reference screenshots for the CSS regression tests.
## Build
@@ -84,17 +85,24 @@ Then you must customize the selectors in `ReadiumCSS-config.js` and replace them
Finally you will have to enable the `postcss-css-variables` and `postcss-alter-property-value` in the `postcss.config.js` file to be found at the `src` folder’s root.
-The following must be added to `plugins`:
+First, add the following imports at the top of the file:
```
-require("postcss-css-variables")({
- "preserve": true
+import postcssCssVariables from 'postcss-css-variables';
+import postcssAlterPropertyValue from 'postcss-alter-property-value';
+```
+
+Then add the following to `plugins`:
+
+```
+postcssCssVariables({
+ preserve: true
}),
-require("postcss-alter-property-value")({
+postcssAlterPropertyValue({
declarations: {
"*": {
- task: "remove"
- , whenValueEquals: "undefined"
+ task: "remove",
+ whenValueEquals: "undefined"
}
}
})
@@ -116,35 +124,18 @@ Here is a list of additionnal PostCSS plugins which might prove useful to implem
## Test
-Once you have build `dist` stylesheets, you can run regression tests using [Backstop.js](https://github.com/garris/BackstopJS).
+Once you have built `dist` stylesheets, you can run visual regression tests using [Playwright](https://playwright.dev).
It helps you check if you didn’t accidentally create a breaking change when customizing stylesheets, and make sure pagination and user settings work as expected.
### Config
-You will find the configuration file, `backstop.json` at the root of the project. By default, it runs those tests for a smartphone (portrait) and a tablet (landscape) viewports using Chrome, but you can customize it to fit your needs.
-
-For instance, if you don’t need to support mobile, you could modify `viewports`:
-
-```
-"viewports": [
- {
- "label": "desktop small",
- "width": 800,
- "height": 600
- },
- {
- "label": "desktop large",
- "width": 1600,
- "height": 900
- }
-]
-```
+The test configuration lives in `playwright.config.js` at the root of the project. By default, it runs all tests at a 1024×768 tablet viewport using Chromium. You can adjust the viewport or add browsers there.
-And if you want to run tests using Webkit instead of Blink because you’re developing iOS apps:
+If you want to run tests with WebKit (useful for iOS development), install the additional browser and update `browserName` in the config:
```
-"engine": "phantomjs"
+npx playwright install webkit
```
### Test files
@@ -153,11 +144,10 @@ If you customize flags in `ReadiumCSS-config.css`, you must modify HTML files in
### Available scripts
-By default, the following scripts are available:
+By default, the following scripts are available:
-- `test`, will run tests;
-- `test:ref`, will create reference screenshots;
-- `test:approve`, will update reference screenshots from the current test.
+- `test`, will build stylesheets then run visual regression tests;
+- `test:update`, will create or update reference screenshots.
### Usage
@@ -167,16 +157,12 @@ First navigate to the `readium-css` folder if you didn’t already, then…
npm run test
```
-The regression tests will run against the newly-created `dist` stylesheets, which is why you must build them beforehand.
-
-Once all scenarios are tested for the viewports you created, which can take up to a minute, a report will automatically open in your browser.
+The regression tests will run against the newly-built `dist` stylesheets and compare each page against its stored reference screenshot.
-If a unit test is marked as “failed”, it doesn’t necessarily mean the user setting failed, it just means you made a significant change which impacts rendering. Take a closer look at the diff, and if you’re happy with the result, head to the terminal and type:
+If a test is marked as failed, it doesn’t necessarily mean the user setting failed — it just means you made a change that impacts rendering. Open the Playwright HTML report to inspect the diff, and if you’re happy with the result, update the references:
```
-npm run test:approve
+npm run test:update
```
-This will make the current test screenshots the new reference for the next test.
-
-**Note:** on some occasions, an error might happen during tests and the process won’t stop. Try `ctrl + c` to stop the current process and run the test again.
\ No newline at end of file
+This will make the current screenshots the new reference for the next test run.
\ No newline at end of file
diff --git a/docs/ReadiumCSS_docs.epub b/docs/ReadiumCSS_docs.epub
index 405709fa..9248b8c6 100644
Binary files a/docs/ReadiumCSS_docs.epub and b/docs/ReadiumCSS_docs.epub differ
diff --git a/docs/ReadiumCSS_docs/OEBPS/Text/Section-022.xhtml b/docs/ReadiumCSS_docs/OEBPS/Text/Section-022.xhtml
index 29c6c354..6f89ce6e 100644
--- a/docs/ReadiumCSS_docs/OEBPS/Text/Section-022.xhtml
+++ b/docs/ReadiumCSS_docs/OEBPS/Text/Section-022.xhtml
@@ -30,9 +30,10 @@
Then, once the install is finished, type:
-
npm run test:ref
+
npx playwright install chromium
+npm run test:update
-
This will create reference screenshots for the CSS regression tests.
+
This will install the Playwright browser binary and create reference screenshots for the CSS regression tests.
@@ -118,20 +119,25 @@
Then you must customize the selectors in ReadiumCSS-config.js and replace them with either CSS classes or custom attributes so that flags can work as expected.
-
Finally you will have to enable the postcss-css-variables and postcss-alter-property-value in the postcss.config.js file to be found at the src folder’s root.
+
Finally you will have to enable the postcss-css-variables and postcss-alter-property-value in the postcss.config.js file to be found at the src folder's root.
-
The following must be added to plugins:
+
First, add the following imports at the top of the file:
Once you have build dist stylesheets, you can run regression tests using Backstop.js.
+
Once you have built dist stylesheets, you can run visual regression tests using Playwright.
It helps you check if you didn’t accidentally create a breaking change when customizing stylesheets, and make sure pagination and user settings work as expected.
Config
-
You will find the configuration file, backstop.json at the root of the project. By default, it runs those tests for a smartphone (portrait) and a tablet (landscape) viewports using Chrome, but you can customize it to fit your needs.
-
-
For instance, if you don’t need to support mobile, you could modify viewports:
The test configuration lives in playwright.config.js at the root of the project. By default, it runs all tests at a 1024×768 tablet viewport using Chromium. You can adjust the viewport or add browsers there.
-
And if you want to run tests using Webkit instead of Blink because you’re developing iOS apps:
+
If you want to run tests with WebKit (useful for iOS development), install the additional browser and update browserName in the config:
The regression tests will run against the newly-created dist stylesheets, which is why you must build them beforehand.
-
-
Once all scenarios are tested for the viewports you created, which can take up to a minute, a report will automatically open in your browser.
-
-
If a unit test is marked as “failed”, it doesn’t necessarily mean the user setting failed, it just means you made a significant change which impacts rendering. Take a closer look at the diff, and if you’re happy with the result, head to the terminal and type:
+
The regression tests will run against the newly-built dist stylesheets and compare each page against its stored reference screenshot.
-
npm run test:approve
+
If a test is marked as failed, it doesn’t necessarily mean the user setting failed — it just means you made a change that impacts rendering. Open the Playwright HTML report to inspect the diff, and if you’re happy with the result, update the references:
-
This will make the current test screenshots the new reference for the next test.
+
npm run test:update
-
Note: on some occasions, an error might happen during tests and the process won’t stop. Try ctrl + c to stop the current process and run the test again.
+
This will make the current screenshots the new reference for the next test run.
Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball.[1] With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.
-
-
There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.
-
-
Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see?—Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving to get a still better seaward peep. But these are all landsmen; of week days pent up in lath and plaster—tied to counters, nailed to benches, clinched to desks. How then is this? Are the green fields gone? What do they here?
-
-
\ No newline at end of file
diff --git a/tests/arabic-ligatures.html b/tests/arabic-ligatures.html
deleted file mode 100644
index eb15635e..00000000
--- a/tests/arabic-ligatures.html
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
- Test
-
-
-
-
-
-
-
-
لغة عربية - ويكيبيديا، الموسوعة الحرة
-
-
اللُّغَة العَرَبِيّة هي أكثر اللغات تحدثاً ونطقاً ضمن مجموعة اللغات السامية، وإحدى أكثر اللغات انتشاراً في العالم، يتحدثها أكثر من مليون نسمة، ويتوزع متحدثوها في الوطن العربي، بالإضافة إلى العديد من المناطق الأخرى المجاورة كالأحواز وتركيا وتشاد ومالي والسنغال وإرتيريا و إثيوبيا و جنوب السودان و إيران. اللغة العربية ذات أهمية قصوى لدى المسلمين، فهي لغة مقدسة (لغة القرآن)، ولا تتم الصلاة (وعبادات أخرى) في الإسلام إلا بإتقان بعض من كلماتها. العربية هي أيضاً لغة شعائرية رئيسية لدى عدد من الكنائس المسيحية في الوطن العربي، كما كتبت بها كثير من أهم الأعمال الدينية والفكرية اليهودية في العصور الوسطى. وأثّر انتشار الإسلام، وتأسيسه دولاً، في ارتفاع مكانة اللغة العربية، وأصبحت لغة السياسة والعلم والأدب لقرون طويلة في الأراضي التي حكمها المسلمون، وأثرت العربية تأثيراً مباشراً أو غير مباشر على كثير من اللغات الأخرى في العالم الإسلامي، كالتركية والفارسية والأمازيغية والكردية والأردوية والماليزية والإندونيسية والألبانية وبعض اللغات الإفريقية الأخرى مثل الهاوسا والسواحيلية والتجرية والأمهرية و الصومالية، وبعض اللغات الأوروبية وخاصةً المتوسطية كالإسبانية والبرتغالية والمالطية والصقلية. كما أنها تُدرَّس بشكل رسمي أو غير رسمي في الدول الإسلامية والدول الإفريقية المحاذية للوطن العربي.
-
-
العربية لغة رسمية في كل دول الوطن العربي إضافة إلى كونها لغة رسمية في تشاد وإريتريا وإسرائيل. وهي إحدى اللغات الرسمية الست في منظمة الأمم المتحدة، ويُحتفل باليوم العالمي للغة العربية في ديسمبر كذكرى اعتماد العربية بين لغات العمل في الأمم المتحدة.
-
-
واللغة العربية من أغزر اللغات من حيث المادة اللغوية، فعلى سبيل المثال يحوي معجم لسان العرب لابن منظور من القرن الثالث عشر أكثر من ألف مادة، بينما في اللغة الإنجليزية فإن قاموس صموئيل جونسون - وهو من أوائل من وضع قاموساً إنجليزياً من القرن الثامن عشر يحتوي على ألف كلمة.
-
تحتوي العربية على حرفاً مكتوباً. ويرى بعض اللغويين أنه يجب إضافة حرف الهمزة إلى حروف العربية، ليصبح عدد الحروف تُكتب العربية من اليمين إلى اليسار - ومثلها اللغة الفارسية والعبرية على عكس كثير من اللغات العالمية - ومن أعلى الصفحة إلى أسفلها.
-
-
الأسماء
-
-
حيث ذهب به إلى أنها للعرب خاصة. غير أن الضاد المقصودة هنا ليست الضاد المعروفة والمستخدمة اليوم في دول مثل جمهورية مصر العربية، والتي هي عبارة عن دال مفخمة، وهي التي لاتُستحسن قراءة القرآن أو الشعر العربي بها، أما الضاد العربية القديمة فهي صوتٌ آخر مزيجٌ بين الظاء واللام، واندمج هذا الصوت مع الظاء في الجزيرة العربية. ولأن الظاء هي ذال مفخمة، أي أنها حرف ما - بين - أسناني، فقد تحولت بدورها في الحواضر إلى دال مفخمة كتحول الثاء إلى تاء والذال إلى دال، وصارت هذه الدال المفخمة هي الضاد الحديثة. فالدال المفخمة ليست خاصة بالعربية، بل هي في الواقع موجودة في لغات كثيرة. وهي ليست الضاد الأصلية التي كان يعنيها المتنبي وابن منظور صاحب لسان العرب وغيرهم.
-
-
تصنيفها
-
-
تنتمي اللغة العربية إلى أسرة اللغات السامية المتفرعة من مجموعة اللغات الإفريقية الآسيوية. وتضم مجموعة اللغات السامية لغات حضارة الهلال الخصيب القديمة، مثل الأكادية والكنعانية والآرامية واللغة الصيهدية (جنوب الجزيرة العربية) واللغات العربية الشمالية القديمة وبعض لغات القرن الإفريقي كالأمهرية. وعلى وجه التحديد، يضع اللغويون اللغة العربية في المجموعة السامية الوسطى من اللغات السامية الغربية.
-
-
والعربية من أحدث هذه اللغات نشأة وتاريخاً، ولكن يعتقد البعض أنها الأقرب إلى اللغة السامية الأم التي انبثقت منها اللغات السامية الأخرى، وذلك لاحتباس العرب في جزيرة العرب فلم تتعرض لما تعرضت له باقي اللغات السامية من اختلاط. ولكن هناك من يخالف هذا الرأي بين علماء اللسانيات، حيث أن تغير اللغة هو عملية مستمرة عبر الزمن والانعزال الجغرافي قد يزيد من حدة هذا التغير حيث يبدأ نشوء أيّة لغة جديدة بنشوء لهجة جديدة في منطقة منعزلة جغرافياً. بالإضافة لافتراض وجود لغة سامية أم لا يعني وجودها بالمعنى المفهوم للغة الواحدة بل هي تعبير مجازي قصد به الإفصاح عن تقارب مجموعة من اللغات فقد كان علماء اللسانيات يعتمدون على قرب لغة وعقلية من يرونه مرشحاً لعضوية عائلة اللغات السامية وبُنيت دراساتهم على أسس جغرافية وسياسية وليس على أُسس عرقية ولا علاقة لها بنظرة التوراة لأبناء سام وكثرة قواعد اللغة العربية ترجح أنها طرأت عليها في فترات لاحقة وأنها مرت بأطوار عديدة مما يضعف فرضية أن هذه اللغة أقرب لما عُرف اصطلاحاً باللغة السامية الأم هذه، ولا توجد لغة في العالم تستطيع الادعاء أنها نقية وصافية من عوامل ومؤثرات خارجية
-
-
\ No newline at end of file
diff --git a/tests/base-rtl.html b/tests/base-rtl.html
index 3b0532ba..7330ae00 100644
--- a/tests/base-rtl.html
+++ b/tests/base-rtl.html
@@ -1,5 +1,5 @@
-
+
Test
diff --git a/tests/ligatures.html b/tests/ligatures.html
new file mode 100644
index 00000000..2cf54b88
--- /dev/null
+++ b/tests/ligatures.html
@@ -0,0 +1,34 @@
+
+
+
+ Test
+
+
+
+
+
+
+
+
CHAPTER 1. Loomings.
+
+
Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular
+ to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have
+ of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever
+ it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and
+ bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it
+ requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking
+ people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball.
+ With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising
+ in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings
+ towards the ocean with me.
+
+
Offerings finally flashing efficiently offtrack
+
+
But look! here come more crowds, pacing straight for the water, and seemingly bound for a dive. Strange! Nothing will content
+ them but the extremest limit of the land; loitering under the shady lee of yonder warehouses will not suffice. No. They
+ must get just as nigh the water as they possibly can without falling in. And there they stand—miles of them—leagues.
+ Inlanders all, they come from lanes and alleys, streets and avenues—north, east, south, and west. Yet here they all unite.
+ Tell me, does the magnetic virtue of the needles of the compasses of all those ships attract them thither?
+