CSS Writing Modes Module Level 3 CR Test Suite

Vertical Writing Modes (157 tests)

Test Refs Flags Info
+ 3 Vertical Writing Modes
+ 3.1 Introduction to Vertical Writing
+ 3.2 Block Flow Direction: the writing-mode property
alt-display-vertical-001-manual Recommend alternate text should display in the writing mode of associated element
block-flow-direction-004 = Ahem 'writing-mode' - initial value is 'horizontal-tb'
  • This test checks that the default, initial value of writing-mode is 'horizontal-tb'.
block-flow-direction-htb-001 = Ahem horizontal-tb - block flow direction of block-level boxes
  • This test checks that block-level boxes in a 'horizontal-tb' writing mode are laid out one after the other, vertically, with the first beginning at the top of a containing block; they are ordered from top to bottom meaning that the 1st block box is the topmost one, then the 2nd block is juxtaposed at its bottom, then the 3rd block is juxtaposed to the 2nd block at its bottom, etc...
block-flow-direction-vlr-003 = Ahem vertical-lr - block flow direction of block-level boxes
  • This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-lr' are laid out one after the other with the first beginning at the left-hand side of its containing block; they are ordered from left to right meaning that the 1st block box is the leftmost one and, then the 2nd block is juxtaposed at the right-hand side of 1st block, then the 3rd block is juxtaposed at the 2nd block on its right-hand side, etc...
block-flow-direction-vlr-007 = Ahem 'float: right' and 'vertical-lr' - block flow direction of block-level boxes
  • This test checks that a right-floated box with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction.
block-flow-direction-vlr-008 = Ahem 'float: right' and 'vertical-lr' - block flow direction of block-level boxes
  • This test checks that right-floated boxes with 'writing-mode' set to 'vertical-lr' establish block formating contexts with a left-to-right block flow direction.
block-flow-direction-vlr-010 = Ahem position absolute and 'vertical-lr' - block flow direction of block-level boxes
  • This test checks that an absolutely positioned box with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction.
block-flow-direction-vlr-014 = Ahem inline-block and 'vertical-lr' - block flow direction of block-level boxes
  • This test checks that an inline-block with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction.
block-flow-direction-vlr-015 = Ahem inline-block and 'vertical-lr' - block flow direction of block-level boxes
  • This test checks that an inline-block with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction.
block-flow-direction-vlr-016 = Ahem inline-block and 'vertical-lr' - block flow direction of block-level boxes
  • This test checks that an inline-block with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction.
block-flow-direction-vlr-018 = Ahem table-cell and 'vertical-lr' - block flow direction of block-level boxes
  • This test checks that a table-cell with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction.
block-flow-direction-vlr-020 = Ahem table-caption and 'vertical-lr' - block flow direction of block-level boxes
  • This test checks that a table-caption with its 'writing-mode' set to 'vertical-lr' establishes a block formating context with a left-to-right block flow direction.
block-flow-direction-vlr-022 = AhemBitmaps list and vertical-lr - block flow direction of block-level boxes
  • This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-lr' are laid out one after the other with the first beginning at the left-hand side of its containing block; they are ordered from left to right meaning that the 1st block box is the leftmost one and then the 2nd block is juxtaposed to the right-hand side of 1st block, the 3rd block is juxtaposed to the 2nd block on its right-hand side, etc...
block-flow-direction-vlr-023 = Ahem vertical-lr - block flow direction of block-level boxes
  • This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-lr' are laid out one after the other with the first beginning at the left-hand side of its containing block; they are ordered from left to right meaning that the 1st block box is the leftmost one and, then the 2nd block is juxtaposed at the right-hand side of 1st block, then the 3rd block is juxtaposed at the 2nd block on its right-hand side, etc...
block-flow-direction-vrl-002 = Ahem vertical-rl - block flow direction of block-level boxes
  • This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-rl' are laid out one after the other with the first beginning at the right-hand side of its containing block; they are ordered from right to left meaning that the 1st block box is the rightmost one, then the 2nd block is juxtaposed at its left-hand side, then the 3rd block is juxtaposed at the 2nd block on its left-hand side, etc...
block-flow-direction-vrl-005 = Ahem 'float: left' and 'vertical-rl' - block flow direction of block-level boxes
  • This test checks that a left-floated box with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction.
block-flow-direction-vrl-006 = Ahem 'float: left' and 'vertical-rl' - block flow direction of block-level boxes
  • This test checks that left-floated boxes with 'writing-mode' set to 'vertical-rl' establish block formating contexts with a right-to-left block flow direction.
block-flow-direction-vrl-009 = Ahem position absolute and 'vertical-rl' - block flow direction of block-level boxes
  • This test checks that an absolutely positioned box with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction.
block-flow-direction-vrl-011 = Ahem inline-block and 'vertical-rl' - block flow direction of block-level boxes
  • This test checks that an inline-block with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction.
block-flow-direction-vrl-012 = Ahem inline-block and 'vertical-rl' - block flow direction of block-level boxes
  • This test checks that an inline-block with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction.
block-flow-direction-vrl-013 = Ahem inline-block and 'vertical-rl' - block flow direction of block-level boxes
  • This test checks that an inline-block with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction.
block-flow-direction-vrl-017 = Ahem table-cell and 'vertical-rl' - block flow direction of block-level boxes
  • This test checks that a table-cell with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction.
block-flow-direction-vrl-019 = Ahem table-caption and 'vertical-rl' - block flow direction of block-level boxes
  • This test checks that a table-caption with its 'writing-mode' set to 'vertical-rl' establishes a block formating context with a right-to-left block flow direction.
block-flow-direction-vrl-021 = AhemBitmaps list and vertical-rl - block flow direction of block-level boxes
  • This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-rl' are laid out one after the other with the first beginning at the right-hand side of its containing block; they are ordered from right to left meaning that the 1st block box is the rightmost one and then the 2nd block is juxtaposed to its left-hand side, the 3rd block is juxtaposed to the 2nd block on its left-hand side, etc...
block-flow-direction-vrl-024 = Ahem vertical-rl - block flow direction of block-level boxes
  • This test checks that block-level boxes in a block formating context with 'writing-mode' set to 'vertical-rl' are laid out one after the other with the first beginning at the right-hand side of its containing block; they are ordered from right to left meaning that the 1st block box is the rightmost one, then the 2nd block is juxtaposed at its left-hand side, then the 3rd block is juxtaposed at the 2nd block on its left-hand side, etc...
block-flow-direction-vrl-025 = Bitmaps writing mode of document - horizontal position of first block
  • This test checks that, when 'writing-mode' value of the root element is set to 'vertical-rl', then its block boxes are laid out leftwardedly (from right to left) one after the other beginning at its righthand side.
block-flow-direction-vrl-026 = Ahem vertical-rl - block flow direction of block-level boxes
  • This test checks 1.block flow direction, 2.inline direction when 'writing-mode' is set to 'vertical-rl'.
ch-unit-002 = the ch unit in vertical orientation
  • In vertical upright, the ch unit is equal to the used vertical advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it.
css-flexbox-row = flex direction: row, writing mode vertical
  • Test checks that when writing mode is vertical and flex-flow: row, the flex container is vertical.
css-flexbox-row-reverse = flex direction: row, writing mode vertical
  • Test checks that when writing mode is vertical and flex-flow: row-reverse, the flex container is vertical.
css-flexbox-row-reverse-wrap = flex direction: row, writing mode vertical
  • Test checks that when writing mode is vertical and flex-flow: row-reverse wrap, the flex container is vertical.
css-flexbox-row-reverse-wrap-reverse = flex direction: row, writing mode vertical
  • Test checks that when writing mode is vertical and flex-flow: row-reverse wrap-reverse, the flex container is vertical.
css-flexbox-row-wrap = flex direction: row, writing mode vertical
  • Test checks that when writing mode is vertical and flex-flow: row wrap, the flex container is vertical.
css-flexbox-row-wrap-reverse = flex direction: row, writing mode vertical
  • Test checks that when writing mode is vertical and flex-flow: row wrap-reverse, the flex container is vertical.
different-block-flow-dir-001 = descendant inline with a different 'writing-mode' value
  • This test checks that if an inline box has a different block flow direction than its containing block then its display computes to 'inline-block' in which case its specified width and specified height are not ignored and have to be rendered.
different-block-flow-dir-002 = descendant inline with a different 'writing-mode' value
  • This test checks that if an inline box has a different block flow direction than its containing block then its display computes to 'inline-block' in which case its specified width and specified height are not ignored and have to be rendered.
first-page-vlr-003 Paged first page of a document with vertical-lr writing-mode
  • When 'writing-mode' is set on the root element, then it determines the default page flow (or progression) direction. In this test, the page flow (or progression) direction is left-to-right. This test checks that the first page of a document whose document root has 'writing-mode' set to 'vertical-lr' is the :right page.
first-page-vrl-002 BitmapsPaged first page of a document with vertical-rl writing-mode
  • When 'writing-mode' is set on the root element, then it determines the default page flow (or progression) direction. In this test, the page flow (or progression) direction is right-to-left. This test checks that the first page of a document whose document root has 'writing-mode' set to 'vertical-rl' is the :left page.
flexbox_align-items-stretch-writing-modes = Flexbox align-items: stretch with writing-mode vertical-lr and vertical-rl
  • vertical-writing-mode flex items should stretch
font-default-04 = = = font default features
  • For upright text within vertical text runs, vertical alternates (OpenType feature: vert) must be enabled
form-controls-vlr-004 BitmapsRecommend order, orientation and layout of form controls in 'vertical-lr' writing-mode
  • This test checks the order, the flow, the orientation and layout of form controls used in Example 4 of section 3.1 when the 'writing-mode' of the whole form element is set to 'vertical-lr'.
form-controls-vlr-005 Recommend form controls in 'vertical-lr' writing-mode
  • This test checks the rendering of various form controls (select, optgroup, options, various types of input and buttons) written with latin text in 'vertical-lr' writing mode. The text of replaced content should match the replaced element's writing mode and line orientation; therefore, in this test, a) the text's inline base direction must be from top to bottom, b) the glyphs must be rotated 90° clockwise and c) the block flow direction must be from left to right.
form-controls-vrl-004 BitmapsRecommend order, orientation and layout of form controls in 'vertical-rl' writing-mode
  • This test checks the order, the flow, the orientation and layout of form controls used in Example 4 of section 3.1 when the 'writing-mode' of the whole form element is set to 'vertical-rl'.
form-controls-vrl-005 Recommend form controls in 'vertical-rl' writing-mode
  • This test checks the rendering of various form controls (select, optgroup, options, various types of input and buttons) written with latin text in 'vertical-rl' writing mode. The text of replaced content should match the replaced element's writing mode and line orientation; therefore, in this test, a) the text's inline base direction must be from top to bottom, b) the glyphs must be rotated 90° clockwise and c) the block flow direction must be from right to left.
ic-unit-002 = the ic unit in vertical orientation
  • In vertical upright, the ic unit is equal to the used vertical advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it.
ic-unit-003 = the ic unit in vertical orientation
  • In vertical mixed, the ic unit is equal to the used vertical advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it.
ic-unit-004 = the ic unit in vertical orientation
  • In vertical sideways, the ic unit is equal to the used horizontal advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it.
inline-box-border-vlr-001 =
inline-replaced-vlr-003 = Bitmaps inline replaced element and 'vertical-lr'
  • This test checks that the content of an inline replaced element does not rotate due to the writing mode.
inline-replaced-vrl-002 = Bitmaps inline replaced element and 'vertical-rl'
  • This test checks that the content of an inline replaced element does not rotate due to the writing mode.
line-box-direction-htb-001 = Ahem horizontal-tb - ordering direction of line boxes
  • This test checks that line boxes of a block box in a 'horizontal-tb' writing mode are laid out one after the other, vertically, with the first beginning at the top of the block box; they are ordered from top to bottom meaning that the 1st line box is the topmost one and then the 2nd block is juxtaposed to its bottom, the 3rd block is juxtaposed to the 2nd block on its left-hand side, etc...
line-box-direction-vlr-003 = Ahem vertical-lr - ordering direction of line boxes
  • This test checks that line boxes in a block box with 'writing-mode' set to 'vertical-lr' are laid out one after the other with the first beginning at the left-hand side of the block box; they are ordered from left to right meaning that the 1st line box is the leftmost one and then the 2nd line box is juxtaposed to the right-hand side of 1st line box, the 3rd line box is juxtaposed to the 2nd line box on its right-hand side, etc...
line-box-direction-vlr-007 = Ahem 'float: right' and 'vertical-lr' - ordering direction of line boxes
  • This test checks that the line boxes of a right-floated box with its 'writing-mode' set to 'vertical-lr' will be ordered from left to right.
line-box-direction-vlr-008 = Ahem 'float: right' and 'vertical-lr' - ordering direction of line boxes
  • This test checks that the line boxes of right-floated boxes with 'writing-mode' set to 'vertical-lr' will be ordered from left to right.
line-box-direction-vlr-010 = Ahem position absolute and 'vertical-lr' - ordering direction of line boxes
  • This test checks that line boxes of an absolutely positioned box with its 'writing-mode' set to 'vertical-lr' will be ordered from left to right.
line-box-direction-vlr-013 = Ahem inline-block and 'vertical-lr' - ordering direction of line boxes
  • This test checks that lines boxes of descendant block boxes of an inline-block with its 'writing-mode' set to 'vertical-lr' are ordered from left to right.
line-box-direction-vlr-014 = Ahem inline-block and 'vertical-lr' - ordering direction of line boxes
  • This test checks that lines boxes of descendant block boxes of inline-blocks with 'writing-mode' set to 'vertical-lr' are ordered from left to right.
line-box-direction-vlr-016 = Ahem table-cell and 'vertical-lr' - ordering direction of line boxes
  • This test checks that the lines boxes of a table-cell with its 'writing-mode' set to 'vertical-lr' are ordered from left to right.
line-box-direction-vlr-018 = Ahem table-caption and 'vertical-lr' - ordering direction of line boxes
  • This test checks that the lines boxes of a table-caption with its 'writing-mode' set to 'vertical-lr' are ordered from left to right.
line-box-direction-vlr-020 = Ahem list and 'vertical-lr' - ordering direction of line boxes
  • This test checks that line boxes in a block box with 'writing-mode' set to 'vertical-lr' are laid out one after the other with the first beginning at the left-hand side of the block box; they are ordered from left to right meaning that the 1st line box is the leftmost one and then the 2nd line box is juxtaposed to the right-hand side of 1st line box, the 3rd line box is juxtaposed to the 2nd line box on its right-hand side, etc...
line-box-direction-vrl-002 = Ahem vertical-rl - ordering direction of line boxes
  • This test checks that line boxes of a block box in a 'vertical-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost line of the block box; they are ordered from right to left meaning that the 1st line box is the rightmost one and then the 2nd line box is juxtaposed to its left-hand side, the 3rd block is juxtaposed to the 2nd line box on its left-hand side, etc...
line-box-direction-vrl-005 = Ahem 'float: left' and 'vertical-rl' - ordering direction of line boxes
  • This test checks that the line boxes of a left-floated box with its 'writing-mode' set to 'vertical-rl' will be ordered from right to left.
line-box-direction-vrl-006 = Ahem 'float: left' and 'vertical-rl' - ordering direction of line boxes
  • This test checks that the line boxes of left-floated boxes with 'writing-mode' set to 'vertical-rl' will be ordered from right to left.
line-box-direction-vrl-009 = Ahem position absolute and 'vertical-rl' - ordering direction of line boxes
  • This test checks that line boxes of an absolutely positioned box with its 'writing-mode' set to 'vertical-rl' will be ordered from right to left.
line-box-direction-vrl-011 = Ahem inline-block and 'vertical-rl' - ordering direction of line boxes
  • This test checks that lines boxes of descendant block boxes of an inline-block with its 'writing-mode' set to 'vertical-rl' are ordered from right to left.
line-box-direction-vrl-012 = Ahem inline-block and 'vertical-rl' - ordering direction of line boxes
  • This test checks that lines boxes of descendant block boxes of inline-blocks with 'writing-mode' set to 'vertical-rl' are ordered from right to left.
line-box-direction-vrl-015 = Ahem table-cell and 'vertical-rl' - ordering direction of line boxes
  • This test checks that the lines boxes of a table-cell with its 'writing-mode' set to 'vertical-rl' are ordered from right to left.
line-box-direction-vrl-017 = Ahem table-caption and 'vertical-rl' - ordering direction of line boxes
  • This test checks that the lines boxes of a table-caption with its 'writing-mode' set to 'vertical-rl' are ordered from right to left.
line-box-direction-vrl-019 = Ahem list and 'vertical-rl' - ordering direction of line boxes
  • This test checks that line boxes of a block box in a 'vertical-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost line of the block box; they are ordered from right to left meaning that the 1st line box is the rightmost one and then the 2nd line box is juxtaposed to its left-hand side, the 3rd block is juxtaposed to the 2nd line box on its left-hand side, etc...
logical-props-001 = writing-modes and logical props: tr
  • The logical properties on table rows are resolved taking the writing mode of the element into account, even though the writing mode property does not apply to that element.
logical-props-002 = writing-modes and logical props: tbody
  • The logical properties on table row groups are resolved taking the writing mode of the element into account, even though the writing mode property does not apply to that element.
logical-props-003 = writing-modes and logical props: col
  • The logical properties on table columns are resolved taking the writing mode of the element into account, even though the writing mode property does not apply to that element.
logical-props-004 = writing-modes and logical props: colgroup
  • The logical properties on table column groups are resolved taking the writing mode of the element into account, even though the writing mode property does not apply to that element.
mongolian-span-001 = Test Mongolian in a span renders the same as without the span
page-flow-direction-002 BitmapsPaged 'writing-mode: vertical-rl' - default page flow (progression) direction
  • This test checks that when 'writing-mode' is set on the root element, then it determines the default page flow (or progression) direction. In this test, the page flow (or progression) direction is right-to-left.
page-flow-direction-003 BitmapsPaged 'writing-mode: vertical-lr' - default page flow (progression) direction
  • This test checks that when 'writing-mode' is set on the root element, then it determines the default page flow (or progression) direction. In this test, the page flow (or progression) direction is left-to-right.
replaced-content-image-002 Recommend alternate text of image and vertical writing mode
  • This test checks that alternate text (latin) of image rotates 90° clockwise in vertical writing mode.
replaced-content-image-003 Recommend alternate text of image and vertical writing mode
  • This test checks that alternate text (latin) of image rotates 90° clockwise in vertical writing mode.
row-progression-vlr-003 = Ahem vertical-lr - table rows progression
  • This test checks that rows of a table element with in a 'vertical-lr' writing mode are laid out one after the other, rightwardedly, with the first beginning at the leftmost side of the table box; table rows are ordered from left to right meaning that the 1st row is the leftmost one and then the 2nd row is juxtaposed to its right-hand side, the 3rd row is juxtaposed to the 2nd row on its right-hand side, etc...
row-progression-vlr-005 = Ahem vertical-lr - table rows progression and colspan
  • This test checks that colspanned cells in a table are handled according to a top-to-bottom inline flow direction.
row-progression-vlr-007 = Ahem vertical-lr - table rows progression and rowspan
  • This test checks that rowspanned cells in a table are handled according to a left-to-right direction.
row-progression-vrl-002 = Ahem vertical-rl - table rows progression
  • This test checks that rows of a table element with in a 'vertical-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost side of the table box; table rows are ordered from right to left meaning that the 1st row is the rightmost one and then the 2nd row is juxtaposed to its left-hand side, the 3rd row is juxtaposed to the 2nd row on its left-hand side, etc...
row-progression-vrl-004 = Ahem vertical-rl - table rows progression and colspan
  • This test checks that colspanned cells in a table are handled according to a top-to-bottom inline flow direction.
row-progression-vrl-006 = Ahem vertical-rl - table rows progression and rowspan
  • This test checks that rowspanned cells in a table are handled according to a right-to-left direction.
row-progression-vrl-008 = Ahem vertical-rl - table rows progression (thead, 2 tbodies, tfoot)
  • This test checks that rows of a table element with in a 'vertical-rl' writing mode are laid out one after the other, leftwardedly, with the first beginning at the rightmost side of the table box; table rows are ordered from right to left meaning that the 1st row is the rightmost one and then the 2nd row is juxtaposed to its left-hand side, the 3rd row is juxtaposed to the 2nd row on its left-hand side, etc...
table-cell-001 = orthogonal table cell
table-cell-002 = orthogonal table cell
table-progression-vlr-001 = vertical-lr Table Row/Rowgroup/Cell Ordering
  • This test checks that vertical-lr tables order rows/rowgroups left to right and cells top-to-bottom (LTR) or bottom-to-top (RTL) per 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table rows and row groups.
table-progression-vlr-002 = vertical-lr Table Column/Colgroup Ordering
  • This test checks that vertical-lr tables order columns top-to-bottom (LTR) or bottom-to-top (RTL) per the table's 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table columns and column groups.
table-progression-vlr-003 = vertical-lr upright orientation Table Row/Rowgroup/Cell Ordering
  • This test checks that vertical-lr tables, whether LTR or RTL, order rows/rowgroups left to right and cells top-to-bottom when text-orientation is upright.
table-progression-vlr-004 = vertical-lr upright orientation Table Column/Colgroup Ordering
  • This test checks that vertical-lr tables, whether LTR or RTL, order columns top-to-bottom when text-orientation is upright.
table-progression-vrl-001 = vertical-rl Table Row/Rowgroup/Cell Ordering
  • This test checks that vertical-rl tables order rows/rowgroups right to left and cells top-to-bottom (LTR) or bottom-to-top (RTL) per 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table rows and row groups.
table-progression-vrl-002 = vertical-rl Table Column/Colgroup Ordering
  • This test checks that vertical-rl tables order columns top-to-bottom (LTR) or bottom-to-top (RTL) per the table's 'direction'. This test also checks that 'writing-mode' and 'direction' do not apply to table columns and column groups.
table-progression-vrl-003 = vertical-rl upright orientation Table Row/Rowgroup/Cell Ordering
  • This test checks that vertical-rl tables, whether LTR or RTL, order rows/rowgroups right to left and cells top-to-bottom when text-orientation is upright.
table-progression-vrl-004 = vertical-rl upright orientation Table Column/Colgroup Ordering
  • This test checks that vertical-rl tables, whether LTR or RTL, order columns top-to-bottom when text-orientation is upright.
tooltip-display-vertical-001-manual InteractOptional tooltip should display in the writing mode of associated element
writing-mode-parsing-001 DOM/JSScript CSS Writing Modes: parsing writing-mode
  • This test asserts the parser and getComputedStyle works correctly for the writing-mode property.
writing-mode-vertical-rl-003 = Ahem writing-mode: horizontal-tb nested in vertical-rl
  • when child block has its own writing-mode, child block's writing-mode overwrites parent block's writing-mode.
writing-mode-vlr-001-manual writing mode:vertical-lr, vertical lines
  • writing-mode:vertical-lr will display a line of text vertically.
writing-mode-vlr-002-manual writing mode:vertical-lr, line wrap
  • writing-mode:vertical-lr will wrap lines from left to right.
writing-mode-vlr-003-manual writing mode:vertical-lr, alignment
  • writing-mode:vertical-lr will cause lines to display from the left side of the enclosing box.
writing-mode-vlr-005-manual writing mode:vertical-lr, default Mongolian orientation
  • By default, writing-mode:vertical-lr will display Mongolian characters with the right orientation.
writing-mode-vlr-006-manual writing mode:vertical-lr, Mongolian joining
  • By default, writing-mode:vertical-lr will display Mongolian characters with correct joining behaviour.
writing-mode-vlr-007-manual writing mode:vertical-lr, default Latin orientation
  • By default, writing-mode:vertical-lr will display Latin characters rotated 90° right.
writing-mode-vlr-008-manual writing mode:vertical-lr, default Arabic orientation
  • By default, writing-mode:vertical-lr will display Arabic characters rotated 90° right.
writing-mode-vlr-009-manual writing mode:vertical-rl, default Arabic direction
  • By default, writing-mode:vertical-lr will display Arabic characters progressing up the page.
writing-mode-vlr-010-manual writing mode:vertical-lr, Arabic joining
  • By default, writing-mode:vertical-lr will display Arabic characters using cursive joining.
writing-mode-vlr-012-manual writing mode:vertical-lr, Latin wrapping
  • By default, writing-mode:vertical-lr will wrap Latin text across a line break such that the first word in memory is on the left.
writing-mode-vlr-014-manual writing mode:vertical-lr, Arabic wrapping
  • By default, writing-mode:vertical-lr will arrange Arabic text across a line break such that the first word in memory is on the left side of the line break.
writing-mode-vlr-015-manual writing mode:vertical-lr, image orientation
  • By default, replaced content such as images is displayed upright.
writing-mode-vlr-forms-001-manual Recommend writing mode:vertical-lr, input type=text
  • writing-mode:vertical-lr will display an input field for text vertically, and with vertical text inside.
writing-mode-vlr-forms-002-manual Recommend writing mode:vertical-lr, input type=text placeholder
  • writing-mode:vertical-lr will display an input field for text vertically, and with vertical placeholder text inside.
writing-mode-vlr-forms-003-manual Recommend writing mode:vertical-lr, textarea
  • writing-mode:vertical-lr will display a textarea field vertically, and with vertical text inside.
writing-mode-vlr-forms-004-manual Recommend writing mode:vertical-lr, textarea placeholder
  • writing-mode:vertical-lr will display a textarea field vertically, and with vertical placeholder text inside.
writing-mode-vlr-forms-005-manual Recommend writing mode:vertical-lr, select, selected item
  • writing-mode:vertical-lr will display a select box vertically, and the selected item will be displayed vertically.
writing-mode-vlr-forms-006-manual Recommend writing mode:vertical-lr, select, options
  • writing-mode:vertical-lr will display selection options vertically.
writing-mode-vlr-table-001-manual writing mode:vertical-lr, vertical lines
  • writing-mode:vertical-lr will display a line of text vertically within a table cell.
writing-mode-vlr-table-002-manual writing mode:vertical-lr, table cell order
  • writing-mode:vertical-lr will display table columns horizontally, with the top of the table on the left.
writing-mode-vrl-001-manual writing mode:vertical-rl, vertical lines
  • writing-mode:vertical-rl will display a line of text vertically.
writing-mode-vrl-002-manual writing mode:vertical-rl, line wrap
  • writing-mode:vertical-rl will wrap lines from right to left.
writing-mode-vrl-003-manual writing mode:vertical-rl, alignment
  • writing-mode:vertical-lr will cause lines to display from the right side of the enclosing box.
writing-mode-vrl-005-manual writing mode:vertical-rl, default Han orientation
  • By default, writing-mode:vertical-rl will display chinese characters upright.
writing-mode-vrl-007-manual writing mode:vertical-rl, default Latin orientation
  • writing-mode:vertical-lr will display Latin characters rotated 90° right by default.
writing-mode-vrl-008-manual writing mode:vertical-rl, default Arabic orientation
  • By default, writing-mode:vertical-lr will display Arabic characters rotated 90° right.
writing-mode-vrl-009-manual writing mode:vertical-rl, default Arabic direction
  • By default, writing-mode:vertical-lr will display Arabic characters progressing up the page.
writing-mode-vrl-010-manual writing mode:vertical-rl, Arabic joining
  • By default, writing-mode:vertical-lr will display Arabic characters using cursive joining.
writing-mode-vrl-012-manual writing mode:vertical-rl, Latin wrapping
  • By default, writing-mode:vertical-rl will wrap Latin text across a line break such that the first word in memory is on the right.
writing-mode-vrl-014-manual writing mode:vertical-rl, Arabic wrapping
  • By default, writing-mode:vertical-rl will arrange Arabic text across a line break such that the first word in memory is on the right-hand side of the line break.
writing-mode-vrl-015-manual writing mode:vertical-rl, image orientation
  • By default, replaced content such as images is displayed upright.
writing-mode-vrl-forms-001-manual Recommend writing mode:vertical-rl, input type=text
  • writing-mode:vertical-rl will display an input field for text vertically, and with vertical text inside.
writing-mode-vrl-forms-002-manual Recommend writing mode:vertical-rl, input type=text placeholder
  • writing-mode:vertical-rl will display an input field for text vertically, and with vertical placeholder text inside.
writing-mode-vrl-forms-003-manual Recommend writing mode:vertical-rl, textarea
  • writing-mode:vertical-rl will display a textarea field vertically, and with vertical text inside.
writing-mode-vrl-forms-004-manual Recommend writing mode:vertical-rl, textarea placeholder
  • writing-mode:vertical-rl will display a textarea field vertically, and with vertical placeholder text inside.
writing-mode-vrl-forms-005-manual Recommend writing mode:vertical-rl, select, selected item
  • writing-mode:vertical-rl will display a select box vertically, and the selected item will be displayed vertically.
writing-mode-vrl-forms-006-manual Recommend writing mode:vertical-rl, select, options
  • writing-mode:vertical-rl will display selection options vertically.
writing-mode-vrl-table-001-manual writing mode:vertical-rl, vertical lines
  • writing-mode:vertical-rl will display a line of text vertically within a table cell.
writing-mode-vrl-table-002-manual writing mode:vertical-rl, table cell order
  • writing-mode:vertical-rl will display table columns horizontally, with the top of the table on the right.
flexbox-writing-mode-007 = Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode
flexbox-writing-mode-008 = Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode
flexbox-writing-mode-009 = Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode
flexbox-writing-mode-010 = Testing a mix of flex items with various values for 'writing-mode' / 'direction' in a horizontal row-oriented flex container.
flexbox-writing-mode-011 = Testing a mix of flex items with various values for 'writing-mode' / 'direction' in a vertical row-oriented flex container.
flexbox-writing-mode-012 = Testing a mix of flex items with various values for 'writing-mode' / 'direction' in a vertical row-oriented flex container with 'direction' flipped.
flexbox-writing-mode-013 = Testing a mix of flex items with various values for 'writing-mode' / 'direction' in a horizontal column-oriented flex container.
flexbox-writing-mode-014 = Testing a mix of flex items with various values for 'writing-mode' / 'direction' in a vertical column-oriented flex container.
flexbox-writing-mode-015 = Testing a mix of flex items with various values for 'writing-mode' / 'direction' in a vertical column-oriented flex container with 'direction' flipped.
flexbox-writing-mode-016 = Testing auto-sized flex containers with various 'writing-mode' values and various padding amounts on flex items.
line-through-vertical =
writing-mode-computed Script CSS Writing Modes: getComputedStyle().writingMode
  • writing-mode computed value is as specified.
writing-mode-invalid Script CSS Writing Modes Level 3: parsing writing-mode with invalid values
  • writing-mode supports only the grammar 'horizontal-tb | vertical-rl | vertical-lr'.
writing-mode-valid Script CSS Writing Modes Level 3: parsing writing-mode with valid values
  • writing-mode supports the full grammar 'horizontal-tb | vertical-rl | vertical-lr'.
writing-mode-vertical-lr-002 = Ahem writing-mode: vertical-lr - basic inline case
writing-mode-vertical-rl-001 = Ahem writing-mode: vertical-rl - basic inline case
writing-mode-vertical-rl-002 = Ahem writing-mode: vertical-rl - basic inline case
+ 3.2.1 Obsolete SVG1.1 writing-mode Values
svg-aliasing-001 = Optional SVG writing modes values parsed as aliases
  • The legacy SVG writing mode values are parsed as simple aliases of the newer ones, and do not have side effects on bidi.
svg-aliasing-002 = Optional SVG writing modes values parsed as aliases
writing-mode-parsing-svg1-001 DOM/JSOptionalSVGScript CSS Writing Modes: parsing SVG 1.1 writing-mode values
  • This test asserts the parser and getComputedStyle works correctly for the SVG 1.1 writing-mode values.
+ 3.2.1.1 Supporting SVG1.1 writing-mode values in CSS syntax
+ 3.2.1.2 Supporting SVG1.1 writing-mode values in presentational attributes