servo/tests/wpt/web-platform-tests/css/css-text/text-align/text-align-end-016.html

31 lines
1.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>text-align: end, pre, dir=auto</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-end-ref-016.html'>
<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box ie. right when direction is auto and first strong character is ltr, and left when first strong is rtl.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
.test { text-align: end; }
/* the CSS below is not part of the test */
.test, .ref1, .ref2 { width: 300px; color: orange; font: 25px/1 Ahem; }
.test { border: 1px solid orange; margin: 20px; }
.ref1, .ref2 { border-inline: 1px solid orange; margin: 0 20px; }
.ref1 { border-top: 1px solid orange; text-align: right; }
.ref2 { border-bottom: 1px solid orange; text-align: left; }
</style>
</head>
<body>
<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
<pre class="test" dir="auto">TES
&rlm;ING</pre>
<div class="ref1">REF</div>
<div class="ref2">ERE</div>
<!-- Notes:
The &rlm isn't in the Ahem font, so it may cause a spurious effect, such as a thin white line in the middle of a block in IE. This should be ignored. The test needs a RTL character in the Ahem font, so that the &RLM can be removed.
-->
</body>
</html>