layout/reftests/bugs/1738700-1.html

   1 <html>
   2   <head>
   3     <meta charset=UTF-8>
   4     <title>“Amiri Quran Colored” test</title>
   5     <style>
   6       @font-face {
   7         font-family: AmiriColored;
   8         font-style: normal;
   9         font-weight: 400;
  10         src: url('../fonts/AmiriQuranColored.otf');
  11       }
  12       @font-face {
  13         font-family: AmiriMonochrome;
  14         font-style: normal;
  15         font-weight: 400;
  16         src: url('../fonts/AmiriQuran.otf');
  17       }
  18       .test {
  19         direction: rtl;
  20         text-align: justify;
  21         text-align-last: center;
  22         font-size: 40px;
  23         margin: 1em;
  24         position: absolute;
  25       }
  26       .colored {
  27         font-family: AmiriColored;
  28       }
  29       .monochrome {
  30         font-family: AmiriMonochrome;
  31         /* Add some stroke to hide antialiased edges of the colored glyphs */
  32         -webkit-text-stroke: 3px black;
  33       }
  34     </style>
  35   </head>
  36   <div>The colored Arabic text should be exactly covered by (thicker) black text:</div>
  37   <div class="test colored">
  38     <p>
  39     ﷽ ۝١
  40     <br>
  41 ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِینَ ۝٢
  42 ٱلرَّحۡمَـٰنِ ٱلرَّحِیمِ ۝٣
  43 مَـٰلِكِ یَوۡمِ ٱلدِّینِ ۝٤
  44 إِیَّاكَ نَعۡبُدُ وَإِیَّاكَ نَسۡتَعِینُ ۝٥
  45 ٱهۡدِنَا ٱلصِّرَ ٰطَ ٱلۡمُسۡتَقِیمَ ۝٦
  46 صِرَ ٰطَ ٱلَّذِینَ أَنۡعَمۡتَ عَلَیۡهِمۡ غَیۡرِ ٱلۡمَغۡضُوبِ عَلَیۡهِمۡ وَلَا ٱلضَّاۤلِّینَ ۝٧
  47     </p>
  48   </div>
  49   <div class="test monochrome">
  50     <p>
  51     ﷽ ۝١
  52     <br>
  53 ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِینَ ۝٢
  54 ٱلرَّحۡمَـٰنِ ٱلرَّحِیمِ ۝٣
  55 مَـٰلِكِ یَوۡمِ ٱلدِّینِ ۝٤
  56 إِیَّاكَ نَعۡبُدُ وَإِیَّاكَ نَسۡتَعِینُ ۝٥
  57 ٱهۡدِنَا ٱلصِّرَ ٰطَ ٱلۡمُسۡتَقِیمَ ۝٦
  58 صِرَ ٰطَ ٱلَّذِینَ أَنۡعَمۡتَ عَلَیۡهِمۡ غَیۡرِ ٱلۡمَغۡضُوبِ عَلَیۡهِمۡ وَلَا ٱلضَّاۤلِّینَ ۝٧
  59     </p>
  60   </div>
  61 </html>
  62