CSS Text Module Level 3 CR Test Suite

Alignment and Justification (138 tests)

Test Refs Flags Info
+ 6 Alignment and Justification
+ 6.1 Text Alignment: the text-align shorthand
c546-txt-align-000 text-align
letter-spacing-justify-001 = Ahem Letter-spacing and 'text-align: justify'
  • The letter-spacing is not changed when combined with 'text-align: justify'.
text-align-001 Text-align set to 'left'
  • The 'text-align' property set to 'left' on a block element aligns the text to the left.
text-align-002 Text-align set to 'right'
  • The 'text-align' property set to 'right' on a block element aligns the text to the right.
text-align-003 Text-align set to 'center'
  • The 'text-align' property set to 'center' on a block element aligns the text in the center.
text-align-004 Text-align set to 'justify'
  • Text-align justify on a block element aligns the text on both the left and right sides.
text-align-005 Text-align set to 'inherit'
  • The 'text-align' property set to a value of 'inherit' correctly inherits its value from the parent element.
text-align-applies-to-001 Text-align application on a 'display: inline' element
  • The 'text-align' property is not applied to 'display: inline' element.
text-align-applies-to-002 Text-align application on a 'display: block' element
  • The 'text-align' property is applied to 'display: block' elements.
text-align-applies-to-003 Text-align application on a 'display: list-item' element
  • The 'text-align' property is applied to 'display: list-item' elements.
text-align-applies-to-005 Text-align application on a 'display: inline-block' element
  • The 'text-align' property is applied to 'display: inline-block' elements.
text-align-applies-to-006 Text-align application on a 'display: table' element
  • The 'text-align' property is applied to 'display: table' elements.
text-align-applies-to-007 Text-align application on a 'display: inline-table' element
  • The 'text-align' property is applied to 'display: inline-table' elements.
text-align-applies-to-008 Text-align application on a 'display: table-row-group' element
  • The 'text-align' property is applied to 'display: table-row-group' elements.
text-align-applies-to-009 Text-align application on a 'display: table-header-group' element
  • The 'text-align' property is applied to 'display: table-header-group' elements.
text-align-applies-to-010 Text-align application on a 'display: table-footer-group' element
  • The 'text-align' property is applied to 'display: table-footer-group' elements.
text-align-applies-to-011 Text-align application on a 'display: table-row' element
  • The 'text-align' property is applied to 'display: table-row' elements.
text-align-applies-to-012 Text-align application on a 'display: table-column-group' element
  • The 'text-align' property is not applied to a 'display: table-column-group' element.
text-align-applies-to-013 Text-align application on a 'display: table-column' element
  • The 'text-align' property is not applied to a 'display: table-column' element.
text-align-applies-to-014 Text-align application on a 'display: table-cell' element
  • The 'text-align' property is applied to 'display: table-cell' elements.
text-align-applies-to-015 Text-align application on a 'display: table-caption' element
  • The 'text-align' property is applied to 'display: table-caption' elements.
text-align-bidi-001 Text-align and direction - left and rtl
  • Text-align property should override the default text-align change caused by a switch of direction
text-align-bidi-002 Text-align and direction - nested center and rtl
  • Text-align property should override the default text-align change caused by a switch of direction
text-align-bidi-003 Text-align and direction - nested rtl, center and ltr
  • Text-align property should override the default text-align change caused by a switch of direction
text-align-bidi-004 Text-align and direction - nested center and ltr
  • Text-align property should override the default text-align change caused by a switch of direction
text-align-bidi-006 Text-align and direction - nested left and rtl
  • Text-align property should override the default text-align change caused by a switch of direction
text-align-bidi-007 direction:rtl and text-align: left
  • Text-align should override default text-align in rtl context
text-align-bidi-008 direction:rtl and text-align: justify
  • Text-align should override default text-align in rtl context
text-align-bidi-009 text-align: justify - implicit rtl text
  • Implicit rtl text should be justified by text-align: justify
text-align-bidi-010 text-align: justify - joined text
  • Joined text should be justified by text-align: justify
text-align-bidi-011 = Ahem text-align and bidi (basic test)
text-align-bidi-012 text-align and bidi (basic test)
text-align-bidi-013 text-align and bidi
text-align-end-001 = text-align: end, direction: rtl
  • text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is horizontal, rtl.
text-align-end-002 = text-align: end, direction: ltr
  • text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is horizontal, ltr.
text-align-end-003 = text-align: end, dir=rtl
  • text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is horizontal, rtl.
text-align-end-004 = text-align: end, dir=ltr
  • text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is horizontal, ltr.
text-align-end-005 = text-align: end, direction: rtl
  • text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is horizontal, rtl.
text-align-end-006 = text-align: end, direction: ltr
  • text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is horizontal, ltr.
text-align-end-007 = text-align: end, dir=rtl
  • text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is horizontal, rtl.
text-align-end-008 = text-align: end, dir=ltr
  • text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is horizontal, ltr.
text-align-end-009 = text-align: end, dir=auto, RTL first strong
  • text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is auto and first strong character is rtl.
text-align-end-010 = text-align: end, dir=auto, LTR first strong
  • 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.
text-align-end-014 = text-align: end, pre, dir=rtl inherited
  • text-align:end aligns inline-level content to the end edge of the line box – ie. left when base direction is rtl.
text-align-end-015 = text-align: end, pre, dir=ltr inherited
  • text-align:end aligns inline-level content to the end edge of the line box – ie. right when base direction is ltr.
text-align-end-016 = text-align: end, pre, dir=auto
  • 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.
text-align-end-017 = text-align: end, pre, dir=auto on surrounding block
  • text-align:end aligns inline-level content to the end edge of the line box – ie. since dir=auto is not inherited by pre, to right in ltr context.
text-align-end-018 text-align: end, textarea, dir=rtl inherited
  • text-align:end aligns inline-level content to the end edge of the line box – ie. left when base direction is rtl.
text-align-end-019 text-align: end, textarea, dir=ltr inherited
  • text-align:end aligns inline-level content to the end edge of the line box – ie. right when base direction is ltr.
text-align-end-020 text-align: end, textarea dir=auto on control
  • text-align:end aligns inline-level content to the end edge of the line box – ie. when dir=auto on textarea, right when first strong is ltr, left when rtl.
text-align-end-021 text-align: end, textarea, dir=auto on surrounding block
  • text-align:end aligns inline-level content to the end edge of the line box – ie. since dir=auto is not inherited by textarea, to right in ltr context.
text-align-inherit-001 Text-align inheritance on block level elements (spec example)
  • Ensure that block level elements inherit text-align values of parent elements.
text-align-justify-001 = text-align: justify, direction: rtl
  • 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 – in this case, to the right.
text-align-justify-002 = text-align: justify, direction: ltr
  • 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 – in this case, to the left.
text-align-justify-003 = text-align: justify, dir=rtl
  • 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 – in this case, to the right.
text-align-justify-004 = text-align: justify, dir=ltr
  • 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 – in this case, to the left.
text-align-justify-005 = text-align: justify, dir=auto, RTL first strong
  • 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 – in this case, to the right.
text-align-justify-006 = text-align: justify, dir=auto, LTR first strong
  • 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 – in this case, to the left.
text-align-justify-shy-001 = text-align: justify with soft-hyphens
text-align-justifyall-001 = text-align: justify-all, direction: rtl
  • text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
text-align-justifyall-002 = text-align: justify-all, direction: ltr
  • text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
text-align-justifyall-003 = text-align: justify-all, dir=rtl
  • text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
text-align-justifyall-004 = text-align: justify-all, dir=ltr
  • text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
text-align-justifyall-005 = text-align: justify-all, dir=auto, RTL first strong
  • text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
text-align-justifyall-006 = text-align: justify-all, dir=auto, LTR first strong
  • text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
text-align-match-parent-01 = CSS Text: text-align: match-parent
  • 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
text-align-match-parent-02 = DOM/JS CSS Text: text-align: match-parent
  • Text checks that an element with text-align: match-parent still aligns correctly if the parent's dir attribute is changed
text-align-match-parent-03 = DOM/JS CSS Text: text-align: match-parent
  • Text checks that an element whose text-align property is changed to match-parent aligns correctly
text-align-match-parent-04 = DOM/JS CSS Text: text-align: match-parent
  • Text checks that an element with text-align: match-parent still aligns correctly if the parent's width is changed
text-align-match-parent-root-ltr = CSS Text: text-align: match-parent
  • Text checks that text-align: match-parent on a root element with dir=ltr is equivalent to text-align: start
text-align-match-parent-root-rtl = CSS Text: text-align: match-parent
  • Text checks that text-align: match-parent on a root element with dir=rtl is equivalent to text-align: start
text-align-start-001 = text-align: start, direction: rtl
  • text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is horizontal, rtl.
text-align-start-002 = text-align: start, direction: ltr
  • text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is horizontal, ltr.
text-align-start-003 = text-align: start, dir=rtl
  • text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is horizontal, rtl.
text-align-start-004 = text-align: start, dir=ltr
  • text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is horizontal, ltr.
text-align-start-005 = text-align: start, direction: rtl
  • text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is horizontal, rtl.
text-align-start-006 = text-align: start, direction: ltr
  • text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is horizontal, ltr.
text-align-start-007 = text-align: start, dir=rtl
  • text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is horizontal, rtl.
text-align-start-008 = text-align: start, dir=ltr
  • text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is horizontal, ltr.
text-align-start-009 = text-align: start, dir=auto, RTL first strong
  • text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is auto and first strong character is rtl.
text-align-start-010 = text-align: start, dir=auto, LTR first strong
  • 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.
text-align-start-014 = text-align: start, pre, dir=rtl inherited
  • text-align:start aligns inline-level content to the start edge of the line box – ie. right when base direction is rtl.
text-align-start-015 = text-align: start, pre, dir=ltr inherited
  • text-align:start aligns inline-level content to the start edge of the line box – ie. left when base direction is ltr.
text-align-start-016 = text-align: start, pre, dir=auto
  • 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, and right when first strong is rtl.
text-align-start-017 = text-align: start, pre, dir=auto on surrounding block
  • text-align:start aligns inline-level content to the start edge of the line box – ie. since dir=auto is not inherited by pre, to left in ltr context.
text-align-start-018 text-align: start, textarea, dir=rtl inherited
  • text-align:start aligns inline-level content to the start edge of the line box – ie. right when base direction is rtl.
text-align-start-019 text-align: start, textarea, dir=ltr inherited
  • text-align:start aligns inline-level content to the start edge of the line box – ie. left when base direction is ltr.
text-align-start-020 text-align: start, textarea dir=auto on control
  • text-align:start aligns inline-level content to the start edge of the line box – ie. when dir=auto on textarea, left when first strong is ltr, right when rtl.
text-align-start-021 text-align: start, textarea, dir=auto on surrounding block
  • text-align:start aligns inline-level content to the start edge of the line box – ie. since dir=auto is not inherited by textarea, to left in ltr context.
text-align-white-space-001 = AhemOptional Text-align set to 'justify' with 'white-space' set to 'pre'
  • Setting 'text-align' to 'justify' and 'white-space' to 'pre', text-align is computed to its initial value.
text-align-white-space-002 = Ahem Text-align set to 'justify' with 'white-space' set to 'pre-line'
  • Setting 'text-align' to 'justify' and 'white-space' to 'pre-line', 'text-align' remains 'justified'.
text-align-white-space-003 = AhemOptional Text-align set to 'justify' with 'white-space' set to 'pre-wrap'
  • Setting 'text-align' to 'justify' and 'white-space' to 'pre-wrap', text-align is computed to its initial value.
text-align-white-space-004 = Ahem Text-align set to 'justify' with 'white-space' set to 'nowrap'
  • Setting 'text-align' to 'justify' and 'white-space' to 'nowrap', text-align is computed to 'justify'.
text-align-white-space-005 = AhemOptional Text-align set to 'justify' with 'white-space' set to 'pre' and 'direction' set to 'rtl'
  • Setting 'text-align' to 'justify' and 'white-space' to 'pre', text-align is computed to its initial value.
text-align-white-space-006 = Ahem Text-align set to 'justify' with 'white-space' set to 'pre-line' and 'direction' set to 'rtl'
  • Setting 'text-align' to 'justify' and 'white-space' to 'pre-line', 'text-align' remains 'justified'.
text-align-white-space-007 = AhemOptional Text-align set to 'justify' with 'white-space' set to 'pre-wrap' and 'direction' set to 'rtl'
  • Setting 'text-align' to 'justify' and 'white-space' to 'pre-wrap', text-align is computed to its initial value.
text-align-white-space-008 = Ahem Text-align set to 'justify' with 'white-space' set to 'nowrap' and 'direction' set to 'rtl'
  • Setting 'text-align' to 'justify' and 'white-space' to 'nowrap', text-align is computed to 'justify'.
text-justify-001 = text-justify: none
  • text-justify:none means justification is disabled: there are no justification opportunities within the text.
text-justify-002 text-justify: inter-character
  • text-justify:inter-character means justification adjusts spacing between each pair of adjacent typographic character units.
text-justify-003 text-justify: distribute
  • text-justify:distribute means justification adjusts spacing between each pair of adjacent typographic character units.
text-justify-004 text-justify: inter-character, arabic
  • 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.
text-justify-005 text-justify: distribute, arabic
  • 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.
word-spacing-justify-001 = Ahem Word-spacing and 'text-align: justify'
  • The word spacing is changed when combined with 'text-align: justify'.
text-align-computed Script getComputedStyle().textAlign
  • text-align computed value is as specified.
text-align-invalid Script parsing text-align with invalid values
  • text-align supports only the grammar 'start | end | left | right | center | justify | match-parent | justify-all'.
text-align-valid Script parsing text-align with valid values
  • text-align supports the full grammar 'start | end | left | right | center | justify | match-parent | justify-all'.
text-align-006 = text-align - start (basic)
  • The 'text-align' property set to 'start' on a block element aligns the text to the start edge.
text-align-007 = text-align - end (basic)
  • The 'text-align' property set to 'end' on a block element aligns the text to the end edge.
text-align-008 = text-align - match-parent (basic)
  • The 'text-align' property set to 'match-parent' on a block element behaves the same as 'inherit'.
+ 6.2 Default Text Alignment: the text-align-all property
text-align-last-wins-001 = text-align-last has precedence over text-align-all
  • If a line is both the first and last line, text-align-last applies
text-align-all-invalid Script parsing text-align-all with invalid values
  • text-align-all supports only the grammar 'start | end | left | right | center | justify | match-parent'.
text-align-all-valid Script parsing text-align-all with valid values
  • text-align-all supports the full grammar 'start | end | left | right | center | justify | match-parent'.
+ 6.3 Last Line Alignment: the text-align-last property
text-align-last-empty-inline Script Tests justification of empty inline element
text-align-last-wins-001 = text-align-last has precedence over text-align-all
  • If a line is both the first and last line, text-align-last applies
text-align-last-computed Script CSS Text: getComputedStyle().textAlignLast
  • text-align-last computed value is specified keyword.
text-align-last-invalid Script parsing text-align-last with invalid values
  • text-align-last supports only the grammar 'auto | start | end | left | right | center | justify | match-parent'.
text-align-last-valid Script parsing text-align-last with valid values
  • text-align-last supports the full grammar 'auto | start | end | left | right | center | justify | match-parent'.
text-align-last-001 text-align-last - start (basic)
  • The 'text-align-last' property set to 'start' on a block element aligns the last line text to the start edge.
text-align-last-002 text-align-last - end (basic)
  • The 'text-align-last' property set to 'right' on a block element aligns the last line text to the end edge.
text-align-last-003 text-align-last - left (basic)
  • The 'text-align-last' property set to 'left' on a block element aligns the last line text to the left.
text-align-last-004 text-align-last - right (basic)
  • The 'text-align-last' property set to 'right' on a block element aligns the last line text to the right.
text-align-last-005 text-align-last - center (basic)
  • The 'text-align-last' property set to 'center' on a block element aligns the last line text to the center.
text-align-last-006 text-align-last - justify (basic)
  • The 'text-align-last' property set to 'justify' on a block element aligns the last line text to both left and right edges
text-align-last-007 text-align-last - auto and text-align - right
  • 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'.
text-align-last-008 text-align-last - auto and text-align - end
  • 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'.
text-align-last-009 text-align-last - auto and text-align - center
  • 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'.
text-align-last-010 = text-align-last - right(one line inside block element)
  • The 'text-align-last' property set to 'right' on a block element aligns the only one line text to the right.
text-align-last-011 = text-align-last - end(one line inside block element)
  • The 'text-align-last' property set to 'end' on a block element aligns the only one line text to the right.
text-align-last-012 text-align-last - center(one line inside block element)
  • The 'text-align-last' property set to 'center' on a block element aligns the only one line text to the center.
text-align-last-013 text-align-last applied to "display: inline" div element
  • Test checks that the 'text-align-last' property is invalid if the container element is not block element.
text-align-last-014 text-align-last applied to "display: block" span element
  • Test checks that the 'text-align-last' property is valid if the span element set 'display: block'.
+ 6.4 Justification Method: the text-justify property
letter-spacing-justify-001 = Ahem Letter-spacing and 'text-align: justify'
  • The letter-spacing is not changed when combined with 'text-align: justify'.
text-justify-006 = text-justify applies inline
  • text-justify applies to inline elements
text-justify-distribute-001 = CSS Text 7.4. Justification Method: text-justify: distribute
  • text-justify:distribute means justification adjusts spacing between each pair of adjacent typographic character units.
text-justify-inter-character-001 = CSS Text 7.4. Justification Method: text-justify: inter-character
  • text-justify:inter-character means justification adjusts spacing between each pair of adjacent typographic character units.
text-justify-inter-word-001 = CSS Text 7.4. Justification Method: text-justify: inter-word
  • text-justify:inter-word means justification adjusts spacing at word separators only.
text-justify-none-001 = CSS Text 7.4. Justification Method: text-justify: none
  • text-justify:none means justification is disabled: there are no justification opportunities within the text.
word-spacing-justify-001 = Ahem Word-spacing and 'text-align: justify'
  • The word spacing is changed when combined with 'text-align: justify'.
text-justify-computed Script CSS Text: getComputedStyle().textJustify
  • text-justify computed value is specified keyword.
text-justify-invalid Script parsing text-justify with invalid values
  • text-justify supports only the grammar 'auto | none | inter-word | inter-character'.
text-justify-valid Script parsing text-justify with valid values
  • text-justify supports the full grammar 'auto | none | inter-word | inter-character'.
+ 6.4.1 Expanding and Compressing Text
+ 6.4.2 Handling Symbols and Punctuation
+ 6.4.3 Unexpandable Text
+ 6.4.4 Cursive Scripts
+ 6.4.5 Minimum Requirements for auto Justification