layout/reftests/font-face/font-display-2.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>font-display test</title>
   5 <meta charset="utf-8">
   6 <style>
   7 body { margin: 20px }
   8
   9 @font-face {
  10   font-family: test2-auto;
  11   src: url(../fonts/markfonts-delay.sjs?font=markA&delay=4500&test=font-display-2-auto);
  12   font-display: auto;
  13 }
  14
  15 @font-face {
  16   font-family: test2-block;
  17   src: url(../fonts/markfonts-delay.sjs?font=markA&delay=4500&test=font-display-2-block);
  18   font-display: block;
  19 }
  20
  21 @font-face {
  22   font-family: test2-swap;
  23   src: url(../fonts/markfonts-delay.sjs?font=markA&delay=4500&test=font-display-2-swap);
  24   font-display: swap;
  25 }
  26
  27 @font-face {
  28   font-family: test2-fallback;
  29   src: url(../fonts/markfonts-delay.sjs?font=markA&delay=4500&test=font-display-2-fallback);
  30   font-display: fallback;
  31 }
  32
  33 @font-face {
  34   font-family: test2-optional;
  35   src: url(../fonts/markfonts-delay.sjs?font=markA&delay=4500&test=font-display-2-optional);
  36   font-display: optional;
  37 }
  38
  39 div.test {
  40   font-size: 600%;
  41   line-height: 1.3em;
  42   width: 500px;
  43 }
  44
  45 div.test p {
  46   display: inline-block;
  47   width: 150px;
  48   margin: 0;
  49 }
  50
  51 .auto { font-family: test2-auto; }
  52 .block { font-family: test2-block; }
  53 .swap { font-family: test2-swap; }
  54 .fallback { font-family: test2-fallback; }
  55 .optional { font-family: test2-optional; }
  56
  57 </style>
  58 </head>
  59
  60 <body>
  61 <div class="test">
  62 <p class="auto">A</p>
  63 <p class="block">A</p>
  64 </div>
  65 <div class="test">
  66 <p class="swap">A</p>
  67 <p class="fallback">A</p>
  68 <p class="optional">A</p>
  69 </div>
  70 </body>
  71 </html>