зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1729450 - Fix reference elements for text-emphasis-color.html to reliably match the expected rendering. r=emilio
The screenshots of this testcase show that even though the text-emphasis-color property is working as expected, the reftest nevertheless fails because the exact position of the emphasis marks does not match between test and reference. Applying the suggested IPAMincho font, which has fixed-width Latin characters, in place of the default (proportional) font makes it come closer to matching, but still not quite. The root of the problem is that it tries to compare the rendering of emphasis marks with a "simulated" emphasis mark created by reducing the font size and using absolute positioning to try and put the mark in a suitable position. However, the actual rendering of the emphasis mark is not defined in such terms, and matching it will be difficult and fragile. The spec actually defines the rendering of emphasis marks to be equivalent to ruby text, so a more reliably correct reference rendering can be created using ruby elements with the expected emphasis-mark characters. (I note that there are already some emphasis testcases that use this approach.) Differential Revision: https://phabricator.services.mozilla.com/D124793
This commit is contained in:
Jonathan Kew
Родитель
da4a527847
Коммит
4ca9628e30
|
|
@ -1,2 +0,0 @@
|
|||
[text-emphasis-color-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -5,11 +5,6 @@
|
|||
<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;
|
||||
|
|
@ -17,51 +12,26 @@
|
|||
.parent
|
||||
{
|
||||
border: solid 1px gray;
|
||||
font-size: 2em;
|
||||
font: 1.5em monospace;
|
||||
width: 10em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0em;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
}
|
||||
.black
|
||||
.ref1 rt
|
||||
{
|
||||
color: black;
|
||||
}
|
||||
.blue
|
||||
.ref2 rt
|
||||
{
|
||||
color: blue;
|
||||
}
|
||||
.green
|
||||
.ref3 rt
|
||||
{
|
||||
color: green;
|
||||
}
|
||||
.red
|
||||
.ref4 rt
|
||||
{
|
||||
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>
|
||||
|
|
@ -69,12 +39,11 @@
|
|||
black
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<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>
|
||||
<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>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -82,12 +51,11 @@
|
|||
blue
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<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>
|
||||
<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>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -95,12 +63,11 @@
|
|||
green
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<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>
|
||||
<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>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -108,12 +75,11 @@
|
|||
red
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<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>
|
||||
<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>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -121,26 +87,14 @@
|
|||
current-color
|
||||
<div class="parent">
|
||||
<div class="margin">
|
||||
<span class="common">F<span class="refcommon">●</span></span><span class="common">i<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">e<span class="refcommon">●</span></span><span class="common">r<span class="refcommon">●</span></span>
|
||||
<ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">●</span></span><span class="common">i<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">e<span class="refcommon">●</span></span><span class="common">r<span class="refcommon">●</span></span>
|
||||
<ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<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,46 +4,39 @@
|
|||
<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-size: 2em;
|
||||
font: 1.5em monospace;
|
||||
width: 10em;
|
||||
}
|
||||
.refcommon
|
||||
{
|
||||
font-size: 0.5em;
|
||||
left: 0em;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
}
|
||||
.black
|
||||
.ref1 rt
|
||||
{
|
||||
color: black;
|
||||
}
|
||||
.blue
|
||||
.ref2 rt
|
||||
{
|
||||
color: blue;
|
||||
}
|
||||
.green
|
||||
.ref3 rt
|
||||
{
|
||||
color: green;
|
||||
}
|
||||
.red
|
||||
.ref4 rt
|
||||
{
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -64,88 +57,59 @@
|
|||
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><span class="emphasis test1">Filler</span> Text</div>
|
||||
<br />
|
||||
<div class="margin"><span class="emphasis test1">Filler</span> Text</div>
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
blue
|
||||
<div class="parent">
|
||||
<div><span class="emphasis test2">Filler</span> Text</div>
|
||||
<br />
|
||||
<div class="margin"><span class="emphasis test2">Filler</span> Text</div>
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
green
|
||||
<div class="parent">
|
||||
<div><span class="emphasis test3">Filler</span> Text</div>
|
||||
<br />
|
||||
<div class="margin"><span class="emphasis test3">Filler</span> Text</div>
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
red
|
||||
<div class="parent">
|
||||
<div><span class="emphasis test4">Filler</span> Text</div>
|
||||
<br />
|
||||
<div class="margin"><span class="emphasis test4">Filler</span> Text</div>
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
current-color
|
||||
<div class="parent">
|
||||
<div><span class="emphasis">Filler</span> Text</div>
|
||||
<br />
|
||||
<div class="margin"><span class="emphasis">Filler</span> Text</div>
|
||||
<div>
|
||||
<span class="common">F<span class="refcommon">●</span></span><span class="common">i<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">l<span class="refcommon">●</span></span><span class="common">e<span class="refcommon">●</span></span><span class="common">r<span class="refcommon">●</span></span>
|
||||
<ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby>
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<p class="fontChange" style="display: block;">
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and apply it.
|
||||
<button type="button" onclick="setFontFamily()">
|
||||
Apply
|
||||
</button>
|
||||
</p>
|
||||
<script type="text/javascript">
|
||||
if (document.getElementById) {
|
||||
document.getElementById('fontChange').style.display = 'block'
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче