servo/tests/wpt/css-tests/css-text-3_dev/xhtml1/text-align-end-010.xht

26 lines
No EOL
1.5 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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>text-align: end, dir=auto, LTR first strong</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida" />
<link href="https://drafts.csswg.org/css-text-3/#text-align-property" rel="help" />
<link href="reference/text-align-end-ref-010.xht" rel="match" />
<meta 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." name="assert" />
<style type="text/css">
.test { text-align: end; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 290px; color: orange; font: 24px/24px ahem; }
.ref { position: relative; height: 72px; }
#rb1 { position: absolute; top: 0; right: 0; background-color: orange; width: 72px; height: 72px; }
#rb2 { position: absolute; top: 0; right: 96px; background-color: orange; width: 72px; height: 72px; }
#rb3 { position: absolute; top: 0; right: 192px; background-color: orange; width: 72px; height: 48px; }
</style>
</head>
<body>
<div id="instructions">Test passes if shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="test" dir="auto">XXX XXX XXX XXX XXX XXX XXX XXX</div>
<div class="ref"><div id="rb1"></div><div id="rb2"></div><div id="rb3"></div></div>
</div>
</body></html>