Status: FAIL | Duration: 19ms | Subtests: 0/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi
/css/css-text-decor/text-emphasis-style-filled-001.xht
<?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-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="assert" content="This property applies emphasis marks to the element's text. " /> <style type="text/css"><![CDATA[ .parent { border: solid 1px gray; font: 1.5em/2 monospace; width: 10em; } #test1 { text-emphasis-style: filled; /* missing shape computes to 'circle' */ } #test2 { text-emphasis-style: filled circle; } #test3 { text-emphasis-style: filled dot; } #test4 { text-emphasis-style: filled double-circle; } #test5 { text-emphasis-style: filled sesame; } #test6 { text-emphasis-style: filled triangle; } ]]></style> </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><span id="test1">Filler</span> Text</div> <div> <ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby> Text </div> </div> <br /> filled circle <div class="parent"> <div><span id="test2">Filler</span> Text</div> <div> <ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby> Text </div> </div> <br /> filled dot <div class="parent"> <div><span id="test3">Filler</span> Text</div> <div> <ruby><rb>F</rb><rt>•</rt><rb>i</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>e</rb><rt>•</rt><rb>r</rb><rt>•</rt></ruby> Text </div> </div> <br /> filled double-circle <div class="parent"> <div><span id="test4">Filler</span> Text</div> <div> <ruby><rb>F</rb><rt>◉</rt><rb>i</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>e</rb><rt>◉</rt><rb>r</rb><rt>◉</rt></ruby> Text </div> </div> <br /> filled sesame <div class="parent"> <div><span id="test5">Filler</span> Text</div> <div> <ruby><rb>F</rb><rt>﹅</rt><rb>i</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>e</rb><rt>﹅</rt><rb>r</rb><rt>﹅</rt></ruby> Text </div> </div> <br /> filled triangle <div class="parent"> <div><span id="test6">Filler</span> Text</div> <div> <ruby><rb>F</rb><rt>▲</rt><rb>i</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>e</rb><rt>▲</rt><rb>r</rb><rt>▲</rt></ruby> Text </div> </div> </div> </body> </html>
/css/css-text-decor/reference/text-emphasis-style-filled-001-ref.xht
<?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-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[ .parent { border: solid 1px gray; font: 1.5em/2 monospace; width: 10em; } ]]></style> </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> Text </div> <div> <ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby> Text </div> </div> <br /> 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> Text </div> <div> <ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby> Text </div> </div> <br /> 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> Text </div> <div> <ruby><rb>F</rb><rt>•</rt><rb>i</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>e</rb><rt>•</rt><rb>r</rb><rt>•</rt></ruby> Text </div> </div> <br /> 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> Text </div> <div> <ruby><rb>F</rb><rt>◉</rt><rb>i</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>e</rb><rt>◉</rt><rb>r</rb><rt>◉</rt></ruby> Text </div> </div> <br /> 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> Text </div> <div> <ruby><rb>F</rb><rt>﹅</rt><rb>i</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>e</rb><rt>﹅</rt><rb>r</rb><rt>﹅</rt></ruby> Text </div> </div> <br /> 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> Text </div> <div> <ruby><rb>F</rb><rt>▲</rt><rb>i</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>e</rb><rt>▲</rt><rb>r</rb><rt>▲</rt></ruby> Text </div> </div> </div> </body> </html>