Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-24 22:58:21 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision ea3cae9746c39e8192b91181044144c60d9388e8

Browse source
This commit is contained in:
WPT Sync Bot 2019-03-12 21:33:06 -04:00
parent 9513544e91
commit b3f94b4330
194 changed files with 22476 additions and 15435 deletions
Download patch file Download diff file Expand all files Collapse all files

25
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-000-ref.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: 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">ع&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.
-->
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-001-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: 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 */
.color { color:blue; }
</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="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>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-002-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: 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 */
.fontweight { 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;<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>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-003-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: 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 */
.fontstyle { font-style: italic; }
</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="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>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-004-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: 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 */
.margin { margin:0; }
</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="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>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-005-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: 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 */
.padding { padding:0; }
</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="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>

30
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-006-ref.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: 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 */
.margin { margin:0; }
.padding { padding:0; }
.border { border:0; }
</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="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>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-007-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!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>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-008-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: 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 */
.fontsizeplus { font-size:120%; }
</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="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>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-009-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: 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: 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 DON'T join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<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>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-010-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: 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: 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 DON'T join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<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>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-011-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: 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: 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 DON'T join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<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>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-012-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: isolation, bdi</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>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-013-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!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>

26
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-014-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!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"; }
.styled { text-decoration: underline; }
</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;<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>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-015-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!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>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-016-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: outline</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>
</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>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-017-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!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>

28
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-018-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!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>

26
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-020-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>n'ko, colour</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>
</head>
<body>
<p class="instructions">Test passes if the three N'Ko characters join.</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>

26
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-021-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>n'ko, font-style</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>
</head>
<body>
<p class="instructions">Test passes if the three N'Ko characters join.</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>

26
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-022-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>n'ko, text-decoration</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 join.</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>

25
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-000-ref.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>marked up diacritic: 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 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.
-->
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-001-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!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>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-002-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!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>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-003-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!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>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-004-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!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>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-005-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!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>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-006-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!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>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-007-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!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>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-008-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!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>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-009-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!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>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-010-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!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>

27
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-011-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!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>

25
tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_lig-000-ref.html Normal file
View file

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

29
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-000.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: span</title>
<meta name="assert" content="Shaping should 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');
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">ع&zwj;<span>&zwj;ع&zwj;</span>&zwj;ع</div>
<!-- Notes:
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-001.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: colour</title>
<meta name="assert" content="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">
<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 */
.color { color:blue; }
</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="test" lang="ar" dir="rtl">ع<span class="color">ع</span>ع</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>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-002.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: font-weight</title>
<meta name="assert" content="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">
<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>
</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="test" lang="ar" dir="rtl">ع<span class="fontweight">ع</span>ع</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>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-003.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: font-style</title>
<meta name="assert" content="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">
<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>
</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="test" lang="ar" dir="rtl">ع<span class="fontstyle">ع</span>ع</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>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-004.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: margin 0</title>
<meta name="assert" content="Shaping should 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-004-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 */
.margin { margin:0; }
</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="test" lang="ar" dir="rtl">ع<span class="margin">ع</span>ع</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>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-005.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: padding 0</title>
<meta name="assert" content="Shaping should 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-005-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 */
.padding { padding:0; }
</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="test" lang="ar" dir="rtl">ع<span class="padding">ع</span>ع</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>

34
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-006.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: border 0</title>
<meta name="assert" content="Shaping should 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-006-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 */
.margin { margin:0; }
.padding { padding:0; }
.border { border:0; }
</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="test" lang="ar" dir="rtl">ع<span class="border">ع</span>ع</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>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-007.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: font size 100%</title>
<meta name="assert" content="Shaping should 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-007-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 */
.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="test" lang="ar" dir="rtl">ع<span class="fontsize">ع</span>ع</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>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-008.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: font size 120%</title>
<meta name="assert" content="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">
<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 join.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<span class="fontsizeplus">ع</span>ع</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>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-009.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: margin &gt; 0</title>
<meta name="assert" content="Shaping SHOULD 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');
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>
</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>
<div class="test" lang="ar" dir="rtl">ع<span class="margin">ع</span>ع</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>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-010.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: padding &gt; 0</title>
<meta name="assert" content="Shaping SHOULD 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');
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>
</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>
<div class="test" lang="ar" dir="rtl">ع<span class="padding">ع</span>ع</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>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-011.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: border &gt; 0</title>
<meta name="assert" content="Shaping SHOULD 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');
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>
</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>
<div class="test" lang="ar" dir="rtl">ع<span class="border">ع</span>ع</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>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-012.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: isolation, bdi</title>
<meta name="assert" content="Shaping SHOULD 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');
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="test" lang="ar" dir="rtl">ع<bdi>ع</bdi>ع</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>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-013.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: isolation, auto</title>
<meta name="assert" content="Shaping SHOULD 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');
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="test" lang="ar" dir="rtl">ع<span dir="auto">ع</span>ع</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>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-014.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: text-decoration</title>
<meta name="assert" content="Shaping should 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');
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 both boxes look the same.</p>
<small>Skip if markup alone breaks the join (test shaping-000)</small>
<div class="test" lang="ar" dir="rtl">ع<span class="styled">ع</span>ع</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>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-015.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: text-decoration</title>
<meta name="assert" content="Shaping should 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-015-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 */
.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="test" lang="ar" dir="rtl">ع<span class="styled">ع</span>ع</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>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-016.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: outline</title>
<meta name="assert" content="Shaping should 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');
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>
</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="test" lang="ar" dir="rtl">ع<span class="styled">ع</span>ع</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>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-017.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: em element</title>
<meta name="assert" content="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-017-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 */
.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="test" lang="ar" dir="rtl">ع<em>ع</em>ع</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>

32
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-018.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>shaping: b element</title>
<meta name="assert" content="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-018-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 */
.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="test" lang="ar" dir="rtl">ع<b>ع</b>ع</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>

30
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-020.html Normal file
View file

@ -0,0 +1,30 @@
<!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="match" href="reference/shaping-020-ref.html">
<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>
</head>
<body>
<p class="instructions">Test passes if the three N'Ko characters join.</p>
<div class="test" lang="nqo" dir="rtl">ߞ<span class="styled">ߞ</span>ߞ</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>

30
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-021.html Normal file
View file

@ -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">
<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>
</head>
<body>
<p class="instructions">Test passes if the three N'Ko characters join.</p>
<div class="test" lang="nqo" dir="rtl">ߞ<span class="styled">ߞ</span>ߞ</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>

30
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-022.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>n'ko, text-decoration</title>
<meta name="assert" content="Shaping should 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');
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 join.</p>
<div class="test" lang="nqo" dir="rtl">ߞ<span class="styled">ߞ</span>ߞ</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>

30
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-023.html Normal file
View file

@ -0,0 +1,30 @@
<!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">
<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 { color:blue; }
</style>
</head>
<body>
<p class="instructions">Test passes if the three Mongolian characters join in the right-hand line.</p>
<small>Skip the test if the line on the left isn't arranged vertically and joined up.</small>
<div class="test" lang="mn" dir="rtl">ᠨᠨᠨ<br/>ᠨ<span class="styled">ᠨ</span>ᠨ</div>
<!-- Notes:
This test uses the Noto Sans Mongolian font to control variables related to font choice.
The test is manual because Safari (and possibly other browsers) don't support joining for vertical Mongolian anyway, so ref tests wouldn't test the correct thing.
-->
</body>
</html>

30
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-024.html Normal file
View file

@ -0,0 +1,30 @@
<!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">
<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 join in the right-hand line.</p>
<small>Skip the test if the line on the left isn't arranged vertically and joined up.</small>
<div class="test" lang="mn" dir="rtl">ᠨᠨᠨ<br/>ᠨ<span class="styled">ᠨ</span>ᠨ</div>
<!-- Notes:
This test uses the Noto Sans Mongolian font to control variables related to font choice.
The test is manual because Safari (and possibly other browsers) don't support joining for vertical Mongolian anyway, so ref tests wouldn't test the correct thing.
-->
</body>
</html>

30
tests/wpt/web-platform-tests/css/css-text/shaping/shaping-025.html Normal file
View file

@ -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">
<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 join in the right-hand line.</p>
<small>Skip the test if the line on the left isn't arranged vertically and joined up.</small>
<div class="test" lang="mn" dir="rtl">ᠨᠨᠨ<br/>ᠨ<span class="styled">ᠨ</span>ᠨ</div>
<!-- Notes:
This test uses the Noto Sans Mongolian font to control variables related to font choice.
The test is manual because Safari (and possibly other browsers) don't support joining for vertical Mongolian anyway, so ref tests wouldn't test the correct thing.
-->
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-000.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>marked up diacritic: span</title>
<meta name="assert" content="Shaping should not be broken by a span with no styling change for an intervening diacritic.">
<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_cchar-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 Arabic base characters in each word join.</p>
<div class="test" lang="ar" dir="rtl">ع<span>&#x064E;</span>ع ع<span>&#x0651;</span>ع</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.
-->
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-001.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: colour</title>
<meta name="assert" content="Shaping should not be broken for changes to colour for an intervening diacritic.">
<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_cchar-001-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 */
.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="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</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>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-002.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: font-weight</title>
<meta name="assert" content="Shaping should not be broken for changes in font weight for an intervening diacritic.">
<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_cchar-002-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 */
.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="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</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>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-003.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: font-style</title>
<meta name="assert" content="Shaping should not be broken for changes in font style for an intervening diacritic.">
<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_cchar-003-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 */
.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="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</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>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-004.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: margin 0</title>
<meta name="assert" content="Shaping should not be broken when margin is set to 0 for an intervening diacritic.">
<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_cchar-004-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 */
.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="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</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>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-005.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: padding 0</title>
<meta name="assert" content="Shaping should not be broken when padding is set to 0 for an intervening diacritic.">
<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_cchar-005-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 */
.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="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</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>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-006.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: border 0</title>
<meta name="assert" content="Shaping should not be broken when border is set to 0 for an intervening diacritic.">
<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_cchar-006-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 */
.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="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</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>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-007.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: font size 100%</title>
<meta name="assert" content="Shaping should not be broken when font-size is set to 100% for an intervening diacritic.">
<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_cchar-007-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 */
.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="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</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>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-008.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: font size 120%</title>
<meta name="assert" content="Shaping should not be broken when font-size is changed for an intervening diacritic.">
<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_cchar-008-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 */
.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="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</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>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-009.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: margin &gt; 0</title>
<meta name="assert" content="Shaping SHOULD be broken when margin is set to a non-zero value on an intervening diacritic.">
<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_cchar-009-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: 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="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</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>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-010.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: padding &gt; 0</title>
<meta name="assert" content="Shaping SHOULD be broken when padding is set to a non-zero value on an intervening diacritic.">
<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_cchar-010-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: 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="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</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>

31
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-011.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>styled diacritic: border &gt; 0</title>
<meta name="assert" content="Shaping SHOULD be broken when border is set to a non-zero value on an intervening diacritic.">
<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_cchar-011-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: 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="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</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>

29
tests/wpt/web-platform-tests/css/css-text/shaping/shaping_lig-000.html Normal file
View file

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

18
tests/wpt/web-platform-tests/css/css-text/word-break/word-break-break-word-overflow-wrap-interactions-ref.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>CSS Test: word-break: break-word and overflow-wrap interaction</title>
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1296042">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<style>
div {
float: left;
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
overflow-wrap: anywhere;
}
</style>
<p>The boxes below should look the same.</p>
<div>FillerFillerFillerFiller</div>
<div>FillerFillerFillerFiller</div>
<div>FillerFillerFillerFiller</div>

21
tests/wpt/web-platform-tests/css/css-text/word-break/word-break-break-word-overflow-wrap-interactions.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>CSS Test: word-break: break-word and overflow-wrap interaction</title>
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1296042">
<link rel="help" href="https://drafts.csswg.org/css-text/#propdef-word-break">
<link rel="help" href="https://drafts.csswg.org/css-text/#propdef-overflow-wrap">
<link rel="help" href="https://drafts.csswg.org/css-text/#valdef-overflow-wrap-anywhere">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="match" href="word-break-break-word-overflow-wrap-interactions-ref.html">
<style>
div {
float: left;
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
}
</style>
<p>The boxes below should look the same.</p>
<div style="word-break: break-word; overflow-wrap: anywhere;">FillerFillerFillerFiller</div>
<div style="word-break: break-word; overflow-wrap: break-word;">FillerFillerFillerFiller</div>
<div style="word-break: break-word; overflow-wrap: normal;">FillerFillerFillerFiller</div>