зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1729450 - Fix up WPT reftests for text-decoration-emphasis-style-* to use more reliable ruby-based references. r=emilio
More emphasis testcases that fail because of reference renderings that don't quite match, in addition to
some simple typos ("sample" vs "Simple").
There's some redundancy here between the testcases coming from different authors, but for now I haven't
tried to rationalize that aside from dropping a duplicate individual test for 'filled dot'.
Depends on D124794
Differential Revision: https://phabricator.services.mozilla.com/D124795
This commit is contained in:
Jonathan Kew
Родитель
0a5e26e387
Коммит
259dedafc7
|
|
@ -1,2 +1,3 @@
|
|||
[text-emphasis-style-002.html]
|
||||
expected: FAIL
|
||||
fuzzy:
|
||||
if (os == "mac"): maxDifference=70;totalPixels=0-11
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
[text-emphasis-style-006.html]
|
||||
disabled:
|
||||
if (os == "android") and e10s: bug 1550895 (frequently fails on geckoview)
|
||||
fuzzy:
|
||||
if os == "mac": maxDifference=0-96;totalPixels=0-12
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[text-emphasis-style-007.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[text-emphasis-style-008.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +1,3 @@
|
|||
[text-emphasis-style-010.html]
|
||||
expected: FAIL
|
||||
fuzzy:
|
||||
if (os == "mac"): maxDifference=68;totalPixels=0-24
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[text-emphasis-style-012.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
[text-emphasis-style-016.html]
|
||||
fuzzy:
|
||||
if (os == "mac"): maxDifference=70;totalPixels=0-11
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[text-emphasis-style-021.html]
|
||||
expected:
|
||||
FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[text-emphasis-style-filled-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[text-emphasis-style-open-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[text-emphasis-style-shape-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[text-emphasis-style-string-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="author" title="Yuuki Furukawa" href="mailto:tenderhearted0407@gmail.com">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if "open dot" is above every single character of "Text sample".</p>
|
||||
<div><ruby>T<rt>•</rt>e<rt>•</rt>x<rt>•</rt>t<rt>•</rt></ruby> <ruby>S<rt>•</rt>i<rt>•</rt>m<rt>•</rt>p<rt>•</rt>l<rt>•</rt>e<rt>•</rt></span></div>
|
||||
<p>Test passes if "filled dot" is above every single character of "Text sample".</p>
|
||||
<div><ruby>T<rt>•</rt>e<rt>•</rt>x<rt>•</rt>t<rt>•</rt></ruby> <ruby>s<rt>•</rt>a<rt>•</rt>m<rt>•</rt>p<rt>•</rt>l<rt>•</rt>e<rt>•</rt></span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference File</title>
|
||||
<link rel="author" title="Tomoyuki Shimizu" href="mailto:tomoyuki.labs@gmail.com">
|
||||
<!-- link rel="reviewer" title="" href="" -->
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a filled dot is above every single character of "Text Sample".</p>
|
||||
<div><ruby>T<rt>•</rt>e<rt>•</rt>x<rt>•</rt>t<rt>•</rt></ruby> <ruby>s<rt>•</rt>a<rt>•</rt>m<rt>•</rt>p<rt>•</rt>l<rt>•</rt>e<rt>•</rt></ruby></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,6 +5,11 @@
|
|||
<title>CSS Reference File</title>
|
||||
<link rel="author" title="Tomoyuki Shimizu" href="mailto:tomoyuki.labs@gmail.com">
|
||||
<!-- link rel="reviewer" title="" href="" -->
|
||||
<style>
|
||||
div {
|
||||
font: 1.5em monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a filled circle is above every single character of "Text Sample".</p>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,9 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if "◉" is above every single character of "Text sample"</p>
|
||||
<div>
|
||||
<span><ruby>Text sample<rt>◉◉◉◉◉◉◉◉◉◉</rt></ruby></span>.
|
||||
<div style="font: 1.5em monospace">
|
||||
<span><ruby><rb>T</rb><rt>◉</rt><rb>e</rb><rt>◉</rt><rb>x</rb><rt>◉</rt><rb>t</rb><rt>◉</rt>
|
||||
<rb>s</rb><rt>◉</rt><rb>a</rb><rt>◉</rt><rb>m</rb><rt>◉</rt><rb>p</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>e</rb><rt>◉</rt></ruby></span>.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,14 @@
|
|||
<title>CSS Reference File</title>
|
||||
<link rel="author" title="Yu.Taguchi" href="mailto:taguchu@gmail.com">
|
||||
<!-- link rel="reviewer" title="" href="" -->
|
||||
<style>
|
||||
div {
|
||||
font: 1.5em monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ﹅ is aborve every single character of"Text sample".</p>
|
||||
<p>Test passes if ﹅ is above every single character of "Text sample".</p>
|
||||
<div><ruby class="dot">T<rt>﹅</rt>e<rt>﹅</rt>x<rt>﹅</rt>t<rt>﹅</rt></ruby> <ruby class="circle">s<rt>﹅</rt>a<rt>﹅</rt>m<rt>﹅</rt>p<rt>﹅</rt>l<rt>﹅</rt>e<rt>﹅</rt></span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if "open dot" is above every single character of "Text sample".</p>
|
||||
<div><ruby>T<rt>◦</rt>e<rt>◦</rt>x<rt>◦</rt>t<rt>◦</rt></ruby> <ruby>S<rt>◦</rt>i<rt>◦</rt>m<rt>◦</rt>p<rt>◦</rt>l<rt>◦</rt>e<rt>◦</rt></span></div>
|
||||
<div><ruby>T<rt>◦</rt>e<rt>◦</rt>x<rt>◦</rt>t<rt>◦</rt></ruby> <ruby>s<rt>◦</rt>a<rt>◦</rt>m<rt>◦</rt>p<rt>◦</rt>l<rt>◦</rt>e<rt>◦</rt></span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,6 +5,11 @@
|
|||
<title>CSS Reference File</title>
|
||||
<link rel="author" title="Shinsuke Matsuki" href="mailto:shinsk@gmail.com">
|
||||
<!-- link rel="reviewer" title="" href="" -->
|
||||
<style>
|
||||
div {
|
||||
font: 1.5em monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if "^" is above every single character of "Text sample".</p>
|
||||
|
|
|
|||
|
|
@ -4,140 +4,90 @@
|
|||
<head>
|
||||
<title>CSS Test: text-emphasis-style - filled - basic cases Reftest Reference</title>
|
||||
<link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" />
|
||||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com" />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.margin
|
||||
{
|
||||
margin: 18px 0 0;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
border: solid 1px gray;
|
||||
font-size: 2em;
|
||||
font: 1.5em monospace;
|
||||
width: 10em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0em;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
}
|
||||
]]></style>
|
||||
<script type="text/javascript">
|
||||
// <![CDATA[
|
||||
// Set Font Family to 'IPAMincho'
|
||||
function setFontFamily () {
|
||||
var fontName = 'IPAMincho';
|
||||
var divs = document.getElementsByTagName('div');
|
||||
var i = 0;
|
||||
var div;
|
||||
while (i < divs.length) {
|
||||
div = divs.item(i);
|
||||
if (div.className == 'parent') {
|
||||
div.style.fontFamily = fontName;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
}
|
||||
// ]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>Test passes if each pair of upper and lower "Filler Text" in the square box is identical.</p>
|
||||
filled
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">•</span></span><span class="common">i<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">e<span class="refcommon">•</span></span><span class="common">r<span class="refcommon">•</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">•</span></span><span class="common">i<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">e<span class="refcommon">•</span></span><span class="common">r<span class="refcommon">•</span></span>
|
||||
<ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
filled circle
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">●</span></span><span class="common">i<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">e<span class="refcommon">●</span></span><span class="common">r<span class="refcommon">●</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">●</span></span><span class="common">i<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">e<span class="refcommon">●</span></span><span class="common">r<span class="refcommon">●</span></span>
|
||||
<ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
filled dot
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">•</span></span><span class="common">i<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">e<span class="refcommon">•</span></span><span class="common">r<span class="refcommon">•</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>•</rt><rb>i</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>e</rb><rt>•</rt><rb>r</rb><rt>•</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">•</span></span><span class="common">i<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">e<span class="refcommon">•</span></span><span class="common">r<span class="refcommon">•</span></span>
|
||||
<ruby><rb>F</rb><rt>•</rt><rb>i</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>e</rb><rt>•</rt><rb>r</rb><rt>•</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
filled double-circle
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">◉</span></span><span class="common">i<span class="refcommon">◉</span></span><span class="common">l<span class="refcommon">◉</span></span><span class="common">l<span class="refcommon">◉</span></span><span class="common">e<span class="refcommon">◉</span></span><span class="common">r<span class="refcommon">◉</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>◉</rt><rb>i</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>e</rb><rt>◉</rt><rb>r</rb><rt>◉</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">◉</span></span><span class="common">i<span class="refcommon">◉</span></span><span class="common">l<span class="refcommon">◉</span></span><span class="common">l<span class="refcommon">◉</span></span><span class="common">e<span class="refcommon">◉</span></span><span class="common">r<span class="refcommon">◉</span></span>
|
||||
<ruby><rb>F</rb><rt>◉</rt><rb>i</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>e</rb><rt>◉</rt><rb>r</rb><rt>◉</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
filled sesame
|
||||
<div class="parent">
|
||||
<div class=" margin">
|
||||
<span class="common">F<span class="refcommon">﹅</span></span><span class="common">i<span class="refcommon">﹅</span></span><span class="common">l<span class="refcommon">﹅</span></span><span class="common">l<span class="refcommon">﹅</span></span><span class="common">e<span class="refcommon">﹅</span></span><span class="common">r<span class="refcommon">﹅</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>﹅</rt><rb>i</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>e</rb><rt>﹅</rt><rb>r</rb><rt>﹅</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">﹅</span></span><span class="common">i<span class="refcommon">﹅</span></span><span class="common">l<span class="refcommon">﹅</span></span><span class="common">l<span class="refcommon">﹅</span></span><span class="common">e<span class="refcommon">﹅</span></span><span class="common">r<span class="refcommon">﹅</span></span>
|
||||
<ruby><rb>F</rb><rt>﹅</rt><rb>i</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>e</rb><rt>﹅</rt><rb>r</rb><rt>﹅</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
filled triangle
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">▲</span></span><span class="common">i<span class="refcommon">▲</span></span><span class="common">l<span class="refcommon">▲</span></span><span class="common">l<span class="refcommon">▲</span></span><span class="common">e<span class="refcommon">▲</span></span><span class="common">r<span class="refcommon">▲</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>▲</rt><rb>i</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>e</rb><rt>▲</rt><rb>r</rb><rt>▲</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">▲</span></span><span class="common">i<span class="refcommon">▲</span></span><span class="common">l<span class="refcommon">▲</span></span><span class="common">l<span class="refcommon">▲</span></span><span class="common">e<span class="refcommon">▲</span></span><span class="common">r<span class="refcommon">▲</span></span>
|
||||
<ruby><rb>F</rb><rt>▲</rt><rb>i</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>e</rb><rt>▲</rt><rb>r</rb><rt>▲</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<p class="fontChange" style="display: block;">
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and apply it.
|
||||
<button type="button" onclick="setFontFamily()">
|
||||
Apply
|
||||
</button>
|
||||
</p>
|
||||
<script type="text/javascript">
|
||||
if (document.getElementById) {
|
||||
document.getElementById('fontChange').style.display = 'block'
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -12,24 +12,6 @@
|
|||
width: 10em;
|
||||
}
|
||||
]]></style>
|
||||
<script type="text/javascript">
|
||||
// <![CDATA[
|
||||
// Set Font Family to 'IPAMincho'
|
||||
function setFontFamily () {
|
||||
var fontName = 'IPAMincho';
|
||||
var divs = document.getElementsByTagName('div');
|
||||
var i = 0;
|
||||
var div;
|
||||
while (i < divs.length) {
|
||||
div = divs.item(i);
|
||||
if (div.className == 'parent') {
|
||||
div.style.fontFamily = fontName;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
}
|
||||
// ]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a pair of upper and lower "Filler Text" in the square box is identical.</p>
|
||||
|
|
@ -40,17 +22,6 @@
|
|||
<br />
|
||||
<div>Filler Text</div>
|
||||
</div>
|
||||
<p class="fontChange" style="display: block;">
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and apply it.
|
||||
<button type="button" onclick="setFontFamily()">
|
||||
Apply
|
||||
</button>
|
||||
</p>
|
||||
<script type="text/javascript">
|
||||
if (document.getElementById) {
|
||||
document.getElementById('fontChange').style.display = 'block'
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,100 +4,63 @@
|
|||
<head>
|
||||
<title>CSS Test: text-emphasis-style - open - basic cases Reftest Reference</title>
|
||||
<link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" />
|
||||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com" />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.margin
|
||||
{
|
||||
margin: 18px 0 0;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
border: solid 1px gray;
|
||||
font-size: 2em;
|
||||
font: 1.5em monospace;
|
||||
width: 10em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0em;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
}
|
||||
]]></style>
|
||||
<script type="text/javascript">
|
||||
// <![CDATA[
|
||||
// Set Font Family to 'IPAMincho'
|
||||
function setFontFamily () {
|
||||
var fontName = 'IPAMincho';
|
||||
var divs = document.getElementsByTagName('div');
|
||||
var i = 0;
|
||||
var div;
|
||||
while (i < divs.length) {
|
||||
div = divs.item(i);
|
||||
if (div.className == 'parent') {
|
||||
div.style.fontFamily = fontName;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
}
|
||||
// ]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>Test passes if each pair of upper and lower "Filler Text" in the square box is identical.</p>
|
||||
open
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">◦</span></span><span class="common">i<span class="refcommon">◦</span></span><span class="common">l<span class="refcommon">◦</span></span><span class="common">l<span class="refcommon">◦</span></span><span class="common">e<span class="refcommon">◦</span></span><span class="common">r<span class="refcommon">◦</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>○</rt><rb>i</rb><rt>○</rt><rb>l</rb><rt>○</rt><rb>l</rb><rt>○</rt><rb>e</rb><rt>○</rt><rb>r</rb><rt>○</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">◦</span></span><span class="common">i<span class="refcommon">◦</span></span><span class="common">l<span class="refcommon">◦</span></span><span class="common">l<span class="refcommon">◦</span></span><span class="common">e<span class="refcommon">◦</span></span><span class="common">r<span class="refcommon">◦</span></span>
|
||||
<ruby><rb>F</rb><rt>○</rt><rb>i</rb><rt>○</rt><rb>l</rb><rt>○</rt><rb>l</rb><rt>○</rt><rb>e</rb><rt>○</rt><rb>r</rb><rt>○</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
open circle
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">○</span></span><span class="common">i<span class="refcommon">○</span></span><span class="common">l<span class="refcommon">○</span></span><span class="common">l<span class="refcommon">○</span></span><span class="common">e<span class="refcommon">○</span></span><span class="common">r<span class="refcommon">○</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>○</rt><rb>i</rb><rt>○</rt><rb>l</rb><rt>○</rt><rb>l</rb><rt>○</rt><rb>e</rb><rt>○</rt><rb>r</rb><rt>○</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">○</span></span><span class="common">i<span class="refcommon">○</span></span><span class="common">l<span class="refcommon">○</span></span><span class="common">l<span class="refcommon">○</span></span><span class="common">e<span class="refcommon">○</span></span><span class="common">r<span class="refcommon">○</span></span>
|
||||
<ruby><rb>F</rb><rt>○</rt><rb>i</rb><rt>○</rt><rb>l</rb><rt>○</rt><rb>l</rb><rt>○</rt><rb>e</rb><rt>○</rt><rb>r</rb><rt>○</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
open dot
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">◦</span></span><span class="common">i<span class="refcommon">◦</span></span><span class="common">l<span class="refcommon">◦</span></span><span class="common">l<span class="refcommon">◦</span></span><span class="common">e<span class="refcommon">◦</span></span><span class="common">r<span class="refcommon">◦</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>◦</rt><rb>i</rb><rt>◦</rt><rb>l</rb><rt>◦</rt><rb>l</rb><rt>◦</rt><rb>e</rb><rt>◦</rt><rb>r</rb><rt>◦</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">◦</span></span><span class="common">i<span class="refcommon">◦</span></span><span class="common">l<span class="refcommon">◦</span></span><span class="common">l<span class="refcommon">◦</span></span><span class="common">e<span class="refcommon">◦</span></span><span class="common">r<span class="refcommon">◦</span></span>
|
||||
<ruby><rb>F</rb><rt>◦</rt><rb>i</rb><rt>◦</rt><rb>l</rb><rt>◦</rt><rb>l</rb><rt>◦</rt><rb>e</rb><rt>◦</rt><rb>r</rb><rt>◦</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
open double-circle
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">◎</span></span><span class="common">i<span class="refcommon">◎</span></span><span class="common">l<span class="refcommon">◎</span></span><span class="common">l<span class="refcommon">◎</span></span><span class="common">e<span class="refcommon">◎</span></span><span class="common">r<span class="refcommon">◎</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>◎</rt><rb>i</rb><rt>◎</rt><rb>l</rb><rt>◎</rt><rb>l</rb><rt>◎</rt><rb>e</rb><rt>◎</rt><rb>r</rb><rt>◎</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">◎</span></span><span class="common">i<span class="refcommon">◎</span></span><span class="common">l<span class="refcommon">◎</span></span><span class="common">l<span class="refcommon">◎</span></span><span class="common">e<span class="refcommon">◎</span></span><span class="common">r<span class="refcommon">◎</span></span>
|
||||
<ruby><rb>F</rb><rt>◎</rt><rb>i</rb><rt>◎</rt><rb>l</rb><rt>◎</rt><rb>l</rb><rt>◎</rt><rb>e</rb><rt>◎</rt><rb>r</rb><rt>◎</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -105,39 +68,26 @@
|
|||
open sesame
|
||||
<div class="parent">
|
||||
<div class=" margin">
|
||||
<span class="common">F<span class="refcommon">﹆</span></span><span class="common">i<span class="refcommon">﹆</span></span><span class="common">l<span class="refcommon">﹆</span></span><span class="common">l<span class="refcommon">﹆</span></span><span class="common">e<span class="refcommon">﹆</span></span><span class="common">r<span class="refcommon">﹆</span></span>
|
||||
<ruby><rb>F</rb><rt>﹆</rt><rb>i</rb><rt>﹆</rt><rb>l</rb><rt>﹆</rt><rb>l</rb><rt>﹆</rt><rb>e</rb><rt>﹆</rt><rb>r</rb><rt>﹆</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">﹆</span></span><span class="common">i<span class="refcommon">﹆</span></span><span class="common">l<span class="refcommon">﹆</span></span><span class="common">l<span class="refcommon">﹆</span></span><span class="common">e<span class="refcommon">﹆</span></span><span class="common">r<span class="refcommon">﹆</span></span>
|
||||
<ruby><rb>F</rb><rt>﹆</rt><rb>i</rb><rt>﹆</rt><rb>l</rb><rt>﹆</rt><rb>l</rb><rt>﹆</rt><rb>e</rb><rt>﹆</rt><rb>r</rb><rt>﹆</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
open triangle
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">△</span></span><span class="common">i<span class="refcommon">△</span></span><span class="common">l<span class="refcommon">△</span></span><span class="common">l<span class="refcommon">△</span></span><span class="common">e<span class="refcommon">△</span></span><span class="common">r<span class="refcommon">△</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>△</rt><rb>i</rb><rt>△</rt><rb>l</rb><rt>△</rt><rb>l</rb><rt>△</rt><rb>e</rb><rt>△</rt><rb>r</rb><rt>△</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">△</span></span><span class="common">i<span class="refcommon">△</span></span><span class="common">l<span class="refcommon">△</span></span><span class="common">l<span class="refcommon">△</span></span><span class="common">e<span class="refcommon">△</span></span><span class="common">r<span class="refcommon">△</span></span>
|
||||
<ruby><rb>F</rb><rt>△</rt><rb>i</rb><rt>△</rt><rb>l</rb><rt>△</rt><rb>l</rb><rt>△</rt><rb>e</rb><rt>△</rt><rb>r</rb><rt>△</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<p class="fontChange" style="display: block;">
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and apply it.
|
||||
<button type="button" onclick="setFontFamily()">
|
||||
Apply
|
||||
</button>
|
||||
</p>
|
||||
<script type="text/javascript">
|
||||
if (document.getElementById) {
|
||||
document.getElementById('fontChange').style.display = 'block'
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,127 +4,78 @@
|
|||
<head>
|
||||
<title>CSS Test: text-emphasis-style - shape - basic cases Reftest Reference</title>
|
||||
<link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" />
|
||||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com" />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.margin
|
||||
{
|
||||
margin: 18px 0 0;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
border: solid 1px gray;
|
||||
font-size: 2em;
|
||||
font: 1.5em monospace;
|
||||
width: 10em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0em;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
}
|
||||
]]></style>
|
||||
<script type="text/javascript">
|
||||
// <![CDATA[
|
||||
// Set Font Family to 'IPAMincho'
|
||||
function setFontFamily () {
|
||||
var fontName = 'IPAMincho';
|
||||
var divs = document.getElementsByTagName('div');
|
||||
var i = 0;
|
||||
var div;
|
||||
while (i < divs.length) {
|
||||
div = divs.item(i);
|
||||
if (div.className == 'parent') {
|
||||
div.style.fontFamily = fontName;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
}
|
||||
// ]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>Test passes if each pair of upper and lower "Filler Text" in the square box is identical.</p>
|
||||
circle
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">●</span></span><span class="common">i<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">e<span class="refcommon">●</span></span><span class="common">r<span class="refcommon">●</span></span>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">●</span></span><span class="common">i<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">e<span class="refcommon">●</span></span><span class="common">r<span class="refcommon">●</span></span>
|
||||
<ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
dot
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">•</span></span><span class="common">i<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">e<span class="refcommon">•</span></span><span class="common">r<span class="refcommon">•</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>•</rt><rb>i</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>e</rb><rt>•</rt><rb>r</rb><rt>•</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">•</span></span><span class="common">i<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">e<span class="refcommon">•</span></span><span class="common">r<span class="refcommon">•</span></span>
|
||||
<ruby><rb>F</rb><rt>•</rt><rb>i</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>e</rb><rt>•</rt><rb>r</rb><rt>•</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
double-circle
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">◉</span></span><span class="common">i<span class="refcommon">◉</span></span><span class="common">l<span class="refcommon">◉</span></span><span class="common">l<span class="refcommon">◉</span></span><span class="common">e<span class="refcommon">◉</span></span><span class="common">r<span class="refcommon">◉</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>◉</rt><rb>i</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>e</rb><rt>◉</rt><rb>r</rb><rt>◉</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">◉</span></span><span class="common">i<span class="refcommon">◉</span></span><span class="common">l<span class="refcommon">◉</span></span><span class="common">l<span class="refcommon">◉</span></span><span class="common">e<span class="refcommon">◉</span></span><span class="common">r<span class="refcommon">◉</span></span>
|
||||
<ruby><rb>F</rb><rt>◉</rt><rb>i</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>e</rb><rt>◉</rt><rb>r</rb><rt>◉</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
sesame
|
||||
<div class="parent">
|
||||
<div class=" margin">
|
||||
<span class="common">F<span class="refcommon">﹅</span></span><span class="common">i<span class="refcommon">﹅</span></span><span class="common">l<span class="refcommon">﹅</span></span><span class="common">l<span class="refcommon">﹅</span></span><span class="common">e<span class="refcommon">﹅</span></span><span class="common">r<span class="refcommon">﹅</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>﹅</rt><rb>i</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>e</rb><rt>﹅</rt><rb>r</rb><rt>﹅</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">﹅</span></span><span class="common">i<span class="refcommon">﹅</span></span><span class="common">l<span class="refcommon">﹅</span></span><span class="common">l<span class="refcommon">﹅</span></span><span class="common">e<span class="refcommon">﹅</span></span><span class="common">r<span class="refcommon">﹅</span></span>
|
||||
<ruby><rb>F</rb><rt>﹅</rt><rb>i</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>e</rb><rt>﹅</rt><rb>r</rb><rt>﹅</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
triangle
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">▲</span></span><span class="common">i<span class="refcommon">▲</span></span><span class="common">l<span class="refcommon">▲</span></span><span class="common">l<span class="refcommon">▲</span></span><span class="common">e<span class="refcommon">▲</span></span><span class="common">r<span class="refcommon">▲</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>▲</rt><rb>i</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>e</rb><rt>▲</rt><rb>r</rb><rt>▲</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">▲</span></span><span class="common">i<span class="refcommon">▲</span></span><span class="common">l<span class="refcommon">▲</span></span><span class="common">l<span class="refcommon">▲</span></span><span class="common">e<span class="refcommon">▲</span></span><span class="common">r<span class="refcommon">▲</span></span>
|
||||
<ruby><rb>F</rb><rt>▲</rt><rb>i</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>e</rb><rt>▲</rt><rb>r</rb><rt>▲</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<p class="fontChange" style="display: block;">
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and apply it.
|
||||
<button type="button" onclick="setFontFamily()">
|
||||
Apply
|
||||
</button>
|
||||
</p>
|
||||
<script type="text/javascript">
|
||||
if (document.getElementById) {
|
||||
document.getElementById('fontChange').style.display = 'block'
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,74 +5,29 @@
|
|||
<title>CSS Test: text-emphasis-style - string - basic cases Reftest Reference</title>
|
||||
<link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.margin
|
||||
{
|
||||
margin: 18px 0 0;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
border: solid 1px gray;
|
||||
font-size: 2em;
|
||||
font: 1.5em monospace;
|
||||
width: 10em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0em;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
}
|
||||
]]></style>
|
||||
<script type="text/javascript">
|
||||
// <![CDATA[
|
||||
// Set Font Family to 'IPAMincho'
|
||||
function setFontFamily () {
|
||||
var fontName = 'IPAMincho';
|
||||
var divs = document.getElementsByTagName('div');
|
||||
var i = 0;
|
||||
var div;
|
||||
while (i < divs.length) {
|
||||
div = divs.item(i);
|
||||
if (div.className == 'parent') {
|
||||
div.style.fontFamily = fontName;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
}
|
||||
// ]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>Test passes if a pair of upper and lower "Filler Text" in the square box is identical.</p>
|
||||
string
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">!</span></span><span class="common">i<span class="refcommon">!</span></span><span class="common">l<span class="refcommon">!</span></span><span class="common">l<span class="refcommon">!</span></span><span class="common">e<span class="refcommon">!</span></span><span class="common">r<span class="refcommon">!</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>!</rt><rb>i</rb><rt>!</rt><rb>l</rb><rt>!</rt><rb>l</rb><rt>!</rt><rb>e</rb><rt>!</rt><rb>r</rb><rt>!</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">!</span></span><span class="common">i<span class="refcommon">!</span></span><span class="common">l<span class="refcommon">!</span></span><span class="common">l<span class="refcommon">!</span></span><span class="common">e<span class="refcommon">!</span></span><span class="common">r<span class="refcommon">!</span></span>
|
||||
<ruby><rb>F</rb><rt>!</rt><rb>i</rb><rt>!</rt><rb>l</rb><rt>!</rt><rb>l</rb><rt>!</rt><rb>e</rb><rt>!</rt><rb>r</rb><rt>!</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<p class="fontChange" style="display: block;">
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and apply it.
|
||||
<button type="button" onclick="setFontFamily()">
|
||||
Apply
|
||||
</button>
|
||||
</p>
|
||||
<script type="text/javascript">
|
||||
if (document.getElementById) {
|
||||
document.getElementById('fontChange').style.display = 'block'
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ span{
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if "open dot" is above every single character of "Text sample".</p>
|
||||
<p>Test passes if "filled dot" is above every single character of "Text sample".</p>
|
||||
<div><span>Text</span> <span>sample</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Decoration Test - text-emphasis</title>
|
||||
<link rel="author" title="TestTWF Tokyo Meetup (Unofficial)" href="mailto:tomoyuki.labs@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-emphasis-style-property" title="3.1. Emphasis Mark Style: the ‘text-emphasis-style’ property">
|
||||
<link rel="match" href="reference/text-emphasis-style-006.html">
|
||||
<meta name="assert" content="Test checks 'text-emphasis-style: filled dot'">
|
||||
<style>
|
||||
span {
|
||||
text-emphasis-style: filled dot;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a filled dot is above every single character of "Text Sample".</p>
|
||||
<div><span>Text</span> <span>sample</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -8,9 +8,12 @@
|
|||
<link rel="match" href="reference/text-emphasis-style-007.html">
|
||||
<meta name="assert" content="Test checks 'text-emphasis-style: filled circle'">
|
||||
<style>
|
||||
span {
|
||||
text-emphasis-style: filled circle;
|
||||
}
|
||||
div {
|
||||
font: 1.5em monospace;
|
||||
}
|
||||
span {
|
||||
text-emphasis-style: filled circle;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if "◉" is above every single character of "Text sample"</p>
|
||||
<div>
|
||||
<div style="font: 1.5em monospace">
|
||||
<span>Text sample</span>.
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -8,13 +8,16 @@
|
|||
title="3.1 Emphasis Mark Style: the text-emphasis-style property">
|
||||
<link rel="match" href="reference/text-emphasis-style-010-ref.html">
|
||||
<style>
|
||||
div {
|
||||
font: 1.5em monospace;
|
||||
}
|
||||
span {
|
||||
text-emphasis-style: filled sesame;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if ﹅ is aborve every single character of"Text sample".</p>
|
||||
<p>Test passes if ﹅ is above every single character of "Text sample".</p>
|
||||
<div><span>Text</span> <span>sample</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
<title>CSS Text Decoration Test - text-emphasis</title>
|
||||
<link rel="author" title="Fuyuko Ikeguchi" href="mailto:fuyuko.ikeguchi@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-emphasis-style-property">
|
||||
<meta name="assert" content="Test checks that [explanation of what you're trying to test].">
|
||||
<meta name="assert" content="Test checks that 'text-emphasis-style: dot' renders as 'filled dot'.">
|
||||
<link rel="match" href="reference/text-emphasis-style-002-ref.html">
|
||||
<style>
|
||||
.test {
|
||||
text-emphasis-style: dot;
|
||||
|
|
@ -13,7 +14,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the small dot appears above "Text sample".</p>
|
||||
<p>Test passes if "filled dot" is above every single character of "Text sample".</p>
|
||||
<div><span class="test">Text</span> <span class="test">sample</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,12 @@
|
|||
<link rel="match" href="reference/text-emphasis-style-021-ref.html">
|
||||
<meta name="assert" content="This test checks 'text-emphasis-style:string'.">
|
||||
<style>
|
||||
span {
|
||||
div {
|
||||
font: 1.5em monospace;
|
||||
}
|
||||
span {
|
||||
text-emphasis-style: '^';
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,32 +4,21 @@
|
|||
<head>
|
||||
<title>CSS Test: text-emphasis-style - filled - basic cases</title>
|
||||
<link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" />
|
||||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com" />
|
||||
<link rel="help" title="CSS Text Level 3: 11.2.1. Emphasis Mark Style: the ‘text-emphasis-style’ property" href="http://www.w3.org/TR/css-text-decor-3/#text-emphasis-style-property" />
|
||||
<link rel="match" href="reference/text-emphasis-style-filled-001-ref.xht"/>
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="This property applies emphasis marks to the element's text. " />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
border: solid 1px gray;
|
||||
font-size: 2em;
|
||||
font: 1.5em monospace;
|
||||
width: 10em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0em;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
}
|
||||
#test1
|
||||
{
|
||||
text-emphasis-style: filled;
|
||||
text-emphasis-style: filled; /* missing shape computes to 'circle' */
|
||||
}
|
||||
#test2
|
||||
{
|
||||
|
|
@ -52,24 +41,6 @@
|
|||
text-emphasis-style: filled triangle;
|
||||
}
|
||||
]]></style>
|
||||
<script type="text/javascript">
|
||||
// <![CDATA[
|
||||
// Set Font Family to 'IPAMincho'
|
||||
function setFontFamily () {
|
||||
var fontName = 'IPAMincho';
|
||||
var divs = document.getElementsByTagName('div');
|
||||
var i = 0;
|
||||
var div;
|
||||
while (i < divs.length) {
|
||||
div = divs.item(i);
|
||||
if (div.className == 'parent') {
|
||||
div.style.fontFamily = fontName;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
}
|
||||
// ]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
|
|
@ -77,9 +48,8 @@
|
|||
filled
|
||||
<div class="parent">
|
||||
<div><span id="test1">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">•</span></span><span class="common">i<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">e<span class="refcommon">•</span></span><span class="common">r<span class="refcommon">•</span></span>
|
||||
<ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,9 +57,8 @@
|
|||
filled circle
|
||||
<div class="parent">
|
||||
<div><span id="test2">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">●</span></span><span class="common">i<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">e<span class="refcommon">●</span></span><span class="common">r<span class="refcommon">●</span></span>
|
||||
<ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -97,9 +66,8 @@
|
|||
filled dot
|
||||
<div class="parent">
|
||||
<div><span id="test3">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">•</span></span><span class="common">i<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">e<span class="refcommon">•</span></span><span class="common">r<span class="refcommon">•</span></span>
|
||||
<ruby><rb>F</rb><rt>•</rt><rb>i</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>e</rb><rt>•</rt><rb>r</rb><rt>•</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -107,9 +75,8 @@
|
|||
filled double-circle
|
||||
<div class="parent">
|
||||
<div><span id="test4">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">◉</span></span><span class="common">i<span class="refcommon">◉</span></span><span class="common">l<span class="refcommon">◉</span></span><span class="common">l<span class="refcommon">◉</span></span><span class="common">e<span class="refcommon">◉</span></span><span class="common">r<span class="refcommon">◉</span></span>
|
||||
<ruby><rb>F</rb><rt>◉</rt><rb>i</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>e</rb><rt>◉</rt><rb>r</rb><rt>◉</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -117,33 +84,20 @@
|
|||
filled sesame
|
||||
<div class="parent">
|
||||
<div><span id="test5">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">﹅</span></span><span class="common">i<span class="refcommon">﹅</span></span><span class="common">l<span class="refcommon">﹅</span></span><span class="common">l<span class="refcommon">﹅</span></span><span class="common">e<span class="refcommon">﹅</span></span><span class="common">r<span class="refcommon">﹅</span></span>
|
||||
Text
|
||||
<ruby><rb>F</rb><rt>﹅</rt><rb>i</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>e</rb><rt>﹅</rt><rb>r</rb><rt>﹅</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
filled triangle
|
||||
<div class="parent">
|
||||
<div><span id="test6">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">▲</span></span><span class="common">i<span class="refcommon">▲</span></span><span class="common">l<span class="refcommon">▲</span></span><span class="common">l<span class="refcommon">▲</span></span><span class="common">e<span class="refcommon">▲</span></span><span class="common">r<span class="refcommon">▲</span></span>
|
||||
Text
|
||||
<ruby><rb>F</rb><rt>▲</rt><rb>i</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>e</rb><rt>▲</rt><rb>r</rb><rt>▲</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<p class="fontChange" style="display: block;">
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and apply it.
|
||||
<button type="button" onclick="setFontFamily()">
|
||||
Apply
|
||||
</button>
|
||||
</p>
|
||||
<script type="text/javascript">
|
||||
if (document.getElementById) {
|
||||
document.getElementById('fontChange').style.display = 'block'
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -20,24 +20,6 @@
|
|||
text-emphasis-style: none;
|
||||
}
|
||||
]]></style>
|
||||
<script type="text/javascript">
|
||||
// <![CDATA[
|
||||
// Set Font Family to 'IPAMincho'
|
||||
function setFontFamily () {
|
||||
var fontName = 'IPAMincho';
|
||||
var divs = document.getElementsByTagName('div');
|
||||
var i = 0;
|
||||
var div;
|
||||
while (i < divs.length) {
|
||||
div = divs.item(i);
|
||||
if (div.className == 'parent') {
|
||||
div.style.fontFamily = fontName;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
}
|
||||
// ]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
|
|
@ -48,17 +30,6 @@
|
|||
<br />
|
||||
<div>Filler Text</div>
|
||||
</div>
|
||||
<p class="fontChange" style="display: block;">
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and apply it.
|
||||
<button type="button" onclick="setFontFamily()">
|
||||
Apply
|
||||
</button>
|
||||
</p>
|
||||
<script type="text/javascript">
|
||||
if (document.getElementById) {
|
||||
document.getElementById('fontChange').style.display = 'block'
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,29 +4,18 @@
|
|||
<head>
|
||||
<title>CSS Test: text-emphasis-style - open - basic cases</title>
|
||||
<link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" />
|
||||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com" />
|
||||
<link rel="help" title="CSS Text Level 3: 11.2.1. Emphasis Mark Style: the ‘text-emphasis-style’ property" href="http://www.w3.org/TR/css-text-decor-3/#text-emphasis-style-property" />
|
||||
<link rel="match" href="reference/text-emphasis-style-open-001-ref.xht"/>
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="This property applies emphasis marks to the element's text. " />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
border: solid 1px gray;
|
||||
font-size: 2em;
|
||||
font: 1.5em monospace;
|
||||
width: 10em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0em;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
}
|
||||
#test1
|
||||
{
|
||||
text-emphasis-style: open;
|
||||
|
|
@ -52,24 +41,6 @@
|
|||
text-emphasis-style: open triangle;
|
||||
}
|
||||
]]></style>
|
||||
<script type="text/javascript">
|
||||
// <![CDATA[
|
||||
// Set Font Family to 'IPAMincho'
|
||||
function setFontFamily () {
|
||||
var fontName = 'IPAMincho';
|
||||
var divs = document.getElementsByTagName('div');
|
||||
var i = 0;
|
||||
var div;
|
||||
while (i < divs.length) {
|
||||
div = divs.item(i);
|
||||
if (div.className == 'parent') {
|
||||
div.style.fontFamily = fontName;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
}
|
||||
// ]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
|
|
@ -77,9 +48,8 @@
|
|||
open
|
||||
<div class="parent">
|
||||
<div><span id="test1">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">◦</span></span><span class="common">i<span class="refcommon">◦</span></span><span class="common">l<span class="refcommon">◦</span></span><span class="common">l<span class="refcommon">◦</span></span><span class="common">e<span class="refcommon">◦</span></span><span class="common">r<span class="refcommon">◦</span></span>
|
||||
<ruby><rb>F</rb><rt>○</rt><rb>i</rb><rt>○</rt><rb>l</rb><rt>○</rt><rb>l</rb><rt>○</rt><rb>e</rb><rt>○</rt><rb>r</rb><rt>○</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,9 +57,8 @@
|
|||
open circle
|
||||
<div class="parent">
|
||||
<div><span id="test2">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">○</span></span><span class="common">i<span class="refcommon">○</span></span><span class="common">l<span class="refcommon">○</span></span><span class="common">l<span class="refcommon">○</span></span><span class="common">e<span class="refcommon">○</span></span><span class="common">r<span class="refcommon">○</span></span>
|
||||
<ruby><rb>F</rb><rt>○</rt><rb>i</rb><rt>○</rt><rb>l</rb><rt>○</rt><rb>l</rb><rt>○</rt><rb>e</rb><rt>○</rt><rb>r</rb><rt>○</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -97,9 +66,8 @@
|
|||
open dot
|
||||
<div class="parent">
|
||||
<div><span id="test3">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">◦</span></span><span class="common">i<span class="refcommon">◦</span></span><span class="common">l<span class="refcommon">◦</span></span><span class="common">l<span class="refcommon">◦</span></span><span class="common">e<span class="refcommon">◦</span></span><span class="common">r<span class="refcommon">◦</span></span>
|
||||
<ruby><rb>F</rb><rt>◦</rt><rb>i</rb><rt>◦</rt><rb>l</rb><rt>◦</rt><rb>l</rb><rt>◦</rt><rb>e</rb><rt>◦</rt><rb>r</rb><rt>◦</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -107,9 +75,8 @@
|
|||
open double-circle
|
||||
<div class="parent">
|
||||
<div><span id="test4">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">◎</span></span><span class="common">i<span class="refcommon">◎</span></span><span class="common">l<span class="refcommon">◎</span></span><span class="common">l<span class="refcommon">◎</span></span><span class="common">e<span class="refcommon">◎</span></span><span class="common">r<span class="refcommon">◎</span></span>
|
||||
<ruby><rb>F</rb><rt>◎</rt><rb>i</rb><rt>◎</rt><rb>l</rb><rt>◎</rt><rb>l</rb><rt>◎</rt><rb>e</rb><rt>◎</rt><rb>r</rb><rt>◎</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -117,9 +84,8 @@
|
|||
open sesame
|
||||
<div class="parent">
|
||||
<div><span id="test5">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">﹆</span></span><span class="common">i<span class="refcommon">﹆</span></span><span class="common">l<span class="refcommon">﹆</span></span><span class="common">l<span class="refcommon">﹆</span></span><span class="common">e<span class="refcommon">﹆</span></span><span class="common">r<span class="refcommon">﹆</span></span>
|
||||
<ruby><rb>F</rb><rt>﹆</rt><rb>i</rb><rt>﹆</rt><rb>l</rb><rt>﹆</rt><rb>l</rb><rt>﹆</rt><rb>e</rb><rt>﹆</rt><rb>r</rb><rt>﹆</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -127,23 +93,11 @@
|
|||
open triangle
|
||||
<div class="parent">
|
||||
<div><span id="test6">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">△</span></span><span class="common">i<span class="refcommon">△</span></span><span class="common">l<span class="refcommon">△</span></span><span class="common">l<span class="refcommon">△</span></span><span class="common">e<span class="refcommon">△</span></span><span class="common">r<span class="refcommon">△</span></span>
|
||||
<ruby><rb>F</rb><rt>△</rt><rb>i</rb><rt>△</rt><rb>l</rb><rt>△</rt><rb>l</rb><rt>△</rt><rb>e</rb><rt>△</rt><rb>r</rb><rt>△</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<p class="fontChange" style="display: block;">
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and apply it.
|
||||
<button type="button" onclick="setFontFamily()">
|
||||
Apply
|
||||
</button>
|
||||
</p>
|
||||
<script type="text/javascript">
|
||||
if (document.getElementById) {
|
||||
document.getElementById('fontChange').style.display = 'block'
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,29 +4,18 @@
|
|||
<head>
|
||||
<title>CSS Test: text-emphasis-style - shape - basic cases</title>
|
||||
<link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" />
|
||||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com" />
|
||||
<link rel="help" title="CSS Text Level 3: 11.2.1. Emphasis Mark Style: the ‘text-emphasis-style’ property" href="http://www.w3.org/TR/css-text-decor-3/#text-emphasis-style-property" />
|
||||
<link rel="match" href="reference/text-emphasis-style-shape-001-ref.xht"/>
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="This property applies emphasis marks to the element's text. " />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
border: solid 1px gray;
|
||||
font-size: 2em;
|
||||
font: 1.5em monospace;
|
||||
width: 10em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0em;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
}
|
||||
#test1
|
||||
{
|
||||
text-emphasis-style: circle;
|
||||
|
|
@ -48,24 +37,6 @@
|
|||
text-emphasis-style: triangle;
|
||||
}
|
||||
]]></style>
|
||||
<script type="text/javascript">
|
||||
// <![CDATA[
|
||||
// Set Font Family to 'IPAMincho'
|
||||
function setFontFamily () {
|
||||
var fontName = 'IPAMincho';
|
||||
var divs = document.getElementsByTagName('div');
|
||||
var i = 0;
|
||||
var div;
|
||||
while (i < divs.length) {
|
||||
div = divs.item(i);
|
||||
if (div.className == 'parent') {
|
||||
div.style.fontFamily = fontName;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
}
|
||||
// ]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
|
|
@ -73,9 +44,8 @@
|
|||
circle
|
||||
<div class="parent">
|
||||
<div><span id="test1">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">●</span></span><span class="common">i<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">e<span class="refcommon">●</span></span><span class="common">r<span class="refcommon">●</span></span>
|
||||
<ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -83,9 +53,8 @@
|
|||
dot
|
||||
<div class="parent">
|
||||
<div><span id="test2">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">•</span></span><span class="common">i<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">l<span class="refcommon">•</span></span><span class="common">e<span class="refcommon">•</span></span><span class="common">r<span class="refcommon">•</span></span>
|
||||
<ruby><rb>F</rb><rt>•</rt><rb>i</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>e</rb><rt>•</rt><rb>r</rb><rt>•</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -93,9 +62,8 @@
|
|||
double-circle
|
||||
<div class="parent">
|
||||
<div><span id="test3">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">◉</span></span><span class="common">i<span class="refcommon">◉</span></span><span class="common">l<span class="refcommon">◉</span></span><span class="common">l<span class="refcommon">◉</span></span><span class="common">e<span class="refcommon">◉</span></span><span class="common">r<span class="refcommon">◉</span></span>
|
||||
<ruby><rb>F</rb><rt>◉</rt><rb>i</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>e</rb><rt>◉</rt><rb>r</rb><rt>◉</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -103,9 +71,8 @@
|
|||
sesame
|
||||
<div class="parent">
|
||||
<div><span id="test4">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">﹅</span></span><span class="common">i<span class="refcommon">﹅</span></span><span class="common">l<span class="refcommon">﹅</span></span><span class="common">l<span class="refcommon">﹅</span></span><span class="common">e<span class="refcommon">﹅</span></span><span class="common">r<span class="refcommon">﹅</span></span>
|
||||
<ruby><rb>F</rb><rt>﹅</rt><rb>i</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>e</rb><rt>﹅</rt><rb>r</rb><rt>﹅</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -113,23 +80,11 @@
|
|||
triangle
|
||||
<div class="parent">
|
||||
<div><span id="test5">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">▲</span></span><span class="common">i<span class="refcommon">▲</span></span><span class="common">l<span class="refcommon">▲</span></span><span class="common">l<span class="refcommon">▲</span></span><span class="common">e<span class="refcommon">▲</span></span><span class="common">r<span class="refcommon">▲</span></span>
|
||||
<ruby><rb>F</rb><rt>▲</rt><rb>i</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>e</rb><rt>▲</rt><rb>r</rb><rt>▲</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<p class="fontChange" style="display: block;">
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and apply it.
|
||||
<button type="button" onclick="setFontFamily()">
|
||||
Apply
|
||||
</button>
|
||||
</p>
|
||||
<script type="text/javascript">
|
||||
if (document.getElementById) {
|
||||
document.getElementById('fontChange').style.display = 'block'
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,52 +4,23 @@
|
|||
<head>
|
||||
<title>CSS Test: text-emphasis-style - string - basic cases</title>
|
||||
<link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" />
|
||||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com" />
|
||||
<link rel="help" title="CSS Text Level 3: 11.2.1. Emphasis Mark Style: the ‘text-emphasis-style’ property" href="http://www.w3.org/TR/css-text-decor-3/#text-emphasis-style-property" />
|
||||
<link rel="match" href="reference/text-emphasis-style-string-001-ref.xht"/>
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="This property applies emphasis marks to the element's text. " />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
border: solid 1px gray;
|
||||
font-size: 2em;
|
||||
font: 1.5em monospace;
|
||||
width: 10em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0em;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
}
|
||||
#test
|
||||
{
|
||||
text-emphasis-style: "!";
|
||||
}
|
||||
]]></style>
|
||||
<script type="text/javascript">
|
||||
// <![CDATA[
|
||||
// Set Font Family to 'IPAMincho'
|
||||
function setFontFamily () {
|
||||
var fontName = 'IPAMincho';
|
||||
var divs = document.getElementsByTagName('div');
|
||||
var i = 0;
|
||||
var div;
|
||||
while (i < divs.length) {
|
||||
div = divs.item(i);
|
||||
if (div.className == 'parent') {
|
||||
div.style.fontFamily = fontName;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
}
|
||||
// ]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
|
|
@ -58,22 +29,11 @@
|
|||
<div class="parent">
|
||||
<div><span id="test">Filler</span> Text</div>
|
||||
<br />
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">!</span></span><span class="common">i<span class="refcommon">!</span></span><span class="common">l<span class="refcommon">!</span></span><span class="common">l<span class="refcommon">!</span></span><span class="common">e<span class="refcommon">!</span></span><span class="common">r<span class="refcommon">!</span></span>
|
||||
<div>
|
||||
<ruby><rb>F</rb><rt>!</rt><rb>i</rb><rt>!</rt><rb>l</rb><rt>!</rt><rb>l</rb><rt>!</rt><rb>e</rb><rt>!</rt><rb>r</rb><rt>!</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<p class="fontChange" style="display: block;">
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and apply it.
|
||||
<button type="button" onclick="setFontFamily()">
|
||||
Apply
|
||||
</button>
|
||||
</p>
|
||||
<script type="text/javascript">
|
||||
if (document.getElementById) {
|
||||
document.getElementById('fontChange').style.display = 'block'
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче