summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-fonts/font-size-adjust-003.xht
blob: 1886ccc6bfdb027b797efe69f127f41bc6aa46f8 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Fonts Test: font-size-adjust - first available and installed font</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
  <link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-size-adjust-prop" title="3.6 Relative sizing: the font-size-adjust property" />
  <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2013May/0384.html" title="[css3-fonts] font-size-adjust and em/ex values" />
  <link rel="bookmark" href="https://code.google.com/p/chromium/issues/detail?id=451346" title="Issue 451346: Add support for font-size-adjust" />
  <link rel="bookmark" href="https://bugs.webkit.org/show_bug.cgi?id=15257" title="Bug 15257: Support CSS 3 font-size-adjust" />

  <!--
  font-relative lengths are calculated against
  the [computed? used?] font-size.

  In situations where font fallback occurs, fallback fonts
  may not share the same aspect ratio as the desired font
  family and will thus appear less readable. The
  font-size-adjust property is a way to preserve the
  readability of text when font fallback occurs. It does
  this by adjusting the font-size so that the x-height
  is the same regardless of the font used.
  http://lists.w3.org/Archives/Public/www-style/2013May/0384.html

  "May I include your sample to my patch as a blink test case?"
  https://code.google.com/p/chromium/issues/detail?id=451346#c6
  Yes you can ... as long as my name is listed somewhere as the original author.
  Gérard

  It's "Oxygen-Sans" (with a hyphen!) and not "Oxygen Sans"
  -->

  <meta content="In this test, span.test's first 3 fallback fonts are unavailable and the next fallback fonts have a relatively big aspect value with regards to each fonts listed, declared in span.reference rule (0.450). This test checks that 'font-size-adjust' property adjusts the relative height of lowercase letters of available, installed fallback fonts listed, declared in span.test rule (0.530-0.545) to match the relative height of lowercase letters of fonts listed, declared in span.reference rule (0.450)." name="assert" />

  <meta name="DC.date.created" content="2015-01-01T09:54:03+11:00" scheme="W3CDTF" />
  <meta name="DC.date.modified" content="2017-03-22T09:54:03+11:00" scheme="W3CDTF" />

  <style type="text/css"><![CDATA[
  div.wrapper
    {
      font-size: 200px;
      line-height: 1;
    }
  /*
  The 'line-height: 1' declaration
  is not part of the test. Its
  sole purpose is to not increase
  document box height unneedlessly.
  */

  img
    {
      height: 1px;
      margin-right: -100%;
      width: 100%;
    }

  img.top-x-height
    {
      vertical-align: 90px;
    }
  /*  200px mult by 0.450 == 90px  */

  img.baseline
    {
      vertical-align: -1px;
    }
  /*
  We want the bottom green line to be flush with the bottom of
  glyphs and not be overlapped by the bottom of glyphs. Therefore
  this 'vertical-align: -1px' declaration.
  */

  span.test
    {
      font-family: uninstalled, notavailable, bogus, "DejaVu Sans", "Oxygen-Sans", "Liberation Sans", Verdana, Tahoma;
  /*
  This test presumes that the tester will have at least
  one of the following font installed on his/her operating system:
  "DejaVu Sans", "Oxygen-Sans", "Liberation Sans", Verdana, Tahoma
  */
      font-size-adjust: 0.450;
    }

  /*
  List of 5 font faces with relatively big aspect values

  DejaVu Sans' aspect value     == 0.547
  Oxygen-Sans' aspect value     == 0.540
  Liberation Sans' aspect value == 0.530
  (DejaVu Sans, Oxygen-Sans and Liberation Sans are font
  faces very often installed under Linux Debian-distributions)

  Verdana's aspect value        == 0.545
  Tahoma's aspect value         == 0.545
  (Verdana and Tahoma are font faces very often pre-installed
  under Windows operating systems.)
  */

  span.reference
    {
      font-family: Rachana, "Nimbus Roman No9 L", "Times New Roman";
    }

  /*
  Rachana's aspect value            == 0.450
  Nimbus Roman No9 L's aspect value == 0.450
  (Rachana and Nimbus Roman No9 L are font
  faces often installed under Linux Debian-distributions)

  Times New Roman's aspect value    == 0.448
  (Times New Roman is a font face is very often pre-installed
  under Windows operating systems.)
  */

  /*
  This test presumes that the tester will have at least
  one of the following font installed on his/her operating system:
  Rachana, "Nimbus Roman No9 L", "Times New Roman"
  */
  ]]></style>

 </head>

 <body>

  <p>Test passes if each pair of "x" and "z" <strong>letters have the same height</strong>; the thin wide and bright green horizontal lines are not part of this test and only serve to help visually compare the height of tested pairs of letters.</p>

  <div class="wrapper">
    <img class="top-x-height" src="support/1x1-lime.png" alt="Image download support must be enabled" /><img class="baseline" src="support/1x1-lime.png" alt="Image download support must be enabled" />
    <span class="test">x</span>

    <span class="reference">x</span>
  </div>

  <div class="wrapper">
    <img class="top-x-height" src="support/1x1-lime.png" alt="Image download support must be enabled" /><img class="baseline" src="support/1x1-lime.png" alt="Image download support must be enabled" />
    <span class="test">z</span>

    <span class="reference">z</span>
  </div>

 </body>
</html>