text-transform-capitalize-001.html

mozilla-central/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-001.html

Enable keyboard shortcuts

Source code

File a bug in Core :: Layout: Text and Fonts

Revision control

Copy as Markdown

Other Tools

Test Info:

This WPT test may be referenced by the following Test IDs:
- /css/css-text/text-transform/text-transform-capitalize-001.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>CSS3 Text, text transform: capitalize, Latin Basic and Latin-1</title>

<meta name="assert" content="For the Latin Basic and Latin-1 blocks, text-transform: capitalize puts the first typographic letter unit of each word in titlecase; other characters are unaffected.">

<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>

<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>

<link rel="match" href="reference/text-transform-capitalize-001-ref.html">

<style type='text/css'>

@font-face {

	font-family: 'webfont';

	src: url('/fonts/DoulosSIL-R.woff') format('woff');

	font-weight: normal;

	font-style: normal;

.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }

.test span, .ref span { margin-right: 1em; white-space: nowrap; }

/* the CSS above is not part of the test */

.test { text-transform: capitalize; }

</style>

</head>

<body>

<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>

If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>

<div class="test"><span>aaa Aaa</span> <span>bbb Bbb</span> <span>ccc Ccc</span> <span>ddd Ddd</span> <span>eee Eee</span> <span>fff Fff</span> <span>ggg Ggg</span> <span>hhh Hhh</span> <span>iii Iii</span> <span>jjj Jjj</span> <span>kkk Kkk</span> <span>lll Lll</span> <span>mmm Mmm</span> <span>nnn Nnn</span> <span>ooo Ooo</span> <span>ppp Ppp</span> <span>qqq Qqq</span> <span>rrr Rrr</span> <span>sss Sss</span> <span>ttt Ttt</span> <span>uuu Uuu</span> <span>vvv Vvv</span> <span>www Www</span> <span>xxx Xxx</span> <span>yyy Yyy</span> <span>zzz Zzz</span> <span title="U+00B5">&#x00B5;&#x00B5;&#x00B5; &#x039C;&#x00B5;&#x00B5;</span>  <span title="U+00E0">&#x00E0;&#x00E0;&#x00E0; &#x00C0;&#x00E0;&#x00E0;</span>  <span title="U+00E1">&#x00E1;&#x00E1;&#x00E1; &#x00C1;&#x00E1;&#x00E1;</span>  <span title="U+00E2">&#x00E2;&#x00E2;&#x00E2; &#x00C2;&#x00E2;&#x00E2;</span>  <span title="U+00E3">&#x00E3;&#x00E3;&#x00E3; &#x00C3;&#x00E3;&#x00E3;</span>  <span title="U+00E4">&#x00E4;&#x00E4;&#x00E4; &#x00C4;&#x00E4;&#x00E4;</span>  <span title="U+00E5">&#x00E5;&#x00E5;&#x00E5; &#x00C5;&#x00E5;&#x00E5;</span>  <span title="U+00E6">&#x00E6;&#x00E6;&#x00E6; &#x00C6;&#x00E6;&#x00E6;</span>  <span title="U+00E7">&#x00E7;&#x00E7;&#x00E7; &#x00C7;&#x00E7;&#x00E7;</span>  <span title="U+00E8">&#x00E8;&#x00E8;&#x00E8; &#x00C8;&#x00E8;&#x00E8;</span>  <span title="U+00E9">&#x00E9;&#x00E9;&#x00E9; &#x00C9;&#x00E9;&#x00E9;</span>  <span title="U+00EA">&#x00EA;&#x00EA;&#x00EA; &#x00CA;&#x00EA;&#x00EA;</span>  <span title="U+00EB">&#x00EB;&#x00EB;&#x00EB; &#x00CB;&#x00EB;&#x00EB;</span>  <span title="U+00EC">&#x00EC;&#x00EC;&#x00EC; &#x00CC;&#x00EC;&#x00EC;</span>  <span title="U+00ED">&#x00ED;&#x00ED;&#x00ED; &#x00CD;&#x00ED;&#x00ED;</span>  <span title="U+00EE">&#x00EE;&#x00EE;&#x00EE; &#x00CE;&#x00EE;&#x00EE;</span>  <span title="U+00EF">&#x00EF;&#x00EF;&#x00EF; &#x00CF;&#x00EF;&#x00EF;</span>  <span title="U+00F0">&#x00F0;&#x00F0;&#x00F0; &#x00D0;&#x00F0;&#x00F0;</span>  <span title="U+00F1">&#x00F1;&#x00F1;&#x00F1; &#x00D1;&#x00F1;&#x00F1;</span>  <span title="U+00F2">&#x00F2;&#x00F2;&#x00F2; &#x00D2;&#x00F2;&#x00F2;</span>  <span title="U+00F3">&#x00F3;&#x00F3;&#x00F3; &#x00D3;&#x00F3;&#x00F3;</span>  <span title="U+00F4">&#x00F4;&#x00F4;&#x00F4; &#x00D4;&#x00F4;&#x00F4;</span>  <span title="U+00F5">&#x00F5;&#x00F5;&#x00F5; &#x00D5;&#x00F5;&#x00F5;</span>  <span title="U+00F6">&#x00F6;&#x00F6;&#x00F6; &#x00D6;&#x00F6;&#x00F6;</span>  <span title="U+00F8">&#x00F8;&#x00F8;&#x00F8; &#x00D8;&#x00F8;&#x00F8;</span>  <span title="U+00F9">&#x00F9;&#x00F9;&#x00F9; &#x00D9;&#x00F9;&#x00F9;</span>  <span title="U+00FA">&#x00FA;&#x00FA;&#x00FA; &#x00DA;&#x00FA;&#x00FA;</span>  <span title="U+00FB">&#x00FB;&#x00FB;&#x00FB; &#x00DB;&#x00FB;&#x00FB;</span>  <span title="U+00FC">&#x00FC;&#x00FC;&#x00FC; &#x00DC;&#x00FC;&#x00FC;</span>  <span title="U+00FD">&#x00FD;&#x00FD;&#x00FD; &#x00DD;&#x00FD;&#x00FD;</span>  <span title="U+00FE">&#x00FE;&#x00FE;&#x00FE; &#x00DE;&#x00FE;&#x00FE;</span>  <span title="U+00FF">&#x00FF;&#x00FF;&#x00FF; &#x0178;&#x00FF;&#x00FF;</span>  </div>

</body>

</html>