Update web-platform-tests to revision 7a7e16ad8d1a1b843340f47101c0a5c24c9bba57

This commit is contained in:
WPT Sync Bot 2019-04-23 21:37:32 -04:00
parent 155fad62b3
commit d4dc41672a
207 changed files with 3287 additions and 1703 deletions

View file

@ -2,24 +2,20 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: span</title>
<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 */
</style>
<link rel=mismatch href="shaping-000-sanity-ref.html">
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span>&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span>&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
<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>
</html>

View file

@ -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">ع&zwnj;ع&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;ع&zwnj;ع</div>
</body>
</html>

View file

@ -2,27 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: colour</title>
<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"; }
.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 join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<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">ع&zwj;<span class="color">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="color">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>
</html>

View file

@ -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">ع&zwnj;<span class="color">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="color">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
</body>
</html>

View file

@ -2,27 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: font-weight</title>
<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 */
.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 join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<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">ع&zwj;<span class="fontweight">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontweight">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>
</html>

View file

@ -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">ع&zwnj;<span class="fontweight">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="fontweight">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
</body>
</html>

View file

@ -2,27 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: font-style</title>
<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 */
.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 join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<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">ع&zwj;<span class="fontstyle">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontstyle">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>
</html>

View file

@ -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">ع&zwnj;<span class="fontstyle">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="fontstyle">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
</body>
</html>

View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: font size 100%</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 */
.fontsize { font-size:100%; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontsize">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontsize">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

View file

@ -2,27 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: font size 120%</title>
<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>
<link rel=mismatch href="shaping-008-sanity-ref.html">
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<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">ع&zwj;<span class="fontsizeplus">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontsizeplus">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>
</html>

View file

@ -2,7 +2,7 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>marked up diacritic: span</title>
<title>reference</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
@ -12,14 +12,13 @@
}
.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 Arabic base characters in each word join.</p>
<div class="ref" lang="ar" dir="rtl">ع&#x064E;ع ع&#x0651;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&#x064E;ع ع&#x0651;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
<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">ع&zwnj;<span class="fontsizeplus">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="fontsizeplus">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
</body>
</html>
</html>

View file

@ -2,26 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: margin &gt; 0</title>
<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 */
.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 DON'T join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<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">ع&zwnj;<span class="margin">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="margin">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>
</html>

View file

@ -2,27 +2,21 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: margin 0</title>
<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 */
.margin { margin:0; }
.margin { margin: 0.5em; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<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">ع&zwj;<span class="margin">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="margin">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>
</html>

View file

@ -2,26 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: padding &gt; 0</title>
<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 */
.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 DON'T join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<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">ع&zwnj;<span class="padding">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="padding">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>
</html>

View file

@ -2,27 +2,21 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: padding 0</title>
<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 */
.padding { padding:0; }
.padding { padding: 0.5em; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<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">ع&zwj;<span class="padding">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="padding">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>
</html>

View file

@ -2,26 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: border &gt; 0</title>
<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 */
.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 DON'T join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<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">ع&zwnj;<span class="border">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="border">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>
</html>

View file

@ -2,29 +2,21 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: border 0</title>
<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 */
.margin { margin:0; }
.padding { padding:0; }
.border { border:0; }
.border { border: 1px solid #ccc; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<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">ع&zwj;<span class="border">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="border">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>
</html>

View file

@ -2,27 +2,21 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: isolation, bdi</title>
<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 */
</style>
<link rel=mismatch href="shaping-012-sanity-ref.html">
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters DON'T join.</p>
<p><small>Skip if markup alone breaks the join (test shaping-000)</small><br/>
<small>Skip this test if bdi and dir=auto don't produce isolation in this browser.</small></p>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<bdi>&zwnj;ع&zwnj;</bdi>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<bdi>&zwnj;ع&zwnj;</bdi>&zwnj;ع</div>
<!-- Notes:
This test only works if bdi and dir=auto are supported by the browser.
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
<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">ع&zwnj;ع&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;ع&zwnj;ع</div>
</body>
</html>
</html>

View file

@ -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>

View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: isolation, auto</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 DON'T join.</p>
<p><small>Skip if markup alone breaks the join (test shaping-000)</small><br/>
<small>Skip this test if bdi and dir=auto don't produce isolation in this browser.</small></p>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<bdi>&zwnj;ع&zwnj;</bdi>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<bdi>&zwnj;ع&zwnj;</bdi>&zwnj;ع</div>
<!-- Notes:
This test only works if bdi and dir=auto are supported by the browser.
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

View file

@ -2,25 +2,21 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: text-decoration</title>
<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"; }
.styled { text-decoration: underline; }
</style>
<link rel=mismatch href="shaping-014-sanity-ref.html">
</head>
<body>
<p class="instructions">Test passes if both boxes look the same.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<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">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>
</html>

View file

@ -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">ع&zwnj;<span class="styled">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
</body>
</html>

View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: text-decoration</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 */
.styled { text-decoration: underline; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

View file

@ -2,26 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: outline</title>
<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 */
.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 join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<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">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>
</html>

View file

@ -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">ع&zwnj;<span class="styled">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
</body>
</html>

View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: em element</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 */
.styled { font-style: italic; }
</style>
</head>
<body>
<p class="instructions">Test passes if both boxes look the same.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<em>&zwj;ع&zwj;</em>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</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>

View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: b element</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 */
.styled { font-weight: bold; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<b>&zwj;ع&zwj;</b>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</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>

View file

@ -2,25 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>n'ko, colour</title>
<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 { 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 join.</p>
<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">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
<!-- Notes:
This test uses the Noto Sans N'Ko font to control variables related to font choice.
-->
</body>
</html>
</html>

View file

@ -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">ߞ&zwnj;<span class="styled">&zwnj;ߞ&zwnj;</span>&zwnj;ߞ</div>
<div class="ref" lang="nqo" dir="rtl">ߞ&zwnj;<span class="styled">&zwnj;ߞ&zwnj;</span>&zwnj;ߞ</div>
</body>
</html>

View file

@ -2,25 +2,21 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>n'ko, font-style</title>
<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 { 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 join.</p>
<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">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
<!-- Notes:
This test uses the Noto Sans N'Ko font to control variables related to font choice.
-->
</body>
</html>
</html>

View file

@ -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">ߞ&zwnj;<span class="styled">&zwnj;ߞ&zwnj;</span>&zwnj;ߞ</div>
<div class="ref" lang="nqo" dir="rtl">ߞ&zwnj;<span class="styled">&zwnj;ߞ&zwnj;</span>&zwnj;ߞ</div>
</body>
</html>

View file

@ -2,7 +2,7 @@
<html lang="en" >
<head>
<meta charset="utf-8">
<title>n'ko, text-decoration</title>
<title>reference</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
@ -14,13 +14,11 @@
/* 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 join.</p>
<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">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
<!-- Notes:
This test uses the Noto Sans N'Ko font to control variables related to font choice.
-->
</body>
</html>
</html>

View file

@ -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">ߞ&zwnj;<span class="styled">&zwnj;ߞ&zwnj;</span>&zwnj;ߞ</div>
<div class="ref" lang="nqo" dir="rtl">ߞ&zwnj;<span class="styled">&zwnj;ߞ&zwnj;</span>&zwnj;ߞ</div>
</body>
</html>

View file

@ -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">&zwj;<span class="styled">&zwj;&zwj;</span>&zwj;</div>
<div class="ref" lang="mn" dir="rtl">&zwj;<span class="styled">&zwj;&zwj;</span>&zwj;</div>
</body>
</html>

View file

@ -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">&zwnj;<span class="styled">&zwnj;&zwnj;</span>&zwnj;</div>
<div class="ref" lang="mn" dir="rtl">&zwnj;<span class="styled">&zwnj;&zwnj;</span>&zwnj;</div>
</body>
</html>

View file

@ -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">&zwnj;<span class="styled">&zwnj;&zwnj;</span>&zwnj;</div>
<div class="ref" lang="mn" dir="rtl">&zwnj;<span class="styled">&zwnj;&zwnj;</span>&zwnj;</div>
</body>
</html>

View file

@ -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; 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">&zwj;<span class="styled">&zwj;&zwj;</span>&zwj;</div>
<div class="ref" lang="mn" dir="rtl">&zwj;<span class="styled">&zwj;&zwj;</span>&zwj;</div>
</body>
</html>

View file

@ -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">&zwnj;<span class="styled">&zwnj;&zwnj;</span>&zwnj;</div>
<div class="ref" lang="mn" dir="rtl">&zwnj;<span class="styled">&zwnj;&zwnj;</span>&zwnj;</div>
</body>
</html>

View file

@ -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">&zwnj;<span class="styled">&zwnj;&zwnj;</span>&zwnj;</div>
<div class="ref" lang="mn" dir="rtl">&zwnj;<span class="styled">&zwnj;&zwnj;</span>&zwnj;</div>
</body>
</html>

View file

@ -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; 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">&zwj;<span class="styled">&zwj;&zwj;</span>&zwj;</div>
<div class="ref" lang="mn" dir="rtl">&zwj;<span class="styled">&zwj;&zwj;</span>&zwj;</div>
</body>
</html>

View file

@ -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">&zwnj;<span class="styled">&zwnj;&zwnj;</span>&zwnj;</div>
<div class="ref" lang="mn" dir="rtl">&zwnj;<span class="styled">&zwnj;&zwnj;</span>&zwnj;</div>
</body>
</html>

View file

@ -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">&zwnj;<span class="styled">&zwnj;&zwnj;</span>&zwnj;</div>
<div class="ref" lang="mn" dir="rtl">&zwnj;<span class="styled">&zwnj;&zwnj;</span>&zwnj;</div>
</body>
</html>

View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: colour</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 */
.styled { color:blue; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small></p>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: font-weight</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 */
.styled { font-weight: bold; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: font-style</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 */
.styled { font-style: italic; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: margin 0</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 */
.styled { margin:0; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: padding 0</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 */
.styled { padding:0; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: border 0</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 */
.styled { border:0; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: font size 100%</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 */
.styled { font-size:100%; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: font size 120%</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 */
.styled { font-size:120%; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: margin &gt; 0</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: 5em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { margin: 0.5em; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic characters DON'T show joining forms.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: padding &gt; 0</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: 5em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { padding: 0.5em; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic characters DON'T show joining forms.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: border &gt; 0</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: 5em; font-size: 120px; font-family: "csstest_noto"; }
/* the CSS above is not part of the test */
.styled { border: 1px solid #ccc; }
</style>
</head>
<body>
<p class="instructions">Test passes if the Arabic characters DON'T show joining forms.</p>
<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>