servo/tests/wpt/web-platform-tests/css/css-text-3/text-align/text-align-start-010.html

27 lines
No EOL
1.3 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: start, dir=auto, LTR first strong</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-start-ref-010.html'>
<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box ie. left when direction is auto and first strong character is ltr.">
<style type='text/css'>
.test { text-align: start; }
/* 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; left: 0; background-color: orange; width: 72px; height: 72px; }
#rb2 { position: absolute; top: 0; left: 96px; background-color: orange; width: 72px; height: 72px; }
#rb3 { position: absolute; top: 0; left: 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>