diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-text/shaping | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-text/shaping')
69 files changed, 1784 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-000-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-000-ref.html new file mode 100644 index 0000000000..46312eb7be --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-000-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +</style> +<link rel=mismatch href="shaping-000-sanity-ref.html"> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> +<div class="ref" lang="ar" dir="rtl">ععع</div> +<div class="ref" lang="ar" dir="rtl">ععع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-000-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-000-sanity-ref.html new file mode 100644 index 0000000000..af43f98b0c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-000-sanity-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> +<div class="ref" lang="ar" dir="rtl">ع‌ع‌ع</div> +<div class="ref" lang="ar" dir="rtl">ع‌ع‌ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-001-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-001-ref.html new file mode 100644 index 0000000000..53a1093ace --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-001-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.text, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.color { color:blue; } +</style> +<link rel=mismatch href="shaping-001-sanity-ref.html"> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‍<span class="color">‍ع‍</span>‍ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="color">‍ع‍</span>‍ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-001-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-001-sanity-ref.html new file mode 100644 index 0000000000..802c65387c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-001-sanity-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.text, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.color { color:blue; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‌<span class="color">‌ع‌</span>‌ع</div> +<div class="ref" lang="ar" dir="rtl">ع‌<span class="color">‌ع‌</span>‌ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-002-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-002-ref.html new file mode 100644 index 0000000000..1871724c1d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-002-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.fontweight { font-weight: bold; } +</style> +<link rel=mismatch href="shaping-002-sanity-ref.html"> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‍<span class="fontweight">‍ع‍</span>‍ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="fontweight">‍ع‍</span>‍ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-002-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-002-sanity-ref.html new file mode 100644 index 0000000000..5cb1200182 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-002-sanity-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.fontweight { font-weight: bold; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‌<span class="fontweight">‌ع‌</span>‌ع</div> +<div class="ref" lang="ar" dir="rtl">ع‌<span class="fontweight">‌ع‌</span>‌ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-003-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-003-ref.html new file mode 100644 index 0000000000..734e510af0 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-003-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.fontstyle { font-style: italic; } +</style> +<link rel=mismatch href="shaping-003-sanity-ref.html"> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‍<span class="fontstyle">‍ع‍</span>‍ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="fontstyle">‍ع‍</span>‍ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-003-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-003-sanity-ref.html new file mode 100644 index 0000000000..6ca7f1c2df --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-003-sanity-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.fontstyle { font-style: italic; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‌<span class="fontstyle">‌ع‌</span>‌ع</div> +<div class="ref" lang="ar" dir="rtl">ع‌<span class="fontstyle">‌ع‌</span>‌ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-008-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-008-ref.html new file mode 100644 index 0000000000..42be6f8220 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-008-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.fontsizeplus { font-size:120%; } +</style> +<link rel=mismatch href="shaping-008-sanity-ref.html"> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‍<span class="fontsizeplus">‍ع‍</span>‍ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="fontsizeplus">‍ع‍</span>‍ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-008-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-008-sanity-ref.html new file mode 100644 index 0000000000..abad0b4f8e --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-008-sanity-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.fontsizeplus { font-size:120%; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‌<span class="fontsizeplus">‌ع‌</span>‌ع</div> +<div class="ref" lang="ar" dir="rtl">ع‌<span class="fontsizeplus">‌ع‌</span>‌ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-009-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-009-ref.html new file mode 100644 index 0000000000..6ff0985ab9 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-009-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.margin { margin: 0.5em; } +</style> +<link rel=mismatch href="shaping-009-sanity-ref.html"> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‌<span class="margin">‌ع‌</span>‌ع</div> +<div class="ref" lang="ar" dir="rtl">ع‌<span class="margin">‌ع‌</span>‌ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-009-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-009-sanity-ref.html new file mode 100644 index 0000000000..b5545097a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-009-sanity-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.margin { margin: 0.5em; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‍<span class="margin">‍ع‍</span>‍ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="margin">‍ع‍</span>‍ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-010-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-010-ref.html new file mode 100644 index 0000000000..18d3325625 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-010-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.padding { padding: 0.5em; } +</style> +<link rel=mismatch href="shaping-010-sanity-ref.html"> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‌<span class="padding">‌ع‌</span>‌ع</div> +<div class="ref" lang="ar" dir="rtl">ع‌<span class="padding">‌ع‌</span>‌ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-010-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-010-sanity-ref.html new file mode 100644 index 0000000000..b9d951c887 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-010-sanity-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.padding { padding: 0.5em; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‍<span class="padding">‍ع‍</span>‍ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="padding">‍ع‍</span>‍ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-011-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-011-ref.html new file mode 100644 index 0000000000..418b641e23 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-011-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.border { border: 1px solid #ccc; } +</style> +<link rel=mismatch href="shaping-011-sanity-ref.html"> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‌<span class="border">‌ع‌</span>‌ع</div> +<div class="ref" lang="ar" dir="rtl">ع‌<span class="border">‌ع‌</span>‌ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-011-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-011-sanity-ref.html new file mode 100644 index 0000000000..a57aadc301 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-011-sanity-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.border { border: 1px solid #ccc; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‍<span class="border">‍ع‍</span>‍ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="border">‍ع‍</span>‍ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-012-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-012-ref.html new file mode 100644 index 0000000000..8a2f7198a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-012-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +</style> +<link rel=mismatch href="shaping-012-sanity-ref.html"> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‌ع‌ع</div> +<div class="ref" lang="ar" dir="rtl">ع‌ع‌ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-012-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-012-sanity-ref.html new file mode 100644 index 0000000000..ce2a7ecbe5 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-012-sanity-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ععع</div> +<div class="ref" lang="ar" dir="rtl">ععع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-014-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-014-ref.html new file mode 100644 index 0000000000..6555baf1c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-014-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +.styled { text-decoration: underline; text-decoration-skip-ink: none; } +</style> +<link rel=mismatch href="shaping-014-sanity-ref.html"> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍ع‍</span>‍ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍ع‍</span>‍ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-014-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-014-sanity-ref.html new file mode 100644 index 0000000000..c47d28e223 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-014-sanity-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +.styled { text-decoration: underline; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‌<span class="styled">‌ع‌</span>‌ع</div> +<div class="ref" lang="ar" dir="rtl">ع‌<span class="styled">‌ع‌</span>‌ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-016-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-016-ref.html new file mode 100644 index 0000000000..af931cd3c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-016-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.styled { outline: 1px solid blue; } +</style> +<link rel=mismatch href="shaping-016-sanity-ref.html"> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍ع‍</span>‍ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍ع‍</span>‍ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-016-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-016-sanity-ref.html new file mode 100644 index 0000000000..15debe37b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-016-sanity-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.styled { outline: 1px solid blue; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="ref" lang="ar" dir="rtl">ع‌<span class="styled">‌ع‌</span>‌ع</div> +<div class="ref" lang="ar" dir="rtl">ع‌<span class="styled">‌ع‌</span>‌ع</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-020-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-020-ref.html new file mode 100644 index 0000000000..b5c4d4dcbc --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-020-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.styled { color:blue; } +</style> +<link rel="mismatch" href="shaping-020-sanity-ref.html"> +</head> +<body> +<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p> + +<div class="ref" lang="nqo" dir="rtl">ߞ‍<span class="styled">‍ߞ‍</span>‍ߞ</div> +<div class="ref" lang="nqo" dir="rtl">ߞ‍<span class="styled">‍ߞ‍</span>‍ߞ</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-020-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-020-sanity-ref.html new file mode 100644 index 0000000000..da3a1469be --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-020-sanity-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.styled { color:blue; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p> + +<div class="ref" lang="nqo" dir="rtl">ߞ‌<span class="styled">‌ߞ‌</span>‌ߞ</div> +<div class="ref" lang="nqo" dir="rtl">ߞ‌<span class="styled">‌ߞ‌</span>‌ߞ</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-021-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-021-ref.html new file mode 100644 index 0000000000..c4e63eff6f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-021-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.styled { font-style:italic; } +</style> +<link rel="mismatch" href="shaping-021-sanity-ref.html"> +</head> +<body> +<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p> +<div class="ref" lang="nqo" dir="rtl">ߞ‍<span class="styled">‍ߞ‍</span>‍ߞ</div> +<div class="ref" lang="nqo" dir="rtl">ߞ‍<span class="styled">‍ߞ‍</span>‍ߞ</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-021-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-021-sanity-ref.html new file mode 100644 index 0000000000..103e38e6c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-021-sanity-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.styled { font-style:italic; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p> +<div class="ref" lang="nqo" dir="rtl">ߞ‌<span class="styled">‌ߞ‌</span>‌ߞ</div> +<div class="ref" lang="nqo" dir="rtl">ߞ‌<span class="styled">‌ߞ‌</span>‌ߞ</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-022-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-022-ref.html new file mode 100644 index 0000000000..6db719d2c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-022-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.styled { text-decoration: underline; } +</style> +<link rel="mismatch" href="shaping-022-sanity-ref.html"> +</head> +<body> +<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p> +<div class="ref" lang="nqo" dir="rtl">ߞ‍<span class="styled">‍ߞ‍</span>‍ߞ</div> +<div class="ref" lang="nqo" dir="rtl">ߞ‍<span class="styled">‍ߞ‍</span>‍ߞ</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-022-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-022-sanity-ref.html new file mode 100644 index 0000000000..fe28ab3a57 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-022-sanity-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.styled { text-decoration: underline; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p> +<div class="ref" lang="nqo" dir="rtl">ߞ‌<span class="styled">‌ߞ‌</span>‌ߞ</div> +<div class="ref" lang="nqo" dir="rtl">ߞ‌<span class="styled">‌ߞ‌</span>‌ߞ</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-ref.html new file mode 100644 index 0000000000..35e6b75b4a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="mismatch" href="shaping-023-sanity-ref.html"> +<link rel="mismatch" href="shaping-023-sanity-2-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; } +/* the CSS above is not part of the test */ +.styled { color:blue; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p> +<div class="ref" lang="mn" dir="rtl">ᠨ‍<span class="styled">‍ᠨ‍</span>‍ᠨ</div> +<div class="ref" lang="mn" dir="rtl">ᠨ‍<span class="styled">‍ᠨ‍</span>‍ᠨ</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-sanity-2-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-sanity-2-ref.html new file mode 100644 index 0000000000..cbde30c641 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-sanity-2-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; text-orientation: upright;} +/* the CSS above is not part of the test */ +.styled { color:blue; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p> +<div class="ref" lang="mn" dir="rtl">ᠨ‌<span class="styled">‌ᠨ‌</span>‌ᠨ</div> +<div class="ref" lang="mn" dir="rtl">ᠨ‌<span class="styled">‌ᠨ‌</span>‌ᠨ</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-sanity-ref.html new file mode 100644 index 0000000000..966579be1c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-sanity-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; } +/* the CSS above is not part of the test */ +.styled { color:blue; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p> +<div class="ref" lang="mn" dir="rtl">ᠨ‌<span class="styled">‌ᠨ‌</span>‌ᠨ</div> +<div class="ref" lang="mn" dir="rtl">ᠨ‌<span class="styled">‌ᠨ‌</span>‌ᠨ</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-ref.html new file mode 100644 index 0000000000..7f6cbf97a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="mismatch" href="shaping-024-sanity-ref.html"> +<link rel="mismatch" href="shaping-024-sanity-2-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; } +/* the CSS above is not part of the test */ +.styled { font-style:italic; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p> +<div class="ref" lang="mn" dir="rtl">ᠨ‍<span class="styled">‍ᠨ‍</span>‍ᠨ</div> +<div class="ref" lang="mn" dir="rtl">ᠨ‍<span class="styled">‍ᠨ‍</span>‍ᠨ</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-sanity-2-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-sanity-2-ref.html new file mode 100644 index 0000000000..657478d9c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-sanity-2-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; text-orientation: upright;} +/* the CSS above is not part of the test */ +.styled { font-style:italic; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p> +<div class="ref" lang="mn" dir="rtl">ᠨ‌<span class="styled">‌ᠨ‌</span>‌ᠨ</div> +<div class="ref" lang="mn" dir="rtl">ᠨ‌<span class="styled">‌ᠨ‌</span>‌ᠨ</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-sanity-ref.html new file mode 100644 index 0000000000..fe89eecf68 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-sanity-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; } +/* the CSS above is not part of the test */ +.styled { font-style:italic; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p> +<div class="ref" lang="mn" dir="rtl">ᠨ‌<span class="styled">‌ᠨ‌</span>‌ᠨ</div> +<div class="ref" lang="mn" dir="rtl">ᠨ‌<span class="styled">‌ᠨ‌</span>‌ᠨ</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-ref.html new file mode 100644 index 0000000000..0418c263eb --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="mismatch" href="shaping-025-sanity-ref.html"> +<link rel="mismatch" href="shaping-025-sanity-2-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; } +/* the CSS above is not part of the test */ +.styled { text-decoration:underline; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p> +<div class="ref" lang="mn" dir="rtl">ᠨ‍<span class="styled">‍ᠨ‍</span>‍ᠨ</div> +<div class="ref" lang="mn" dir="rtl">ᠨ‍<span class="styled">‍ᠨ‍</span>‍ᠨ</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-sanity-2-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-sanity-2-ref.html new file mode 100644 index 0000000000..95e0ba2172 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-sanity-2-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; text-orientation: upright;} +/* the CSS above is not part of the test */ +.styled { text-decoration:underline; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p> +<div class="ref" lang="mn" dir="rtl">ᠨ‌<span class="styled">‌ᠨ‌</span>‌ᠨ</div> +<div class="ref" lang="mn" dir="rtl">ᠨ‌<span class="styled">‌ᠨ‌</span>‌ᠨ</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-sanity-ref.html new file mode 100644 index 0000000000..a75dd158d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-sanity-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>reference</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; } +/* the CSS above is not part of the test */ +.styled { text-decoration:underline; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p> +<div class="ref" lang="mn" dir="rtl">ᠨ‌<span class="styled">‌ᠨ‌</span>‌ᠨ</div> +<div class="ref" lang="mn" dir="rtl">ᠨ‌<span class="styled">‌ᠨ‌</span>‌ᠨ</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-arabic-diacritics-001-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-arabic-diacritics-001-ref.html new file mode 100644 index 0000000000..f1b3ee100d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-arabic-diacritics-001-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>shaping: Arabic diacritics on NBSP - reference</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<style type="text/css"> +@font-face { + font-family: ArabicTest; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); +} +.test { + font: 120px/2 ArabicTest, sans-serif; +} +</style> +</head> +<body> + <p class="instructions">Test passes if the two lines are rendered identically, + with the superscript alef (ا) directly above the raised hamza (ء).</p> + <!-- Order of lines is reversed from the testcase; if they render identically + they should still match perfectly. --> + <div class=test>a<span dir=rtl> ٰٔ</span>z</div> + <div class=test>a<span dir=rtl> ٰٔ</span>z</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-arabic-diacritics-002-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-arabic-diacritics-002-ref.html new file mode 100644 index 0000000000..d145e72ed8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-arabic-diacritics-002-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>shaping: Arabic diacritics on NBSP - reference</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<style type="text/css"> +@font-face { + font-family: ArabicTest; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); +} +.test { + font: 120px/2 ArabicTest, sans-serif; +} +.test span { + padding: .1em .05em 0; + background: black; +} +</style> +</head> +<body> + <p class="instructions">Test passes if the Arabic diacritics are entirely hidden by the black boxes.</p> + <!-- Diacritics removed from the test lines, as they should have been completely obscured + by the black background anyhow. --> + <div class=test>a<span dir=rtl> </span>z</div> + <div class=test>a<span dir=rtl> </span>z</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping_lig-000-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping_lig-000-ref.html new file mode 100644 index 0000000000..7b92b83625 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping_lig-000-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>ligatures: span</title> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters join.</p> +<div class="ref" lang="ar" dir="rtl">علا</div> +<div class="ref" lang="ar" dir="rtl">علا</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping_lig-001-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping_lig-001-ref.html new file mode 100644 index 0000000000..df71a1d019 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping_lig-001-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: test for Chromium bug 1304876</title> +<style type="text/css"> +@font-face { + font-family: GentiumPlus; + src: url('/fonts/GentiumPlus-R.woff') format('woff'); + font-weight: normal; + font-style: normal; +} +.test { + font-family: GentiumPlus; + font-size: 18pt; + width: 300px; + border: 1px solid black; + margin: 1em; +} +.line { + display: block; + white-space: nowrap; +} +/* the CSS above is not part of the test */ +</style> +</head> +<body> +<p class="instructions">Test passes if the word "office" is rendered without repeated letters.</p> +<div class="test"> + <div class="line">Sanitary measures in the</div> + <div class="line">office ought be adequately</div> + <div class="line"><b>maintained</b>.</div> +</div> +<div class="test"> + <div class="line">Sanitary measures in the</div> + <div class="line">office ought be adequately</div> + <div class="line"><b>maintained</b>.</div> +</div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-000.html b/testing/web-platform/tests/css/css-text/shaping/shaping-000.html new file mode 100644 index 0000000000..cd682ac733 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-000.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: span</title> +<meta name="assert" content="Shaping must not be broken across inline box boundaries with no styling change."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-000-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> +<div class="test" lang="ar" dir="rtl">ع<span>ع</span>ع</div> +<div class="ref" lang="ar" dir="rtl">ععع</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-001.html b/testing/web-platform/tests/css/css-text/shaping/shaping-001.html new file mode 100644 index 0000000000..2068aab769 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: colour</title> +<meta name="assert" content="Arabic shaping should not be broken across inline box boundaries for changes to colour."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-001-ref.html"> +<meta name="flags" content="should"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.color { color:blue; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<span class="color">ع</span>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="color">‍ع‍</span>‍ع</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-002.html b/testing/web-platform/tests/css/css-text/shaping/shaping-002.html new file mode 100644 index 0000000000..282e7d186d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: font-weight</title> +<meta name="assert" content="Arabic shaping should not be broken across inline box boundaries for changes in font weight."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-002-ref.html"> +<meta name="flags" content="should"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + font-weight: normal; + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.fontweight { font-weight: bold; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<span class="fontweight">ع</span>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="fontweight">‍ع‍</span>‍ع</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-003.html b/testing/web-platform/tests/css/css-text/shaping/shaping-003.html new file mode 100644 index 0000000000..58602316f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: font-style</title> +<meta name="assert" content="Arabic shaping should not be broken across inline box boundaries for changes in font style."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-003-ref.html"> +<meta name="flags" content="should"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + font-style: normal; + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.fontstyle { font-style: italic; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<span class="fontstyle">ع</span>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="fontstyle">‍ع‍</span>‍ع</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-004.html b/testing/web-platform/tests/css/css-text/shaping/shaping-004.html new file mode 100644 index 0000000000..4eaa25ad4d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-004.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: margin 0</title> +<meta name="assert" content="Shaping must not be broken across inline box boundaries when margin is set to 0."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-000-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.margin { margin:0; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<span class="margin">ع</span>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="margin">‍ع‍</span>‍ع</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-005.html b/testing/web-platform/tests/css/css-text/shaping/shaping-005.html new file mode 100644 index 0000000000..809ea2f41c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-005.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: padding 0</title> +<meta name="assert" content="Shaping must not be broken across inline box boundaries when padding is set to 0."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-000-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.padding { padding:0; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<span class="padding">ع</span>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="padding">‍ع‍</span>‍ع</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-006.html b/testing/web-platform/tests/css/css-text/shaping/shaping-006.html new file mode 100644 index 0000000000..21a13c0487 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-006.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: border 0</title> +<meta name="assert" content="Shaping must not be broken across inline box boundaries when border is set to 0."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-000-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.margin { margin:0; } +.padding { padding:0; } +.border { border:0; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<span class="border">ع</span>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="border">‍ع‍</span>‍ع</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-007.html b/testing/web-platform/tests/css/css-text/shaping/shaping-007.html new file mode 100644 index 0000000000..a4f3dc10ee --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-007.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: font size 100%</title> +<meta name="assert" content="Shaping must not be broken across inline box boundaries when font-size is set to 100%."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-000-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.fontsize { font-size:100%; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<span class="fontsize">ع</span>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="fontsize">‍ع‍</span>‍ع</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-008.html b/testing/web-platform/tests/css/css-text/shaping/shaping-008.html new file mode 100644 index 0000000000..509645b349 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-008.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: font size 120%</title> +<meta name="assert" content="Arabic shaping should not be broken across inline box boundaries for changes to font-size."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-008-ref.html"> +<meta name="flags" content="should"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.fontsizeplus { font-size:120%; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<span class="fontsizeplus">ع</span>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="fontsizeplus">‍ع‍</span>‍ع</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-009.html b/testing/web-platform/tests/css/css-text/shaping/shaping-009.html new file mode 100644 index 0000000000..4d1d1f7c97 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-009.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: margin > 0</title> +<meta name="assert" content="Shaping MUST be broken across inline box boundaries when marginis set to a non-zero value."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-009-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.margin { margin: 0.5em; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<span class="margin">ع</span>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‌<span class="margin">‌ع‌</span>‌ع</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-010.html b/testing/web-platform/tests/css/css-text/shaping/shaping-010.html new file mode 100644 index 0000000000..cd318542bb --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-010.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: padding > 0</title> +<meta name="assert" content="Shaping MUST be broken across inline box boundaries when padding is set to a non-zero value."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-010-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.padding { padding: 0.5em; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<span class="padding">ع</span>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‌<span class="padding">‌ع‌</span>‌ع</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-011.html b/testing/web-platform/tests/css/css-text/shaping/shaping-011.html new file mode 100644 index 0000000000..64b464e80b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-011.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: border > 0</title> +<meta name="assert" content="Shaping MUST be broken across inline box boundaries when border is set to a non-zero value."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-011-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.border { border: 1px solid #ccc; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<span class="border">ع</span>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‌<span class="border">‌ع‌</span>‌ع</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-012.html b/testing/web-platform/tests/css/css-text/shaping/shaping-012.html new file mode 100644 index 0000000000..6ae3a9ba2b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-012.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: isolation, bdi</title> +<meta name="assert" content="Shaping MUST be broken across inline box boundaries when isolation occurs."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-012-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<bdi>ع</bdi>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‌<bdi>‌ع‌</bdi>‌ع</div> +<!-- Notes: +This test only works if bdi is supported by the browser. +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-013.html b/testing/web-platform/tests/css/css-text/shaping/shaping-013.html new file mode 100644 index 0000000000..e9b3359e78 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-013.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: isolation, auto</title> +<meta name="assert" content="Shaping MUST be broken across inline box boundaries when isolation occurs."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-012-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<span dir="auto">ع</span>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‌ع‌ع</div> +<!-- Notes: +This test only works if dir=auto is supported by the browser. +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-014.html b/testing/web-platform/tests/css/css-text/shaping/shaping-014.html new file mode 100644 index 0000000000..b817f2c094 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-014.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: text-decoration</title> +<meta name="assert" content="Shaping must not be broken across inline box boundaries for changes in text-decoration."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-014-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.styled { text-decoration: underline; text-decoration-skip-ink: none; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<span class="styled">ع</span>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍ع‍</span>‍ع</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-016.html b/testing/web-platform/tests/css/css-text/shaping/shaping-016.html new file mode 100644 index 0000000000..b180056510 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-016.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: outline</title> +<meta name="assert" content="Shaping must not be broken across inline box boundaries for changes in outline."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-016-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.styled { outline: 1px solid blue; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<span class="styled">ع</span>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍ع‍</span>‍ع</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-017.html b/testing/web-platform/tests/css/css-text/shaping/shaping-017.html new file mode 100644 index 0000000000..e4dc68a126 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-017.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: em element</title> +<meta name="assert" content="Arabic shaping should not be broken across inline box boundaries for the em element."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-003-ref.html"> +<meta name="flags" content="should"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + font-style: normal; + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.styled { font-style: italic; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<em>ع</em>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍ع‍</span>‍ع</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +It also assumes that the default rendering for the em element is italic. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-018.html b/testing/web-platform/tests/css/css-text/shaping/shaping-018.html new file mode 100644 index 0000000000..fc44d6e640 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-018.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: b element</title> +<meta name="assert" content="Arabic shaping should not be broken across inline box boundaries for the b element."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-002-ref.html"> +<meta name="flags" content="should"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + font-weight: normal; + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.styled { font-weight: bold; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p> + +<div class="test" lang="ar" dir="rtl">ع<b>ع</b>ع</div> +<div class="ref" lang="ar" dir="rtl">ع‍<span class="styled">‍ع‍</span>‍ع</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +It also assumes that the default rendering for the b element is bold. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-020.html b/testing/web-platform/tests/css/css-text/shaping/shaping-020.html new file mode 100644 index 0000000000..a88b339e34 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-020.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>n'ko, colour</title> +<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to colour in N'Ko."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="help" href="http://www.unicode.org/versions/Unicode12.0.0/ch19.pdf"> +<link rel="match" href="reference/shaping-020-ref.html"> +<meta name="flags" content="should"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.styled { color:blue; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p> + +<div class="test" lang="nqo" dir="rtl">ߞ<span class="styled">ߞ</span>ߞ</div> +<div class="ref" lang="nqo" dir="rtl">ߞ‍<span class="styled">‍ߞ‍</span>‍ߞ</div> +<!-- Notes: +This test uses the Noto Sans N'Ko font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-021.html b/testing/web-platform/tests/css/css-text/shaping/shaping-021.html new file mode 100644 index 0000000000..b94a39e4db --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-021.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>n'ko, font-style</title> +<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to font-style in N'Ko."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-021-ref.html"> +<meta name="flags" content="should"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.styled { font-style:italic; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p> + +<div class="test" lang="nqo" dir="rtl">ߞ<span class="styled">ߞ</span>ߞ</div> +<div class="ref" lang="nqo" dir="rtl">ߞ‍<span class="styled">‍ߞ‍</span>‍ߞ</div> +<!-- Notes: +This test uses the Noto Sans N'Ko font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-022.html b/testing/web-platform/tests/css/css-text/shaping/shaping-022.html new file mode 100644 index 0000000000..131b23253f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-022.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>n'ko, text-decoration</title> +<meta name="assert" content="Shaping must not be broken across inline box boundaries for changes to text-decoration in N'Ko."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-022-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +.styled { text-decoration: underline; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p> +<div class="test" lang="nqo" dir="rtl">ߞ<span class="styled">ߞ</span>ߞ</div> +<div class="ref" lang="nqo" dir="rtl">ߞ‍<span class="styled">‍ߞ‍</span>‍ߞ</div> +<!-- Notes: +This test uses the Noto Sans N'Ko font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-023.html b/testing/web-platform/tests/css/css-text/shaping/shaping-023.html new file mode 100644 index 0000000000..67009d57a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-023.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>mongolian, colour</title> +<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to colour in Mongolian."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-023-ref.html"> +<meta name="flags" content="should"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; } +/* the CSS above is not part of the test */ +.styled { color:blue; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p> +<div class="test" lang="mn" dir="rtl">ᠨ<span class="styled">ᠨ</span>ᠨ</div> +<div class="ref" lang="mn" dir="rtl">ᠨ‍<span class="styled">‍ᠨ‍</span>‍ᠨ</div> +<!-- Notes: +This test uses the Noto Sans Mongolian font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-024.html b/testing/web-platform/tests/css/css-text/shaping/shaping-024.html new file mode 100644 index 0000000000..3ab2bbe951 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-024.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>mongolian, font-style</title> +<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to font-style in Mongolian."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-024-ref.html"> +<meta name="flags" content="should"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; } +/* the CSS above is not part of the test */ +.styled { font-style:italic; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p> +<div class="test" lang="mn" dir="rtl">ᠨ<span class="styled">ᠨ</span>ᠨ</div> +<div class="ref" lang="mn" dir="rtl">ᠨ‍<span class="styled">‍ᠨ‍</span>‍ᠨ</div> +<!-- Notes: +This test uses the Noto Sans Mongolian font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-025.html b/testing/web-platform/tests/css/css-text/shaping/shaping-025.html new file mode 100644 index 0000000000..c888784cd4 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-025.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>mongolian, text-decoration</title> +<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to text-decoration in Mongolian."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping-025-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; } +/* the CSS above is not part of the test */ +.styled { text-decoration:underline; } +</style> +</head> +<body> +<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p> +<div class="test" lang="mn" dir="rtl">ᠨ<span class="styled">ᠨ</span>ᠨ</div> +<div class="ref" lang="mn" dir="rtl">ᠨ‍<span class="styled">‍ᠨ‍</span>‍ᠨ</div> +<!-- Notes: +This test uses the Noto Sans Mongolian font to control variables related to font choice. +--> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-arabic-diacritics-001.html b/testing/web-platform/tests/css/css-text/shaping/shaping-arabic-diacritics-001.html new file mode 100644 index 0000000000..28f9a1e03d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-arabic-diacritics-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>shaping: Arabic diacritics on NBSP</title> +<meta name="assert" content="Shaping must work for diacritics rendered on NBSP as base"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="help" href="https://www.unicode.org/versions/Unicode13.0.0/ch02.pdf"> +<link rel="help" href="https://www.unicode.org/reports/tr53/"> +<link rel="match" href="reference/shaping-arabic-diacritics-001-ref.html"> +<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-2"> +<style type="text/css"> +@font-face { + font-family: ArabicTest; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); +} +.test { + font: 120px/2 ArabicTest, sans-serif; +} +</style> +</head> +<body> + <p class="instructions">Test passes if the two lines are rendered identically, + with the superscript alef (ا) directly above the raised hamza (ء).</p> + <!-- The Arabic characters here are ARABIC HAMZA ABOVE and ARABIC LETTER + SUPERSCRIPT ALEF, and according to UTR53 should always be sorted + as <hamza,alef> for rendering regardless of underlying order. --> + <div class=test>a<span dir=rtl> ٰٔ</span>z</div> + <div class=test>a<span dir=rtl> ٰٔ</span>z</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-arabic-diacritics-002.html b/testing/web-platform/tests/css/css-text/shaping/shaping-arabic-diacritics-002.html new file mode 100644 index 0000000000..ec252ef5ea --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping-arabic-diacritics-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>shaping: Arabic diacritics on NBSP</title> +<meta name="assert" content="Shaping must work for diacritics rendered on NBSP as base"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="help" href="https://www.unicode.org/versions/Unicode13.0.0/ch02.pdf"> +<link rel="help" href="https://www.unicode.org/reports/tr53/"> +<link rel="match" href="reference/shaping-arabic-diacritics-002-ref.html"> +<style type="text/css"> +@font-face { + font-family: ArabicTest; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); +} +.test { + font: 120px/2 ArabicTest, sans-serif; +} +.test span { + padding: .1em .05em 0; + background: black; +} +</style> +</head> +<body> + <p class="instructions">Test passes if the Arabic diacritics are entirely hidden by the black boxes.</p> + <!-- The Arabic characters here are ARABIC HAMZA ABOVE and ARABIC LETTER + SUPERSCRIPT ALEF, and (using the NotoNaskhArabic font) they should both + be entirely within the (padded) width of the NBSP, if they are properly + positioned (regardless of their order). --> + <div class=test>a<span dir=rtl> ٰٔ</span>z</div> + <div class=test>a<span dir=rtl> ٰٔ</span>z</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping_lig-000.html b/testing/web-platform/tests/css/css-text/shaping/shaping_lig-000.html new file mode 100644 index 0000000000..6b91835059 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping_lig-000.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>ligatures: span</title> +<meta name="assert" content="Markup inside a ligature with no styling will NOT break joining behaviour."> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping"> +<link rel="match" href="reference/shaping_lig-000-ref.html"> +<style type="text/css"> +@font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + } +.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; } +/* the CSS above is not part of the test */ +</style> +</head> +<body> +<p class="instructions">Test passes if the three Arabic characters join.</p> +<div class="test" lang="ar" dir="rtl">ع<span>ل</span>ا</div> +<div class="ref" lang="ar" dir="rtl">علا</div> +<!-- Notes: +This test uses the Noto Naskh Arabic font to control variables related to font choice. +--> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping_lig-001.html b/testing/web-platform/tests/css/css-text/shaping/shaping_lig-001.html new file mode 100644 index 0000000000..059b8df724 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/shaping/shaping_lig-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>shaping: test for Chromium bug 1304876</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1304876"> +<link rel="match" href="reference/shaping_lig-001-ref.html"> +<style type="text/css"> +@font-face { + font-family: GentiumPlus; + src: url('/fonts/GentiumPlus-R.woff') format('woff'); + font-weight: normal; + font-style: normal; +} +.test { + font-family: GentiumPlus; + font-size: 18pt; + width: 300px; + border: 1px solid black; + margin: 1em; +} +/* the CSS above is not part of the test */ +</style> +</head> +<body> +<p class="instructions">Test passes if the word "office" is rendered without repeated letters.</p> +<div class="test">Sanitary measures in the office ought be adequately <b>maintained</b>.</div> +<div class="test">Sanitary measures in the<br>office ought be adequately <b>maintained</b>.</div> +</body> +</html>
\ No newline at end of file |