Commit ae770f9b authored by Jonathan Kew's avatar Jonathan Kew
Browse files

Bug 1729450 - Fix reference elements for text-emphasis-color.html to reliably... 

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
parent a166f59f

testing/web-platform/meta/css/css-text-decor/text-emphasis-color-001.xht.ini

deleted100644 → 0
+0 −2
Original line number Diff line number Diff line 
[text-emphasis-color-001.xht]

  expected: FAIL

testing/web-platform/tests/css/css-text-decor/reference/text-emphasis-color-001-ref.xht

+15 −61
Original line number Diff line number Diff line
@@ -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">&#x25CF;</span></span><span class="common">i<span class="black refcommon">&#x25CF;</span></span><span class="common">l<span class="black refcommon">&#x25CF;</span></span><span class="common">l<span class="black refcommon">&#x25CF;</span></span><span class="common">e<span class="black refcommon">&#x25CF;</span></span><span class="common">r<span class="black refcommon">&#x25CF;</span></span>

					<ruby class="ref1"><rb>F</rb><rt>&#x25CF;</rt><rb>i</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>e</rb><rt>&#x25CF;</rt><rb>r</rb><rt>&#x25CF;</rt></ruby>

					Text

				</div>

				<br />

				<div>

					<span class="common">F<span class="black refcommon">&#x25CF;</span></span><span class="common">i<span class="black refcommon">&#x25CF;</span></span><span class="common">l<span class="black refcommon">&#x25CF;</span></span><span class="common">l<span class="black refcommon">&#x25CF;</span></span><span class="common">e<span class="black refcommon">&#x25CF;</span></span><span class="common">r<span class="black refcommon">&#x25CF;</span></span>

					<ruby class="ref1"><rb>F</rb><rt>&#x25CF;</rt><rb>i</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>e</rb><rt>&#x25CF;</rt><rb>r</rb><rt>&#x25CF;</rt></ruby>

					Text

				</div>

			</div>
@@ -82,12 +51,11 @@ 
			blue

			<div class="parent">

				<div class="margin">

					<span class="common">F<span class="blue refcommon">&#x25CF;</span></span><span class="common">i<span class="blue refcommon">&#x25CF;</span></span><span class="common">l<span class="blue refcommon">&#x25CF;</span></span><span class="common">l<span class="blue refcommon">&#x25CF;</span></span><span class="common">e<span class="blue refcommon">&#x25CF;</span></span><span class="common">r<span class="blue refcommon">&#x25CF;</span></span>

					<ruby class="ref2"><rb>F</rb><rt>&#x25CF;</rt><rb>i</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>e</rb><rt>&#x25CF;</rt><rb>r</rb><rt>&#x25CF;</rt></ruby>

					Text

				</div>

				<br />

				<div>

					<span class="common">F<span class="blue refcommon">&#x25CF;</span></span><span class="common">i<span class="blue refcommon">&#x25CF;</span></span><span class="common">l<span class="blue refcommon">&#x25CF;</span></span><span class="common">l<span class="blue refcommon">&#x25CF;</span></span><span class="common">e<span class="blue refcommon">&#x25CF;</span></span><span class="common">r<span class="blue refcommon">&#x25CF;</span></span>

					<ruby class="ref2"><rb>F</rb><rt>&#x25CF;</rt><rb>i</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>e</rb><rt>&#x25CF;</rt><rb>r</rb><rt>&#x25CF;</rt></ruby>

					Text

				</div>

			</div>
@@ -95,12 +63,11 @@ 
			green

			<div class="parent">

				<div class="margin">

					<span class="common">F<span class="green refcommon">&#x25CF;</span></span><span class="common">i<span class="green refcommon">&#x25CF;</span></span><span class="common">l<span class="green refcommon">&#x25CF;</span></span><span class="common">l<span class="green refcommon">&#x25CF;</span></span><span class="common">e<span class="green refcommon">&#x25CF;</span></span><span class="common">r<span class="green refcommon">&#x25CF;</span></span>

					<ruby class="ref3"><rb>F</rb><rt>&#x25CF;</rt><rb>i</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>e</rb><rt>&#x25CF;</rt><rb>r</rb><rt>&#x25CF;</rt></ruby>

					Text

				</div>

				<br />

				<div>

					<span class="common">F<span class="green refcommon">&#x25CF;</span></span><span class="common">i<span class="green refcommon">&#x25CF;</span></span><span class="common">l<span class="green refcommon">&#x25CF;</span></span><span class="common">l<span class="green refcommon">&#x25CF;</span></span><span class="common">e<span class="green refcommon">&#x25CF;</span></span><span class="common">r<span class="green refcommon">&#x25CF;</span></span>

					<ruby class="ref3"><rb>F</rb><rt>&#x25CF;</rt><rb>i</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>e</rb><rt>&#x25CF;</rt><rb>r</rb><rt>&#x25CF;</rt></ruby>

					Text

				</div>

			</div>
@@ -108,12 +75,11 @@ 
			red

			<div class="parent">

				<div class="margin">

					<span class="common">F<span class="red refcommon">&#x25CF;</span></span><span class="common">i<span class="red refcommon">&#x25CF;</span></span><span class="common">l<span class="red refcommon">&#x25CF;</span></span><span class="common">l<span class="red refcommon">&#x25CF;</span></span><span class="common">e<span class="red refcommon">&#x25CF;</span></span><span class="common">r<span class="red refcommon">&#x25CF;</span></span>

					<ruby class="ref4"><rb>F</rb><rt>&#x25CF;</rt><rb>i</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>e</rb><rt>&#x25CF;</rt><rb>r</rb><rt>&#x25CF;</rt></ruby>

					Text

				</div>

				<br />

				<div>

					<span class="common">F<span class="red refcommon">&#x25CF;</span></span><span class="common">i<span class="red refcommon">&#x25CF;</span></span><span class="common">l<span class="red refcommon">&#x25CF;</span></span><span class="common">l<span class="red refcommon">&#x25CF;</span></span><span class="common">e<span class="red refcommon">&#x25CF;</span></span><span class="common">r<span class="red refcommon">&#x25CF;</span></span>

					<ruby class="ref4"><rb>F</rb><rt>&#x25CF;</rt><rb>i</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>e</rb><rt>&#x25CF;</rt><rb>r</rb><rt>&#x25CF;</rt></ruby>

					Text

				</div>

			</div>
@@ -121,26 +87,14 @@ 
			current-color

			<div class="parent">

				<div class="margin">

					<span class="common">F<span class="refcommon">&#x25CF;</span></span><span class="common">i<span class="refcommon">&#x25CF;</span></span><span class="common">l<span class="refcommon">&#x25CF;</span></span><span class="common">l<span class="refcommon">&#x25CF;</span></span><span class="common">e<span class="refcommon">&#x25CF;</span></span><span class="common">r<span class="refcommon">&#x25CF;</span></span>

					<ruby><rb>F</rb><rt>&#x25CF;</rt><rb>i</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>e</rb><rt>&#x25CF;</rt><rb>r</rb><rt>&#x25CF;</rt></ruby>

					Text

				</div>

				<br />

				<div>

					<span class="common">F<span class="refcommon">&#x25CF;</span></span><span class="common">i<span class="refcommon">&#x25CF;</span></span><span class="common">l<span class="refcommon">&#x25CF;</span></span><span class="common">l<span class="refcommon">&#x25CF;</span></span><span class="common">e<span class="refcommon">&#x25CF;</span></span><span class="common">r<span class="refcommon">&#x25CF;</span></span>

					<ruby><rb>F</rb><rt>&#x25CF;</rt><rb>i</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>e</rb><rt>&#x25CF;</rt><rb>r</rb><rt>&#x25CF;</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>

testing/web-platform/tests/css/css-text-decor/text-emphasis-color-001.xht

+25 −61
Original line number Diff line number Diff line
@@ -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">&#x25CF;</span></span><span class="common">i<span class="black refcommon">&#x25CF;</span></span><span class="common">l<span class="black refcommon">&#x25CF;</span></span><span class="common">l<span class="black refcommon">&#x25CF;</span></span><span class="common">e<span class="black refcommon">&#x25CF;</span></span><span class="common">r<span class="black refcommon">&#x25CF;</span></span>

					<ruby class="ref1"><rb>F</rb><rt>&#x25CF;</rt><rb>i</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>e</rb><rt>&#x25CF;</rt><rb>r</rb><rt>&#x25CF;</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">&#x25CF;</span></span><span class="common">i<span class="blue refcommon">&#x25CF;</span></span><span class="common">l<span class="blue refcommon">&#x25CF;</span></span><span class="common">l<span class="blue refcommon">&#x25CF;</span></span><span class="common">e<span class="blue refcommon">&#x25CF;</span></span><span class="common">r<span class="blue refcommon">&#x25CF;</span></span>

					<ruby class="ref2"><rb>F</rb><rt>&#x25CF;</rt><rb>i</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>e</rb><rt>&#x25CF;</rt><rb>r</rb><rt>&#x25CF;</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">&#x25CF;</span></span><span class="common">i<span class="green refcommon">&#x25CF;</span></span><span class="common">l<span class="green refcommon">&#x25CF;</span></span><span class="common">l<span class="green refcommon">&#x25CF;</span></span><span class="common">e<span class="green refcommon">&#x25CF;</span></span><span class="common">r<span class="green refcommon">&#x25CF;</span></span>

					<ruby class="ref3"><rb>F</rb><rt>&#x25CF;</rt><rb>i</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>e</rb><rt>&#x25CF;</rt><rb>r</rb><rt>&#x25CF;</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">&#x25CF;</span></span><span class="common">i<span class="red refcommon">&#x25CF;</span></span><span class="common">l<span class="red refcommon">&#x25CF;</span></span><span class="common">l<span class="red refcommon">&#x25CF;</span></span><span class="common">e<span class="red refcommon">&#x25CF;</span></span><span class="common">r<span class="red refcommon">&#x25CF;</span></span>

					<ruby class="ref4"><rb>F</rb><rt>&#x25CF;</rt><rb>i</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>e</rb><rt>&#x25CF;</rt><rb>r</rb><rt>&#x25CF;</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">&#x25CF;</span></span><span class="common">i<span class="refcommon">&#x25CF;</span></span><span class="common">l<span class="refcommon">&#x25CF;</span></span><span class="common">l<span class="refcommon">&#x25CF;</span></span><span class="common">e<span class="refcommon">&#x25CF;</span></span><span class="common">r<span class="refcommon">&#x25CF;</span></span>

					<ruby><rb>F</rb><rt>&#x25CF;</rt><rb>i</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>l</rb><rt>&#x25CF;</rt><rb>e</rb><rt>&#x25CF;</rt><rb>r</rb><rt>&#x25CF;</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>