зеркало из https://github.com/mozilla/gecko-dev.git
Backed out 4 changesets (bug 1729450) for wr failures on text-emphasis-style. CLOSED TREE
Backed out changeset 798e26d71dfc (bug 1729450) Backed out changeset 29f3f16dcd31 (bug 1729450) Backed out changeset ed14cda4f033 (bug 1729450) Backed out changeset e3ee29b05f7b (bug 1729450)
This commit is contained in:
Cosmin Sabou
Родитель
a9849f5f68
Коммит
ea371f72db
|
|
@ -113,7 +113,7 @@ fuzzy-if(skiaContent,0-4,0-2) == underline-select-1.html underline-select-1-ref.
|
|||
== vertical-mode-decorations-1.html vertical-mode-decorations-1-ref.html
|
||||
fuzzy-if(Android,0-238,0-36) == vertical-mode-decorations-2.html vertical-mode-decorations-2-ref.html
|
||||
!= 1415214.html 1415214-notref.html
|
||||
skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) HTTP(..) == skip-ink-multiline-position.html skip-ink-multiline-position-ref.html # not reliable on Win7 (bug 1499459)
|
||||
skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) test-pref(layout.css.text-underline-offset.enabled,true) HTTP(..) == skip-ink-multiline-position.html skip-ink-multiline-position-ref.html # not reliable on Win7 (bug 1499459)
|
||||
== skip-ink-vertical-align.html skip-ink-vertical-align-ref.html
|
||||
!= skip-ink-vertical-align-2.html skip-ink-vertical-align-2-notref.html
|
||||
fuzzy(0-94,0-4) == skip-ink-cjk-1.html skip-ink-cjk-1-ref.html
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
[text-decoration-skip-ink-valid.html]
|
||||
prefs: [layout.css.text-decoration-skip-ink.enabled:true]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-underline-position-computed.html]
|
||||
prefs: [layout.css.text-underline-position.enabled:true]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-underline-position-valid.html]
|
||||
prefs: [layout.css.text-underline-position.enabled:true]
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
[text-decoration-underline-position-vertical-ja.html]
|
||||
prefs: [layout.css.text-underline-position.enabled:true]
|
||||
expected:
|
||||
if (os == "android"): PASS
|
||||
FAIL
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
[text-decoration-underline-position-vertical.html]
|
||||
prefs: [layout.css.text-underline-position.enabled:true]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-emphasis-color-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-emphasis-position-above-left-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-emphasis-position-above-left-002.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-emphasis-position-above-right-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-emphasis-position-above-right-002.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-emphasis-position-below-left-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-emphasis-position-below-left-002.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-emphasis-position-below-right-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-emphasis-position-below-right-002.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +1,2 @@
|
|||
[text-emphasis-style-002.html]
|
||||
fuzzy:
|
||||
if (os == "mac"): maxDifference=70;totalPixels=0-11
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
[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
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-emphasis-style-007.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-emphasis-style-008.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +1,2 @@
|
|||
[text-emphasis-style-010.html]
|
||||
fuzzy:
|
||||
if (os == "mac"): maxDifference=68;totalPixels=0-24
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
[text-emphasis-style-012.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[text-emphasis-style-016.html]
|
||||
fuzzy:
|
||||
if (os == "mac"): maxDifference=70;totalPixels=0-11
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
[text-emphasis-style-021.html]
|
||||
expected:
|
||||
FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-emphasis-style-filled-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-emphasis-style-open-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-emphasis-style-shape-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-emphasis-style-string-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-underline-offset-001.html]
|
||||
prefs: [layout.css.text-underline-offset.enabled:true]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-underline-offset-002.html]
|
||||
prefs: [layout.css.text-underline-offset.enabled:true]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-underline-offset-computed.html]
|
||||
prefs: [layout.css.text-underline-offset.enabled:true]
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
[text-underline-offset-initial.html]
|
||||
prefs: [layout.css.text-underline-offset.enabled:true]
|
||||
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-underline-offset-invalid.html]
|
||||
prefs: [layout.css.text-underline-offset.enabled:true]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-underline-offset-scroll-001.html]
|
||||
prefs: [layout.css.text-underline-offset.enabled:true]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-underline-offset-valid.html]
|
||||
prefs: [layout.css.text-underline-offset.enabled:true]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-underline-offset-vertical-001.html]
|
||||
prefs: [layout.css.text-underline-offset.enabled:true]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-underline-offset-vertical-002.html]
|
||||
prefs: [layout.css.text-underline-offset.enabled:true]
|
||||
|
|
@ -5,6 +5,11 @@
|
|||
<title>CSS Test: text-emphasis - color - 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: 0.6em 0 0;
|
||||
|
|
@ -12,26 +17,51 @@
|
|||
.parent
|
||||
{
|
||||
border: solid 1px gray;
|
||||
font: 1.5em monospace;
|
||||
font-size: 2em;
|
||||
width: 10em;
|
||||
}
|
||||
.ref1 rt
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0em;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
}
|
||||
.black
|
||||
{
|
||||
color: black;
|
||||
}
|
||||
.ref2 rt
|
||||
.blue
|
||||
{
|
||||
color: blue;
|
||||
}
|
||||
.ref3 rt
|
||||
.green
|
||||
{
|
||||
color: green;
|
||||
}
|
||||
.ref4 rt
|
||||
.red
|
||||
{
|
||||
color: red;
|
||||
}
|
||||
]]></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>
|
||||
|
|
@ -39,11 +69,12 @@
|
|||
black
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<ruby class="ref1"><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>
|
||||
<span class="common">F<span class="black refcommon">●</span></span><span class="common">i<span class="black refcommon">●</span></span><span class="common">l<span class="black refcommon">●</span></span><span class="common">l<span class="black refcommon">●</span></span><span class="common">e<span class="black refcommon">●</span></span><span class="common">r<span class="black refcommon">●</span></span>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<ruby class="ref1"><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>
|
||||
<span class="common">F<span class="black refcommon">●</span></span><span class="common">i<span class="black refcommon">●</span></span><span class="common">l<span class="black refcommon">●</span></span><span class="common">l<span class="black refcommon">●</span></span><span class="common">e<span class="black refcommon">●</span></span><span class="common">r<span class="black refcommon">●</span></span>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -51,11 +82,12 @@
|
|||
blue
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<ruby class="ref2"><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>
|
||||
<span class="common">F<span class="blue refcommon">●</span></span><span class="common">i<span class="blue refcommon">●</span></span><span class="common">l<span class="blue refcommon">●</span></span><span class="common">l<span class="blue refcommon">●</span></span><span class="common">e<span class="blue refcommon">●</span></span><span class="common">r<span class="blue refcommon">●</span></span>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<ruby class="ref2"><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>
|
||||
<span class="common">F<span class="blue refcommon">●</span></span><span class="common">i<span class="blue refcommon">●</span></span><span class="common">l<span class="blue refcommon">●</span></span><span class="common">l<span class="blue refcommon">●</span></span><span class="common">e<span class="blue refcommon">●</span></span><span class="common">r<span class="blue refcommon">●</span></span>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -63,11 +95,12 @@
|
|||
green
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<ruby class="ref3"><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>
|
||||
<span class="common">F<span class="green refcommon">●</span></span><span class="common">i<span class="green refcommon">●</span></span><span class="common">l<span class="green refcommon">●</span></span><span class="common">l<span class="green refcommon">●</span></span><span class="common">e<span class="green refcommon">●</span></span><span class="common">r<span class="green refcommon">●</span></span>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<ruby class="ref3"><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>
|
||||
<span class="common">F<span class="green refcommon">●</span></span><span class="common">i<span class="green refcommon">●</span></span><span class="common">l<span class="green refcommon">●</span></span><span class="common">l<span class="green refcommon">●</span></span><span class="common">e<span class="green refcommon">●</span></span><span class="common">r<span class="green refcommon">●</span></span>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -75,11 +108,12 @@
|
|||
red
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<ruby class="ref4"><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>
|
||||
<span class="common">F<span class="red refcommon">●</span></span><span class="common">i<span class="red refcommon">●</span></span><span class="common">l<span class="red refcommon">●</span></span><span class="common">l<span class="red refcommon">●</span></span><span class="common">e<span class="red refcommon">●</span></span><span class="common">r<span class="red refcommon">●</span></span>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<ruby class="ref4"><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>
|
||||
<span class="common">F<span class="red refcommon">●</span></span><span class="common">i<span class="red refcommon">●</span></span><span class="common">l<span class="red refcommon">●</span></span><span class="common">l<span class="red refcommon">●</span></span><span class="common">e<span class="red refcommon">●</span></span><span class="common">r<span class="red refcommon">●</span></span>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,14 +121,26 @@
|
|||
current-color
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,19 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - over right - basic cases Reftest Reference</title>
|
||||
<title>CSS Test: text-emphasis-position - above left - 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" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.margin
|
||||
{
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
|
|
@ -15,8 +23,15 @@
|
|||
font: 20px/1em ahem;
|
||||
width: 6em;
|
||||
}
|
||||
ruby {
|
||||
ruby-position: over;
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0.6em;
|
||||
position: absolute;
|
||||
}
|
||||
.top
|
||||
{
|
||||
top: -1.4em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
|
@ -25,16 +40,16 @@
|
|||
<p>Test passes if a pair of upper and lower block in the square box is identical.</p>
|
||||
<p>horizontal</p>
|
||||
<div class="parent">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
<div class="margin">
|
||||
<span class="common">a<span class="refcommon top">●</span></span><span class="common">b<span class="refcommon top">●</span></span><span class="common">c<span class="refcommon top">●</span></span>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="parent">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
<div class="margin">
|
||||
<span class="common">a<span class="refcommon top">●</span></span><span class="common">b<span class="refcommon top">●</span></span><span class="common">c<span class="refcommon top">●</span></span>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - above left - basic cases Reftest Reference</title>
|
||||
<link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.displayarea
|
||||
{
|
||||
border: solid 1px gray;
|
||||
padding: 10px;
|
||||
width: 10em;
|
||||
}
|
||||
.floatright
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
border: solid 1px gray;
|
||||
color: blue;
|
||||
font: 20px/1em ahem;
|
||||
height: 6em;
|
||||
width: 2em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 1.1em;
|
||||
position: absolute;
|
||||
top: 0.1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>Test passes if a pair of left and right block in the square box is identical.</p>
|
||||
<p>vertical</p>
|
||||
<div class="displayarea">
|
||||
<div class="parent floatright">
|
||||
<span class="common"> a<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> b<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> c<span class="refcommon">●</span></span><br />
|
||||
<br />
|
||||
<span class="common"> d</span><br />
|
||||
<span class="common"> e</span><br />
|
||||
</div>
|
||||
<div class="parent">
|
||||
<span class="common"> a<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> b<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> c<span class="refcommon">●</span></span><br />
|
||||
<br />
|
||||
<span class="common"> d</span><br />
|
||||
<span class="common"> e</span><br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,11 +2,19 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - over left - basic cases Reftest Reference</title>
|
||||
<title>CSS Test: text-emphasis-position - above right - 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" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.margin
|
||||
{
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
|
|
@ -15,8 +23,15 @@
|
|||
font: 20px/1em ahem;
|
||||
width: 6em;
|
||||
}
|
||||
ruby {
|
||||
ruby-position: over;
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0.6em;
|
||||
position: absolute;
|
||||
}
|
||||
.top
|
||||
{
|
||||
top: -1.4em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
|
@ -25,16 +40,16 @@
|
|||
<p>Test passes if a pair of upper and lower block in the square box is identical.</p>
|
||||
<p>horizontal</p>
|
||||
<div class="parent">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
<div class="margin">
|
||||
<span class="common">a<span class="refcommon top">●</span></span><span class="common">b<span class="refcommon top">●</span></span><span class="common">c<span class="refcommon top">●</span></span>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="parent">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
<div class="margin">
|
||||
<span class="common">a<span class="refcommon top">●</span></span><span class="common">b<span class="refcommon top">●</span></span><span class="common">c<span class="refcommon top">●</span></span>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - above right - basic cases Reftest Reference</title>
|
||||
<link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
left: -0.5em;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.displayarea
|
||||
{
|
||||
border: solid 1px gray;
|
||||
padding: 10px;
|
||||
width: 10em;
|
||||
}
|
||||
.floatright
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
border: solid 1px gray;
|
||||
color: blue;
|
||||
font: 20px/1em ahem;
|
||||
height: 6em;
|
||||
width: 2em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 4.1em;
|
||||
position: absolute;
|
||||
top: 0.1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>Test passes if a pair of left and right block in the square box is identical.</p>
|
||||
<p>vertical</p>
|
||||
<div class="displayarea">
|
||||
<div class="parent floatright">
|
||||
<span class="common"> a<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> b<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> c<span class="refcommon">●</span></span><br />
|
||||
<br />
|
||||
<span class="common"> d</span><br />
|
||||
<span class="common"> e</span><br />
|
||||
</div>
|
||||
<div class="parent">
|
||||
<span class="common"> a<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> b<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> c<span class="refcommon">●</span></span><br />
|
||||
<br />
|
||||
<span class="common"> d</span><br />
|
||||
<span class="common"> e</span><br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,11 +2,15 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - under left - basic cases Reftest Reference</title>
|
||||
<title>CSS Test: text-emphasis-position - below left - 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" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
|
|
@ -14,10 +18,16 @@
|
|||
color: blue;
|
||||
font: 20px/1em ahem;
|
||||
width: 6em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
ruby {
|
||||
ruby-position: under;
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0.6em;
|
||||
position: absolute;
|
||||
}
|
||||
.top
|
||||
{
|
||||
top: 1.6em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
|
@ -27,7 +37,7 @@
|
|||
<p>horizontal</p>
|
||||
<div class="parent">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
<span class="common">a<span class="refcommon top">●</span></span><span class="common">b<span class="refcommon top">●</span></span><span class="common">c<span class="refcommon top">●</span></span>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
|
|
@ -35,7 +45,7 @@
|
|||
<br />
|
||||
<div class="parent">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
<span class="common">a<span class="refcommon top">●</span></span><span class="common">b<span class="refcommon top">●</span></span><span class="common">c<span class="refcommon top">●</span></span>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - below left - basic cases Reftest Reference</title>
|
||||
<link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.displayarea
|
||||
{
|
||||
border: solid 1px gray;
|
||||
padding: 10px;
|
||||
width: 10em;
|
||||
}
|
||||
.floatright
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
border: solid 1px gray;
|
||||
color: blue;
|
||||
font: 20px/1em ahem;
|
||||
height: 6em;
|
||||
width: 2em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 1.1em;
|
||||
position: absolute;
|
||||
top: 0.1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>Test passes if a pair of left and right block in the square box is identical.</p>
|
||||
<p>vertical</p>
|
||||
<div class="displayarea">
|
||||
<div class="parent floatright">
|
||||
<span class="common"> a<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> b<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> c<span class="refcommon">●</span></span><br />
|
||||
<br />
|
||||
<span class="common"> d</span><br />
|
||||
<span class="common"> e</span><br />
|
||||
</div>
|
||||
<div class="parent">
|
||||
<span class="common"> a<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> b<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> c<span class="refcommon">●</span></span><br />
|
||||
<br />
|
||||
<span class="common"> d</span><br />
|
||||
<span class="common"> e</span><br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,11 +2,15 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - under right - basic cases Reftest Reference</title>
|
||||
<title>CSS Test: text-emphasis-position - below right - 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" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
|
|
@ -14,10 +18,16 @@
|
|||
color: blue;
|
||||
font: 20px/1em ahem;
|
||||
width: 6em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
ruby {
|
||||
ruby-position: under;
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0.6em;
|
||||
position: absolute;
|
||||
}
|
||||
.top
|
||||
{
|
||||
top: 1.6em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
|
@ -26,16 +36,16 @@
|
|||
<p>Test passes if a pair of upper and lower block in the square box is identical.</p>
|
||||
<p>horizontal</p>
|
||||
<div class="parent">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
<div class="margin">
|
||||
<span class="common">a<span class="refcommon top">●</span></span><span class="common">b<span class="refcommon top">●</span></span><span class="common">c<span class="refcommon top">●</span></span>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="parent">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
<div class="margin">
|
||||
<span class="common">a<span class="refcommon top">●</span></span><span class="common">b<span class="refcommon top">●</span></span><span class="common">c<span class="refcommon top">●</span></span>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - below right - basic cases Reftest Reference</title>
|
||||
<link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
left: -0.5em;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.displayarea
|
||||
{
|
||||
border: solid 1px gray;
|
||||
padding: 10px;
|
||||
width: 10em;
|
||||
}
|
||||
.floatright
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
border: solid 1px gray;
|
||||
color: blue;
|
||||
font: 20px/1em ahem;
|
||||
height: 6em;
|
||||
width: 2em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 4.1em;
|
||||
position: absolute;
|
||||
top: 0.1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>Test passes if a pair of left and right block in the square box is identical.</p>
|
||||
<p>vertical</p>
|
||||
<div class="displayarea">
|
||||
<div class="parent floatright">
|
||||
<span class="common"> a<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> b<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> c<span class="refcommon">●</span></span><br />
|
||||
<br />
|
||||
<span class="common"> d</span><br />
|
||||
<span class="common"> e</span><br />
|
||||
</div>
|
||||
<div class="parent">
|
||||
<span class="common"> a<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> b<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> c<span class="refcommon">●</span></span><br />
|
||||
<br />
|
||||
<span class="common"> d</span><br />
|
||||
<span class="common"> e</span><br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - over left - 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" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css"><![CDATA[
|
||||
.vertical
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.displayarea
|
||||
{
|
||||
border: solid 1px gray;
|
||||
padding: 10px;
|
||||
width: 10em;
|
||||
}
|
||||
.floatright
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
.ref {
|
||||
ruby-position: under; /* to match emphasis position 'left' */
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
border: solid 1px gray;
|
||||
color: blue;
|
||||
font: 20px/1em ahem;
|
||||
height: 6em;
|
||||
width: 2em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>Test passes if a pair of left and right block in the square box is identical.</p>
|
||||
<p>vertical</p>
|
||||
<div class="displayarea">
|
||||
<div class="parent vertical floatright ref">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parent vertical ref">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - over right - 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" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css"><![CDATA[
|
||||
.vertical
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.displayarea
|
||||
{
|
||||
border: solid 1px gray;
|
||||
padding: 10px;
|
||||
width: 10em;
|
||||
}
|
||||
.floatright
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
.ref {
|
||||
ruby-position: over; /* to match emphasis position 'right' */
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
border: solid 1px gray;
|
||||
color: blue;
|
||||
font: 20px/1em ahem;
|
||||
height: 6em;
|
||||
width: 2em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>Test passes if a pair of left and right block in the square box is identical.</p>
|
||||
<p>vertical</p>
|
||||
<div class="displayarea">
|
||||
<div class="parent vertical floatright ref">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parent vertical ref">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - under left - 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" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css"><![CDATA[
|
||||
.vertical
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.displayarea
|
||||
{
|
||||
border: solid 1px gray;
|
||||
padding: 10px;
|
||||
width: 10em;
|
||||
}
|
||||
.floatright
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
.ref {
|
||||
ruby-position: under; /* to match emphasis position 'left' */
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
border: solid 1px gray;
|
||||
color: blue;
|
||||
font: 20px/1em ahem;
|
||||
height: 6em;
|
||||
width: 2em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>Test passes if a pair of left and right block in the square box is identical.</p>
|
||||
<p>vertical</p>
|
||||
<div class="displayarea">
|
||||
<div class="parent vertical floatright ref">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parent vertical ref">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - under right - 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" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css"><![CDATA[
|
||||
.vertical
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.displayarea
|
||||
{
|
||||
border: solid 1px gray;
|
||||
padding: 10px;
|
||||
width: 10em;
|
||||
}
|
||||
.floatright
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
.ref {
|
||||
ruby-position: over; /* to match emphasis position 'right' */
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
border: solid 1px gray;
|
||||
color: blue;
|
||||
font: 20px/1em ahem;
|
||||
height: 6em;
|
||||
width: 2em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>Test passes if a pair of left and right block in the square box is identical.</p>
|
||||
<p>vertical</p>
|
||||
<div class="displayarea">
|
||||
<div class="parent vertical floatright ref">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<div class="parent vertical ref">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="author" title="Yuuki Furukawa" href="mailto:tenderhearted0407@gmail.com">
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!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,11 +5,6 @@
|
|||
<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,9 +9,8 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if "◉" is above every single character of "Text sample"</p>
|
||||
<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>
|
||||
<span><ruby>Text sample<rt>◉◉◉◉◉◉◉◉◉◉</rt></ruby></span>.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,14 +5,9 @@
|
|||
<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 above every single character of "Text sample".</p>
|
||||
<p>Test passes if ﹅ is aborve 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>a<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>i<rt>◦</rt>m<rt>◦</rt>p<rt>◦</rt>l<rt>◦</rt>e<rt>◦</rt></span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,11 +5,6 @@
|
|||
<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,90 +4,140 @@
|
|||
<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: 1.5em monospace;
|
||||
font-size: 2em;
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<br />
|
||||
filled circle
|
||||
<div class="parent">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<br />
|
||||
filled dot
|
||||
<div class="parent">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<br />
|
||||
filled double-circle
|
||||
<div class="parent">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<br />
|
||||
filled sesame
|
||||
<div class="parent">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<br />
|
||||
filled triangle
|
||||
<div class="parent">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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,6 +12,24 @@
|
|||
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>
|
||||
|
|
@ -22,6 +40,17 @@
|
|||
<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,63 +4,100 @@
|
|||
<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: 1.5em monospace;
|
||||
font-size: 2em;
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<br />
|
||||
open circle
|
||||
<div class="parent">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<br />
|
||||
open dot
|
||||
<div class="parent">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<br />
|
||||
open double-circle
|
||||
<div class="parent">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -68,26 +105,39 @@
|
|||
open sesame
|
||||
<div class="parent">
|
||||
<div class=" margin">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<br />
|
||||
open triangle
|
||||
<div class="parent">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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,78 +4,127 @@
|
|||
<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: 1.5em monospace;
|
||||
font-size: 2em;
|
||||
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>
|
||||
<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 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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<br />
|
||||
dot
|
||||
<div class="parent">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<br />
|
||||
double-circle
|
||||
<div class="parent">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<br />
|
||||
sesame
|
||||
<div class="parent">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<br />
|
||||
triangle
|
||||
<div class="parent">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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,29 +5,74 @@
|
|||
<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: 1.5em monospace;
|
||||
font-size: 2em;
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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,39 +4,46 @@
|
|||
<head>
|
||||
<title>CSS Test: text-emphasis - color - 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" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-color-property" />
|
||||
<link rel="match" href="reference/text-emphasis-color-001-ref.xht"/>
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="This property describes the foreground color of the emphasis marks." />
|
||||
<style type="text/css"><![CDATA[
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.emphasis
|
||||
{
|
||||
text-emphasis-style: filled circle;
|
||||
}
|
||||
.margin
|
||||
{
|
||||
margin: 0.6em 0 0;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
border: solid 1px gray;
|
||||
font: 1.5em monospace;
|
||||
font-size: 2em;
|
||||
width: 10em;
|
||||
}
|
||||
.ref1 rt
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0em;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
}
|
||||
.black
|
||||
{
|
||||
color: black;
|
||||
}
|
||||
.ref2 rt
|
||||
.blue
|
||||
{
|
||||
color: blue;
|
||||
}
|
||||
.ref3 rt
|
||||
.green
|
||||
{
|
||||
color: green;
|
||||
}
|
||||
.ref4 rt
|
||||
.red
|
||||
{
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -57,59 +64,88 @@
|
|||
text-emphasis-color: red;
|
||||
}
|
||||
]]></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>
|
||||
<!--
|
||||
Reference line for each example relies on ruby rendering, as described in the spec:
|
||||
"Emphasis marks are drawn exactly as if each character was assigned the mark as its ruby annotation text
|
||||
with the ruby position given by text-emphasis-position and the ruby alignment as centered."
|
||||
-->
|
||||
<body>
|
||||
<div>
|
||||
<p>Test passes if each pair of upper and lower "Filler Text" in the square box is identical.</p>
|
||||
black
|
||||
<div class="parent">
|
||||
<div class="margin"><span class="emphasis test1">Filler</span> Text</div>
|
||||
<div><span class="emphasis test1">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<ruby class="ref1"><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>
|
||||
<span class="common">F<span class="black refcommon">●</span></span><span class="common">i<span class="black refcommon">●</span></span><span class="common">l<span class="black refcommon">●</span></span><span class="common">l<span class="black refcommon">●</span></span><span class="common">e<span class="black refcommon">●</span></span><span class="common">r<span class="black refcommon">●</span></span>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
blue
|
||||
<div class="parent">
|
||||
<div class="margin"><span class="emphasis test2">Filler</span> Text</div>
|
||||
<div><span class="emphasis test2">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<ruby class="ref2"><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>
|
||||
<span class="common">F<span class="blue refcommon">●</span></span><span class="common">i<span class="blue refcommon">●</span></span><span class="common">l<span class="blue refcommon">●</span></span><span class="common">l<span class="blue refcommon">●</span></span><span class="common">e<span class="blue refcommon">●</span></span><span class="common">r<span class="blue refcommon">●</span></span>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
green
|
||||
<div class="parent">
|
||||
<div class="margin"><span class="emphasis test3">Filler</span> Text</div>
|
||||
<div><span class="emphasis test3">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<ruby class="ref3"><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>
|
||||
<span class="common">F<span class="green refcommon">●</span></span><span class="common">i<span class="green refcommon">●</span></span><span class="common">l<span class="green refcommon">●</span></span><span class="common">l<span class="green refcommon">●</span></span><span class="common">e<span class="green refcommon">●</span></span><span class="common">r<span class="green refcommon">●</span></span>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
red
|
||||
<div class="parent">
|
||||
<div class="margin"><span class="emphasis test4">Filler</span> Text</div>
|
||||
<div><span class="emphasis test4">Filler</span> Text</div>
|
||||
<br />
|
||||
<div>
|
||||
<ruby class="ref4"><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>
|
||||
<span class="common">F<span class="red refcommon">●</span></span><span class="common">i<span class="red refcommon">●</span></span><span class="common">l<span class="red refcommon">●</span></span><span class="common">l<span class="red refcommon">●</span></span><span class="common">e<span class="red refcommon">●</span></span><span class="common">r<span class="red refcommon">●</span></span>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
current-color
|
||||
<div class="parent">
|
||||
<div class="margin"><span class="emphasis">Filler</span> Text</div>
|
||||
<div><span class="emphasis">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,10 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - over left - basic cases</title>
|
||||
<title>CSS Test: text-emphasis-position - above left - 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" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property" />
|
||||
<link rel="match" href="reference/text-emphasis-position-over-left-001-ref.xht"/>
|
||||
<link rel="match" href="reference/text-emphasis-position-above-left-001-ref.xht"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This property describes where emphasis marks are drawn at." />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
|
@ -14,9 +13,18 @@
|
|||
.test
|
||||
{
|
||||
text-emphasis-style: filled circle;
|
||||
text-emphasis-position: over left;
|
||||
text-emphasis-position: above left;
|
||||
}
|
||||
/* the CSS below is not part of the test */
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.margin
|
||||
{
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
|
|
@ -25,8 +33,15 @@
|
|||
font: 20px/1em ahem;
|
||||
width: 6em;
|
||||
}
|
||||
ruby {
|
||||
ruby-position: over;
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0.6em;
|
||||
position: absolute;
|
||||
}
|
||||
.top
|
||||
{
|
||||
top: -1.4em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
|
@ -39,8 +54,8 @@
|
|||
</div>
|
||||
<br />
|
||||
<div class="parent">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
<div class="margin">
|
||||
<span class="common">a<span class="refcommon top">●</span></span><span class="common">b<span class="refcommon top">●</span></span><span class="common">c<span class="refcommon top">●</span></span>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
|
|
@ -2,11 +2,10 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - under left - basic cases</title>
|
||||
<title>CSS Test: text-emphasis-position - above left - 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" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property" />
|
||||
<link rel="match" href="reference/text-emphasis-position-under-left-002-ref.xht"/>
|
||||
<link rel="match" href="reference/text-emphasis-position-above-left-002-ref.xht"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This property describes where emphasis marks are drawn at." />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
|
@ -14,13 +13,19 @@
|
|||
.test
|
||||
{
|
||||
text-emphasis-style: filled circle;
|
||||
text-emphasis-position: under left;
|
||||
text-emphasis-position: above left;
|
||||
}
|
||||
.vertical
|
||||
|
||||
.test-vertical
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
/* the CSS below is not part of the test */
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.displayarea
|
||||
{
|
||||
border: solid 1px gray;
|
||||
|
|
@ -31,9 +36,6 @@
|
|||
{
|
||||
float: right;
|
||||
}
|
||||
.ref {
|
||||
ruby-position: under; /* to match emphasis position 'left' */
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
|
|
@ -43,6 +45,13 @@
|
|||
height: 6em;
|
||||
width: 2em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 1.1em;
|
||||
position: absolute;
|
||||
top: 0.1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -50,14 +59,15 @@
|
|||
<p>Test passes if a pair of left and right block in the square box is identical.</p>
|
||||
<p>vertical</p>
|
||||
<div class="displayarea">
|
||||
<div class="parent vertical floatright ref">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
<div class="parent floatright">
|
||||
<span class="common"> a<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> b<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> c<span class="refcommon">●</span></span><br />
|
||||
<br />
|
||||
<span class="common"> d</span><br />
|
||||
<span class="common"> e</span><br />
|
||||
</div>
|
||||
<div class="parent vertical">
|
||||
<div class="parent test-vertical">
|
||||
<span class="test">abc</span> de
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,11 +2,10 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - over right - basic cases</title>
|
||||
<title>CSS Test: text-emphasis-position - above right - 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" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property" />
|
||||
<link rel="match" href="reference/text-emphasis-position-over-right-001-ref.xht"/>
|
||||
<link rel="match" href="reference/text-emphasis-position-above-right-001-ref.xht"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This property describes where emphasis marks are drawn at." />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
|
@ -14,9 +13,18 @@
|
|||
.test
|
||||
{
|
||||
text-emphasis-style: filled circle;
|
||||
text-emphasis-position: over right;
|
||||
text-emphasis-position: above right;
|
||||
}
|
||||
/* the CSS below is not part of the test */
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.margin
|
||||
{
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
|
|
@ -25,8 +33,15 @@
|
|||
font: 20px/1em ahem;
|
||||
width: 6em;
|
||||
}
|
||||
ruby {
|
||||
ruby-position: over;
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0.6em;
|
||||
position: absolute;
|
||||
}
|
||||
.top
|
||||
{
|
||||
top: -1.4em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
|
@ -39,10 +54,12 @@
|
|||
</div>
|
||||
<br />
|
||||
<div class="parent">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
de<br />
|
||||
<br />
|
||||
<div class="margin">
|
||||
<div class="margin">
|
||||
<span class="common">a<span class="refcommon top">●</span></span><span class="common">b<span class="refcommon top">●</span></span><span class="common">c<span class="refcommon top">●</span></span>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,11 +2,10 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - under right - basic cases</title>
|
||||
<title>CSS Test: text-emphasis-position - above right - 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" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property" />
|
||||
<link rel="match" href="reference/text-emphasis-position-under-right-002-ref.xht"/>
|
||||
<link rel="match" href="reference/text-emphasis-position-above-right-002-ref.xht"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This property describes where emphasis marks are drawn at." />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
|
@ -14,13 +13,19 @@
|
|||
.test
|
||||
{
|
||||
text-emphasis-style: filled circle;
|
||||
text-emphasis-position: under right;
|
||||
text-emphasis-position: above right;
|
||||
}
|
||||
.vertical
|
||||
.test-vertical
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
/* the CSS below is not part of the test */
|
||||
.common
|
||||
{
|
||||
left: -0.5em;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.displayarea
|
||||
{
|
||||
border: solid 1px gray;
|
||||
|
|
@ -31,9 +36,6 @@
|
|||
{
|
||||
float: right;
|
||||
}
|
||||
.ref {
|
||||
ruby-position: over; /* to match emphasis position 'right' */
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
|
|
@ -43,6 +45,13 @@
|
|||
height: 6em;
|
||||
width: 2em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 4.1em;
|
||||
position: absolute;
|
||||
top: 0.1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -50,14 +59,15 @@
|
|||
<p>Test passes if a pair of left and right block in the square box is identical.</p>
|
||||
<p>vertical</p>
|
||||
<div class="displayarea">
|
||||
<div class="parent vertical floatright ref">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
<div class="parent floatright">
|
||||
<span class="common"> a<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> b<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> c<span class="refcommon">●</span></span><br />
|
||||
<br />
|
||||
<span class="common"> d</span><br />
|
||||
<span class="common"> e</span><br />
|
||||
</div>
|
||||
<div class="parent vertical">
|
||||
<div class="parent test-vertical">
|
||||
<span class="test">abc</span> de
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,11 +2,10 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - under left - basic cases</title>
|
||||
<title>CSS Test: text-emphasis-position - below left - 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" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property" />
|
||||
<link rel="match" href="reference/text-emphasis-position-under-left-001-ref.xht"/>
|
||||
<link rel="match" href="reference/text-emphasis-position-below-left-001-ref.xht"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This property describes where emphasis marks are drawn at." />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
|
@ -14,9 +13,14 @@
|
|||
.test
|
||||
{
|
||||
text-emphasis-style: filled circle;
|
||||
text-emphasis-position: under left;
|
||||
text-emphasis-position: below left;
|
||||
}
|
||||
/* the CSS below is not part of the test */
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
|
|
@ -24,10 +28,16 @@
|
|||
color: blue;
|
||||
font: 20px/1em ahem;
|
||||
width: 6em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
ruby {
|
||||
ruby-position: under;
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0.6em;
|
||||
position: absolute;
|
||||
}
|
||||
.top
|
||||
{
|
||||
top: 1.6em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
|
@ -41,7 +51,7 @@
|
|||
<br />
|
||||
<div class="parent">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
<span class="common">a<span class="refcommon top">●</span></span><span class="common">b<span class="refcommon top">●</span></span><span class="common">c<span class="refcommon top">●</span></span>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
|
|
@ -2,11 +2,10 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - over left - basic cases</title>
|
||||
<title>CSS Test: text-emphasis-position - below left - 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" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property" />
|
||||
<link rel="match" href="reference/text-emphasis-position-over-left-002-ref.xht"/>
|
||||
<link rel="match" href="reference/text-emphasis-position-below-left-002-ref.xht"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This property describes where emphasis marks are drawn at." />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
|
@ -14,13 +13,19 @@
|
|||
.test
|
||||
{
|
||||
text-emphasis-style: filled circle;
|
||||
text-emphasis-position: over left;
|
||||
text-emphasis-position: below left;
|
||||
}
|
||||
.vertical
|
||||
|
||||
.test-vertical
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
/* the CSS below is not part of the test */
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.displayarea
|
||||
{
|
||||
border: solid 1px gray;
|
||||
|
|
@ -31,9 +36,6 @@
|
|||
{
|
||||
float: right;
|
||||
}
|
||||
.ref {
|
||||
ruby-position: under; /* to match emphasis position 'left' */
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
|
|
@ -43,6 +45,13 @@
|
|||
height: 6em;
|
||||
width: 2em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 1.1em;
|
||||
position: absolute;
|
||||
top: 0.1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -50,14 +59,15 @@
|
|||
<p>Test passes if a pair of left and right block in the square box is identical.</p>
|
||||
<p>vertical</p>
|
||||
<div class="displayarea">
|
||||
<div class="parent vertical floatright ref">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
<div class="parent floatright">
|
||||
<span class="common"> a<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> b<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> c<span class="refcommon">●</span></span><br />
|
||||
<br />
|
||||
<span class="common"> d</span><br />
|
||||
<span class="common"> e</span><br />
|
||||
</div>
|
||||
<div class="parent vertical">
|
||||
<div class="parent test-vertical">
|
||||
<span class="test">abc</span> de
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,11 +2,10 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - under right - basic cases</title>
|
||||
<title>CSS Test: text-emphasis-position - below right - 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" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property" />
|
||||
<link rel="match" href="reference/text-emphasis-position-under-right-001-ref.xht"/>
|
||||
<link rel="match" href="reference/text-emphasis-position-below-right-001-ref.xht"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This property describes where emphasis marks are drawn at." />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
|
@ -14,9 +13,14 @@
|
|||
.test
|
||||
{
|
||||
text-emphasis-style: filled circle;
|
||||
text-emphasis-position: under right;
|
||||
text-emphasis-position: below right;
|
||||
}
|
||||
/* the CSS below is not part of the test */
|
||||
.common
|
||||
{
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
|
|
@ -24,10 +28,16 @@
|
|||
color: blue;
|
||||
font: 20px/1em ahem;
|
||||
width: 6em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
ruby {
|
||||
ruby-position: under;
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0.6em;
|
||||
position: absolute;
|
||||
}
|
||||
.top
|
||||
{
|
||||
top: 1.6em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
|
@ -40,10 +50,12 @@
|
|||
</div>
|
||||
<br />
|
||||
<div class="parent">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
de<br />
|
||||
<br />
|
||||
<div class="margin">
|
||||
<div class="margin">
|
||||
<span class="common">a<span class="refcommon top">●</span></span><span class="common">b<span class="refcommon top">●</span></span><span class="common">c<span class="refcommon top">●</span></span>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,11 +2,10 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: text-emphasis-position - over right - basic cases</title>
|
||||
<title>CSS Test: text-emphasis-position - below right - 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" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property" />
|
||||
<link rel="match" href="reference/text-emphasis-position-over-right-002-ref.xht"/>
|
||||
<link rel="match" href="reference/text-emphasis-position-below-right-002-ref.xht"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This property describes where emphasis marks are drawn at." />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
|
@ -14,13 +13,19 @@
|
|||
.test
|
||||
{
|
||||
text-emphasis-style: filled circle;
|
||||
text-emphasis-position: over right;
|
||||
text-emphasis-position: below right;
|
||||
}
|
||||
.vertical
|
||||
.test-vertical
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
/* the CSS below is not part of the test */
|
||||
.common
|
||||
{
|
||||
left: -0.5em;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.displayarea
|
||||
{
|
||||
border: solid 1px gray;
|
||||
|
|
@ -31,9 +36,6 @@
|
|||
{
|
||||
float: right;
|
||||
}
|
||||
.ref {
|
||||
ruby-position: over; /* to match emphasis position 'right' */
|
||||
}
|
||||
.parent
|
||||
{
|
||||
background: yellow;
|
||||
|
|
@ -43,6 +45,13 @@
|
|||
height: 6em;
|
||||
width: 2em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 4.1em;
|
||||
position: absolute;
|
||||
top: 0.1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -50,14 +59,15 @@
|
|||
<p>Test passes if a pair of left and right block in the square box is identical.</p>
|
||||
<p>vertical</p>
|
||||
<div class="displayarea">
|
||||
<div class="parent vertical floatright ref">
|
||||
<div>
|
||||
<ruby><rb>a</rb><rt>●</rt><rb>b</rb><rt>●</rt><rb>c</rb><rt>●</rt></ruby>
|
||||
de<br />
|
||||
<br />
|
||||
</div>
|
||||
<div class="parent floatright">
|
||||
<span class="common"> a<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> b<span class="refcommon">●</span></span><br />
|
||||
<span class="common"> c<span class="refcommon">●</span></span><br />
|
||||
<br />
|
||||
<span class="common"> d</span><br />
|
||||
<span class="common"> e</span><br />
|
||||
</div>
|
||||
<div class="parent vertical">
|
||||
<div class="parent test-vertical">
|
||||
<span class="test">abc</span> de
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -14,7 +14,7 @@ span{
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if "filled dot" is above every single character of "Text sample".</p>
|
||||
<p>Test passes if "open dot" is above every single character of "Text sample".</p>
|
||||
<div><span>Text</span> <span>sample</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
<!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,12 +8,9 @@
|
|||
<link rel="match" href="reference/text-emphasis-style-007.html">
|
||||
<meta name="assert" content="Test checks 'text-emphasis-style: filled circle'">
|
||||
<style>
|
||||
div {
|
||||
font: 1.5em monospace;
|
||||
}
|
||||
span {
|
||||
text-emphasis-style: filled circle;
|
||||
}
|
||||
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 style="font: 1.5em monospace">
|
||||
<div>
|
||||
<span>Text sample</span>.
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -8,16 +8,13 @@
|
|||
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 above every single character of "Text sample".</p>
|
||||
<p>Test passes if ﹅ is aborve every single character of"Text sample".</p>
|
||||
<div><span>Text</span> <span>sample</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@
|
|||
<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 'text-emphasis-style: dot' renders as 'filled dot'.">
|
||||
<link rel="match" href="reference/text-emphasis-style-002-ref.html">
|
||||
<meta name="assert" content="Test checks that [explanation of what you're trying to test].">
|
||||
<style>
|
||||
.test {
|
||||
text-emphasis-style: dot;
|
||||
|
|
@ -14,7 +13,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if "filled dot" is above every single character of "Text sample".</p>
|
||||
<p>Test passes if the small dot appears above "Text sample".</p>
|
||||
<div><span class="test">Text</span> <span class="test">sample</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -8,12 +8,9 @@
|
|||
<link rel="match" href="reference/text-emphasis-style-021-ref.html">
|
||||
<meta name="assert" content="This test checks 'text-emphasis-style:string'.">
|
||||
<style>
|
||||
div {
|
||||
font: 1.5em monospace;
|
||||
}
|
||||
span {
|
||||
span {
|
||||
text-emphasis-style: '^';
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,21 +4,32 @@
|
|||
<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: 1.5em monospace;
|
||||
font-size: 2em;
|
||||
width: 10em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0em;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
}
|
||||
#test1
|
||||
{
|
||||
text-emphasis-style: filled; /* missing shape computes to 'circle' */
|
||||
text-emphasis-style: filled;
|
||||
}
|
||||
#test2
|
||||
{
|
||||
|
|
@ -41,6 +52,24 @@
|
|||
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>
|
||||
|
|
@ -48,8 +77,9 @@
|
|||
filled
|
||||
<div class="parent">
|
||||
<div><span id="test1">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -57,8 +87,9 @@
|
|||
filled circle
|
||||
<div class="parent">
|
||||
<div><span id="test2">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -66,8 +97,9 @@
|
|||
filled dot
|
||||
<div class="parent">
|
||||
<div><span id="test3">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -75,8 +107,9 @@
|
|||
filled double-circle
|
||||
<div class="parent">
|
||||
<div><span id="test4">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -84,20 +117,33 @@
|
|||
filled sesame
|
||||
<div class="parent">
|
||||
<div><span id="test5">Filler</span> Text</div>
|
||||
<br />
|
||||
<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
|
||||
<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>
|
||||
</div>
|
||||
<br />
|
||||
filled triangle
|
||||
<div class="parent">
|
||||
<div><span id="test6">Filler</span> Text</div>
|
||||
<br />
|
||||
<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
|
||||
<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>
|
||||
</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,6 +20,24 @@
|
|||
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>
|
||||
|
|
@ -30,6 +48,17 @@
|
|||
<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,18 +4,29 @@
|
|||
<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: 1.5em monospace;
|
||||
font-size: 2em;
|
||||
width: 10em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0em;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
}
|
||||
#test1
|
||||
{
|
||||
text-emphasis-style: open;
|
||||
|
|
@ -41,6 +52,24 @@
|
|||
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>
|
||||
|
|
@ -48,8 +77,9 @@
|
|||
open
|
||||
<div class="parent">
|
||||
<div><span id="test1">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -57,8 +87,9 @@
|
|||
open circle
|
||||
<div class="parent">
|
||||
<div><span id="test2">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -66,8 +97,9 @@
|
|||
open dot
|
||||
<div class="parent">
|
||||
<div><span id="test3">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -75,8 +107,9 @@
|
|||
open double-circle
|
||||
<div class="parent">
|
||||
<div><span id="test4">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -84,8 +117,9 @@
|
|||
open sesame
|
||||
<div class="parent">
|
||||
<div><span id="test5">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -93,11 +127,23 @@
|
|||
open triangle
|
||||
<div class="parent">
|
||||
<div><span id="test6">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</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,18 +4,29 @@
|
|||
<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: 1.5em monospace;
|
||||
font-size: 2em;
|
||||
width: 10em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0em;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
}
|
||||
#test1
|
||||
{
|
||||
text-emphasis-style: circle;
|
||||
|
|
@ -37,6 +48,24 @@
|
|||
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>
|
||||
|
|
@ -44,8 +73,9 @@
|
|||
circle
|
||||
<div class="parent">
|
||||
<div><span id="test1">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -53,8 +83,9 @@
|
|||
dot
|
||||
<div class="parent">
|
||||
<div><span id="test2">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -62,8 +93,9 @@
|
|||
double-circle
|
||||
<div class="parent">
|
||||
<div><span id="test3">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -71,8 +103,9 @@
|
|||
sesame
|
||||
<div class="parent">
|
||||
<div><span id="test4">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -80,11 +113,23 @@
|
|||
triangle
|
||||
<div class="parent">
|
||||
<div><span id="test5">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</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,23 +4,52 @@
|
|||
<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: 1.5em monospace;
|
||||
font-size: 2em;
|
||||
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>
|
||||
|
|
@ -29,11 +58,22 @@
|
|||
<div class="parent">
|
||||
<div><span id="test">Filler</span> Text</div>
|
||||
<br />
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче