mirror of
https://github.com/servo/servo.git
synced 2025-06-23 08:34:42 +01:00
986 lines
No EOL
43 KiB
HTML
986 lines
No EOL
43 KiB
HTML
|
|
|
|
<!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>Alignment and Justification - CSS Text Module Level 3 CR Test Suite</title>
|
|
<style type="text/css">
|
|
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
|
@import "../indices.css";
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>CSS Text Module Level 3 CR Test Suite</h1>
|
|
<h2>Alignment and Justification (76 tests)</h2>
|
|
<table width="100%">
|
|
<col id="test-column"></col>
|
|
<col id="refs-column"></col>
|
|
<col id="flags-column"></col>
|
|
<col id="info-column"></col>
|
|
<thead>
|
|
<tr>
|
|
<th>Test</th>
|
|
<th><abbr title="Rendering References">Refs</abbr></th>
|
|
<th>Flags</th>
|
|
<th>Info</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="s7">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s7">+</a>
|
|
<a href="https://www.w3.org/TR/css-text-3/#justification">7 Alignment and Justification</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.1">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s7.1">+</a>
|
|
<a href="https://www.w3.org/TR/css-text-3/#text-align-property">7.1 Text Alignment: the ‘text-align’ property</a></th></tr>
|
|
<!-- 59 tests -->
|
|
<tr id="text-align-end-001-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-001.xht">text-align-end-001</a></strong></td>
|
|
<td><a href="reference/text-align-end-ref-001.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: end, direction: rtl
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. left when direction is horizontal, rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-002-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-002.xht">text-align-end-002</a></strong></td>
|
|
<td><a href="reference/text-align-end-ref-002.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: end, direction: ltr
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. right when direction is horizontal, ltr.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-003-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-003.xht">text-align-end-003</a></strong></td>
|
|
<td><a href="reference/text-align-end-ref-003.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: end, dir=rtl
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. left when direction is horizontal, rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-004-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-004.xht">text-align-end-004</a></strong></td>
|
|
<td><a href="reference/text-align-end-ref-004.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: end, dir=ltr
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. right when direction is horizontal, ltr.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-005-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-005.xht">text-align-end-005</a></strong></td>
|
|
<td><a href="reference/text-align-end-ref-005.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: end, direction: rtl
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. left when direction is horizontal, rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-006-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-006.xht">text-align-end-006</a></strong></td>
|
|
<td><a href="reference/text-align-end-ref-006.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: end, direction: ltr
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. right when direction is horizontal, ltr.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-007-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-007.xht">text-align-end-007</a></strong></td>
|
|
<td><a href="reference/text-align-end-ref-007.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: end, dir=rtl
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. left when direction is horizontal, rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-008-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-008.xht">text-align-end-008</a></strong></td>
|
|
<td><a href="reference/text-align-end-ref-008.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: end, dir=ltr
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. right when direction is horizontal, ltr.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-009-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-009.xht">text-align-end-009</a></strong></td>
|
|
<td><a href="reference/text-align-end-ref-009.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: end, dir=auto, RTL first strong
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. left when direction is auto and first strong character is rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-010-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-010.xht">text-align-end-010</a></strong></td>
|
|
<td><a href="reference/text-align-end-ref-010.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: end, dir=auto, LTR first strong
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. right when direction is auto and first strong character is ltr.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-014-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-014.xht">text-align-end-014</a></strong></td>
|
|
<td><a href="reference/text-align-end-ref-014.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: end, pre, dir=rtl inherited
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. left when base direction is rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-015-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-015.xht">text-align-end-015</a></strong></td>
|
|
<td><a href="reference/text-align-end-ref-015.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: end, pre, dir=ltr inherited
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. right when base direction is ltr.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-016-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-016.xht">text-align-end-016</a></strong></td>
|
|
<td><a href="reference/text-align-end-ref-016.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: end, pre, dir=auto
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. right when direction is auto and first strong character is ltr, and left when first strong is rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-017-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-017.xht">text-align-end-017</a></strong></td>
|
|
<td><a href="reference/text-align-end-ref-017.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: end, pre, dir=auto on surrounding block
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. since dir=auto is not inherited by pre, to right in ltr context.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-018-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-018.xht">text-align-end-018</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align: end, textarea, dir=rtl inherited
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. left when base direction is rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-019-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-019.xht">text-align-end-019</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align: end, textarea, dir=ltr inherited
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. right when base direction is ltr.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-020-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-020.xht">text-align-end-020</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align: end, textarea dir=auto on control
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. when dir=auto on textarea, right when first strong is ltr, left when rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-end-021-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-end-021.xht">text-align-end-021</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align: end, textarea, dir=auto on surrounding block
|
|
<ul class="assert">
|
|
<li>text-align:end aligns inline-level content to the end edge of the line box &#8211; ie. since dir=auto is not inherited by textarea, to right in ltr context.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-justify-001-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-justify-001.xht">text-align-justify-001</a></strong></td>
|
|
<td><a href="reference/text-align-justify-ref-001.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: justify, direction: rtl
|
|
<ul class="assert">
|
|
<li>text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned &#8211; in this case, to the right.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-justify-002-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-justify-002.xht">text-align-justify-002</a></strong></td>
|
|
<td><a href="reference/text-align-justify-ref-002.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: justify, direction: ltr
|
|
<ul class="assert">
|
|
<li>text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned &#8211; in this case, to the left.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-justify-003-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-justify-003.xht">text-align-justify-003</a></strong></td>
|
|
<td><a href="reference/text-align-justify-ref-003.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: justify, dir=rtl
|
|
<ul class="assert">
|
|
<li>text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned &#8211; in this case, to the right.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-justify-004-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-justify-004.xht">text-align-justify-004</a></strong></td>
|
|
<td><a href="reference/text-align-justify-ref-004.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: justify, dir=ltr
|
|
<ul class="assert">
|
|
<li>text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned &#8211; in this case, to the left.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-justify-005-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-justify-005.xht">text-align-justify-005</a></strong></td>
|
|
<td><a href="reference/text-align-justify-ref-005.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: justify, dir=auto, RTL first strong
|
|
<ul class="assert">
|
|
<li>text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned &#8211; in this case, to the right.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-justify-006-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-justify-006.xht">text-align-justify-006</a></strong></td>
|
|
<td><a href="reference/text-align-justify-ref-006.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: justify, dir=auto, LTR first strong
|
|
<ul class="assert">
|
|
<li>text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned &#8211; in this case, to the left.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-justifyall-001-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-justifyall-001.xht">text-align-justifyall-001</a></strong></td>
|
|
<td><a href="reference/text-align-justifyall-ref-001.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: justify-all, direction: rtl
|
|
<ul class="assert">
|
|
<li>text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-justifyall-002-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-justifyall-002.xht">text-align-justifyall-002</a></strong></td>
|
|
<td><a href="reference/text-align-justifyall-ref-002.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: justify-all, direction: ltr
|
|
<ul class="assert">
|
|
<li>text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-justifyall-003-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-justifyall-003.xht">text-align-justifyall-003</a></strong></td>
|
|
<td><a href="reference/text-align-justifyall-ref-003.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: justify-all, dir=rtl
|
|
<ul class="assert">
|
|
<li>text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-justifyall-004-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-justifyall-004.xht">text-align-justifyall-004</a></strong></td>
|
|
<td><a href="reference/text-align-justifyall-ref-004.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: justify-all, dir=ltr
|
|
<ul class="assert">
|
|
<li>text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-justifyall-005-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-justifyall-005.xht">text-align-justifyall-005</a></strong></td>
|
|
<td><a href="reference/text-align-justifyall-ref-005.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: justify-all, dir=auto, RTL first strong
|
|
<ul class="assert">
|
|
<li>text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-justifyall-006-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-justifyall-006.xht">text-align-justifyall-006</a></strong></td>
|
|
<td><a href="reference/text-align-justifyall-ref-006.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: justify-all, dir=auto, LTR first strong
|
|
<ul class="assert">
|
|
<li>text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-match-parent-01-7.1" class="">
|
|
<td>
|
|
<a href="text-align-match-parent-01.xht">text-align-match-parent-01</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>CSS Text: text-align: match-parent
|
|
<ul class="assert">
|
|
<li>Text checks that an element with text-align: match-parent inherits its parent's value and calculates 'start' and 'end' with respect to its parent's direction</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-match-parent-02-7.1" class="dom">
|
|
<td>
|
|
<a href="text-align-match-parent-02.xht">text-align-match-parent-02</a></td>
|
|
<td><a href="reference/text-align-match-parent-ref.xht">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>CSS Text: text-align: match-parent
|
|
<ul class="assert">
|
|
<li>Text checks that an element with text-align: match-parent still aligns correctly if the parent's dir attribute is changed</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-match-parent-03-7.1" class="dom">
|
|
<td>
|
|
<a href="text-align-match-parent-03.xht">text-align-match-parent-03</a></td>
|
|
<td><a href="reference/text-align-match-parent-ref.xht">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>CSS Text: text-align: match-parent
|
|
<ul class="assert">
|
|
<li>Text checks that an element whose text-align property is changed to match-parent aligns correctly</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-match-parent-04-7.1" class="dom">
|
|
<td>
|
|
<a href="text-align-match-parent-04.xht">text-align-match-parent-04</a></td>
|
|
<td><a href="reference/text-align-match-parent-ref.xht">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>CSS Text: text-align: match-parent
|
|
<ul class="assert">
|
|
<li>Text checks that an element with text-align: match-parent still aligns correctly if the parent's width is changed</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-match-parent-root-ltr-7.1" class="">
|
|
<td>
|
|
<a href="text-align-match-parent-root-ltr.xht">text-align-match-parent-root-ltr</a></td>
|
|
<td><a href="reference/text-align-match-parent-root-ltr-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Text: text-align: match-parent
|
|
<ul class="assert">
|
|
<li>Text checks that text-align: match-parent on a root element with dir=ltr is equivalent to text-align: start</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-match-parent-root-rtl-7.1" class="">
|
|
<td>
|
|
<a href="text-align-match-parent-root-rtl.xht">text-align-match-parent-root-rtl</a></td>
|
|
<td><a href="reference/text-align-match-parent-root-rtl-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Text: text-align: match-parent
|
|
<ul class="assert">
|
|
<li>Text checks that text-align: match-parent on a root element with dir=rtl is equivalent to text-align: start</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-001-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-001.xht">text-align-start-001</a></strong></td>
|
|
<td><a href="reference/text-align-start-ref-001.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: start, direction: rtl
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. right when direction is horizontal, rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-002-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-002.xht">text-align-start-002</a></strong></td>
|
|
<td><a href="reference/text-align-start-ref-002.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: start, direction: ltr
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. left when direction is horizontal, ltr.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-003-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-003.xht">text-align-start-003</a></strong></td>
|
|
<td><a href="reference/text-align-start-ref-003.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: start, dir=rtl
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. right when direction is horizontal, rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-004-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-004.xht">text-align-start-004</a></strong></td>
|
|
<td><a href="reference/text-align-start-ref-004.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: start, dir=ltr
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. left when direction is horizontal, ltr.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-005-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-005.xht">text-align-start-005</a></strong></td>
|
|
<td><a href="reference/text-align-start-ref-005.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: start, direction: rtl
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. right when direction is horizontal, rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-006-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-006.xht">text-align-start-006</a></strong></td>
|
|
<td><a href="reference/text-align-start-ref-006.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: start, direction: ltr
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. left when direction is horizontal, ltr.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-007-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-007.xht">text-align-start-007</a></strong></td>
|
|
<td><a href="reference/text-align-start-ref-007.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: start, dir=rtl
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. right when direction is horizontal, rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-008-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-008.xht">text-align-start-008</a></strong></td>
|
|
<td><a href="reference/text-align-start-ref-008.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: start, dir=ltr
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. left when direction is horizontal, ltr.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-009-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-009.xht">text-align-start-009</a></strong></td>
|
|
<td><a href="reference/text-align-start-ref-009.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: start, dir=auto, RTL first strong
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. right when direction is auto and first strong character is rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-010-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-010.xht">text-align-start-010</a></strong></td>
|
|
<td><a href="reference/text-align-start-ref-010.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: start, dir=auto, LTR first strong
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. left when direction is auto and first strong character is ltr.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-014-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-014.xht">text-align-start-014</a></strong></td>
|
|
<td><a href="reference/text-align-start-ref-014.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: start, pre, dir=rtl inherited
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. right when base direction is rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-015-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-015.xht">text-align-start-015</a></strong></td>
|
|
<td><a href="reference/text-align-start-ref-015.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: start, pre, dir=ltr inherited
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. left when base direction is ltr.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-016-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-016.xht">text-align-start-016</a></strong></td>
|
|
<td><a href="reference/text-align-start-ref-016.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: start, pre, dir=auto
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. left when direction is auto and first strong character is ltr, and right when first strong is rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-017-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-017.xht">text-align-start-017</a></strong></td>
|
|
<td><a href="reference/text-align-start-ref-017.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align: start, pre, dir=auto on surrounding block
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. since dir=auto is not inherited by pre, to left in ltr context.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-018-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-018.xht">text-align-start-018</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align: start, textarea, dir=rtl inherited
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. right when base direction is rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-019-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-019.xht">text-align-start-019</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align: start, textarea, dir=ltr inherited
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. left when base direction is ltr.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-020-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-020.xht">text-align-start-020</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align: start, textarea dir=auto on control
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. when dir=auto on textarea, left when first strong is ltr, right when rtl.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-start-021-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-align-start-021.xht">text-align-start-021</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align: start, textarea, dir=auto on surrounding block
|
|
<ul class="assert">
|
|
<li>text-align:start aligns inline-level content to the start edge of the line box &#8211; ie. since dir=auto is not inherited by textarea, to left in ltr context.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-justify-001-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-justify-001.xht">text-justify-001</a></strong></td>
|
|
<td><a href="reference/text-justify-ref-001.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-justify: none
|
|
<ul class="assert">
|
|
<li>text-justify:none means justification is disabled: there are no justification opportunities within the text.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-justify-002-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-justify-002.xht">text-justify-002</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-justify: inter-character
|
|
<ul class="assert">
|
|
<li>text-justify:inter-character means justification adjusts spacing between each pair of adjacent typographic character units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-justify-003-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-justify-003.xht">text-justify-003</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-justify: distribute
|
|
<ul class="assert">
|
|
<li>text-justify:distribute means justification adjusts spacing between each pair of adjacent typographic character units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-justify-004-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-justify-004.xht">text-justify-004</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-justify: inter-character, arabic
|
|
<ul class="assert">
|
|
<li>text-justify:inter-character means justification adjusts spacing between each pair of adjacent typographic character units. Justification must not introduce gaps between the joined typographic letter units of cursive scripts such as Arabic.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-justify-005-7.1" class="primary">
|
|
<td><strong>
|
|
<a href="text-justify-005.xht">text-justify-005</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-justify: distribute, arabic
|
|
<ul class="assert">
|
|
<li>text-justify:distribute means justification adjusts spacing between each pair of adjacent typographic character units. Justification must not introduce gaps between the joined typographic letter units of cursive scripts such as Arabic.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s7.1.#center">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.1.#end">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.1.#justify">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.1.#left">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.1.#match-parent">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.1.#right">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.1.#start">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.1.#start-end">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.1.#text-align">
|
|
<!-- 3 tests -->
|
|
<tr id="text-align-006-7.1.#text-align" class="">
|
|
<td>
|
|
<a href="text-align-006.xht">text-align-006</a></td>
|
|
<td><a href="reference/text-align-006-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align - start (basic)
|
|
<ul class="assert">
|
|
<li>The 'text-align' property set to 'start' on a block element aligns the text to the start edge.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-007-7.1.#text-align" class="">
|
|
<td>
|
|
<a href="text-align-007.xht">text-align-007</a></td>
|
|
<td><a href="reference/text-align-007-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align - end (basic)
|
|
<ul class="assert">
|
|
<li>The 'text-align' property set to 'end' on a block element aligns the text to the end edge.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-008-7.1.#text-align" class="">
|
|
<td>
|
|
<a href="text-align-008.xht">text-align-008</a></td>
|
|
<td><a href="reference/text-align-007-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align - match-parent (basic)
|
|
<ul class="assert">
|
|
<li>The 'text-align' property set to 'match-parent' on a block element behaves the same as 'inherit'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s7.2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s7.2">+</a>
|
|
<a href="https://www.w3.org/TR/css-text-3/#text-align-last-property">7.2 Last Line Alignment: the ‘text-align-last’ property</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.2.#auto1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.2.#text-align-last">
|
|
<!-- 14 tests -->
|
|
<tr id="text-align-last-001-7.2.#text-align-last" class="">
|
|
<td>
|
|
<a href="text-align-last-001.xht">text-align-last-001</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align-last - start (basic)
|
|
<ul class="assert">
|
|
<li>The 'text-align-last' property set to 'start' on a block element aligns the last line text to the start edge.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-last-002-7.2.#text-align-last" class="">
|
|
<td>
|
|
<a href="text-align-last-002.xht">text-align-last-002</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align-last - end (basic)
|
|
<ul class="assert">
|
|
<li>The 'text-align-last' property set to 'right' on a block element aligns the last line text to the end edge.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-last-003-7.2.#text-align-last" class="">
|
|
<td>
|
|
<a href="text-align-last-003.xht">text-align-last-003</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align-last - left (basic)
|
|
<ul class="assert">
|
|
<li>The 'text-align-last' property set to 'left' on a block element aligns the last line text to the left.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-last-004-7.2.#text-align-last" class="">
|
|
<td>
|
|
<a href="text-align-last-004.xht">text-align-last-004</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align-last - right (basic)
|
|
<ul class="assert">
|
|
<li>The 'text-align-last' property set to 'right' on a block element aligns the last line text to the right.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-last-005-7.2.#text-align-last" class="">
|
|
<td>
|
|
<a href="text-align-last-005.xht">text-align-last-005</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align-last - center (basic)
|
|
<ul class="assert">
|
|
<li>The 'text-align-last' property set to 'center' on a block element aligns the last line text to the center.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-last-006-7.2.#text-align-last" class="">
|
|
<td>
|
|
<a href="text-align-last-006.xht">text-align-last-006</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align-last - justify (basic)
|
|
<ul class="assert">
|
|
<li>The 'text-align-last' property set to 'justify' on a block element aligns the last line text to both left and right edges</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-last-007-7.2.#text-align-last" class="">
|
|
<td>
|
|
<a href="text-align-last-007.xht">text-align-last-007</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align-last - auto and text-align - right
|
|
<ul class="assert">
|
|
<li>The 'text-align-last' property set to 'auto' on a block element aligns the last line text to the right when text-align set 'right'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-last-008-7.2.#text-align-last" class="">
|
|
<td>
|
|
<a href="text-align-last-008.xht">text-align-last-008</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align-last - auto and text-align - end
|
|
<ul class="assert">
|
|
<li>The 'text-align-last' property set to 'auto' on a block element aligns the last line text to the right when text-align set 'end'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-last-009-7.2.#text-align-last" class="">
|
|
<td>
|
|
<a href="text-align-last-009.xht">text-align-last-009</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align-last - auto and text-align - center
|
|
<ul class="assert">
|
|
<li>The 'text-align-last' property set to 'auto' on a block element aligns the last line text to the center when text-align set 'center'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-last-010-7.2.#text-align-last" class="">
|
|
<td>
|
|
<a href="text-align-last-010.xht">text-align-last-010</a></td>
|
|
<td><a href="reference/text-align-last-010-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align-last - right(one line inside block element)
|
|
<ul class="assert">
|
|
<li>The 'text-align-last' property set to 'right' on a block element aligns the only one line text to the right.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-last-011-7.2.#text-align-last" class="">
|
|
<td>
|
|
<a href="text-align-last-011.xht">text-align-last-011</a></td>
|
|
<td><a href="reference/text-align-last-010-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>text-align-last - end(one line inside block element)
|
|
<ul class="assert">
|
|
<li>The 'text-align-last' property set to 'end' on a block element aligns the only one line text to the right.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-last-012-7.2.#text-align-last" class="">
|
|
<td>
|
|
<a href="text-align-last-012.xht">text-align-last-012</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align-last - center(one line inside block element)
|
|
<ul class="assert">
|
|
<li>The 'text-align-last' property set to 'center' on a block element aligns the only one line text to the center.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-last-013-7.2.#text-align-last" class="">
|
|
<td>
|
|
<a href="text-align-last-013.xht">text-align-last-013</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align-last applied to "display: inline" div element
|
|
<ul class="assert">
|
|
<li>Test checks that the 'text-align-last' property is invalid if the container element is not block element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="text-align-last-014-7.2.#text-align-last" class="">
|
|
<td>
|
|
<a href="text-align-last-014.xht">text-align-last-014</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>text-align-last applied to "display: block" span element
|
|
<ul class="assert">
|
|
<li>Test checks that the 'text-align-last' property is valid if the span element set 'display: block'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s7.3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s7.3">+</a>
|
|
<a href="https://www.w3.org/TR/css-text-3/#text-justify-property">7.3 Justification Method: the ‘text-justify’ property</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.3.#auto2">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.3.#distribute">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.3.#fig-text-justify-compromise">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.3.#fig-text-justify-cursive">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.3.#fig-text-justify-distribute">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.3.#fig-text-justify-interword">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.3.#inter-word">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.3.#none1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.3.#text-justify">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.3.1">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s7.3.1">+</a>
|
|
<a href="https://www.w3.org/TR/css-text-3/#expanding-text">7.3.1 Expanding and Compressing Text</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.3.1.#expansion-opportunity">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.3.2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s7.3.2">+</a>
|
|
<a href="https://www.w3.org/TR/css-text-3/#justify-symbols">7.3.2 Handling Symbols and Punctuation</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.3.3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s7.3.3">+</a>
|
|
<a href="https://www.w3.org/TR/css-text-3/#justify-limits">7.3.3 Unexpandable Text</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.3.4">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s7.3.4">+</a>
|
|
<a href="https://www.w3.org/TR/css-text-3/#justify-cursive">7.3.4 Cursive Scripts</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s7.3.5">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s7.3.5">+</a>
|
|
<a href="https://www.w3.org/TR/css-text-3/#justify-algos">7.3.5 Possible Algorithms</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |