Summarized test results:
CSS Logical

To run the test, or to see detailed, per character, results, click on the link in the left-most column. To see detailed results click on a row and look just above the table.

Key: pass fail partially successful

Updated

These tests check whether user agents correctly apply the property values defined in the CSS-logical-values spec. These are simple, user-oriented tests, designed to check basic functionality, rather than test all edge cases and implementation details.

Where the instructions tell you to look for red, the red should be clearly discernable behind the rest of the test – ignore any anti-aliasing 'glow'.


Block size

Links to run testsAssertionsGecko FirefoxBlink ChromeWebkit Safari
block size
block-size-001.html
The block-size property will set the size in the block progression dimension for horizontal text. passpasspass
inline size
inline-size-001.html
The inline-size property will set the size in the inline progression dimension for horizontal text. passpasspass
inline size
rtl-inline-size-001.html
The inline-size property will set the size in the inline progression dimension for horizontal text. passpasspass
block size (vlr)
vlr-block-size-001.html
The block-size property will set the size in the block progression dimension for vertical-lr text. passpasspass
block size (vrl)
vrl-block-size-001.html
The block-size property will set the size in the block progression dimension for vertical-rl text. passpasspass
inline size (vlr)
vlr-inline-size-001.html
The inline-size property will set the size in the inline progression dimension for vertical lr text. passpasspass
inline size (vrl)
vrl-inline-size-001.html
The inline-size property will set the size in the inline progression dimension for vertical rl text. passpasspass

Margin

Horizontal

Links to run testsAssertionsGecko FirefoxBlink ChromeWebkit Safari
margin-block-start
margin-block-start-001.html
The margin-block-end property produces a margin above horizontal text. passpasspass
margin-block-end
margin-block-end-001.html
The margin-block-end property produces a margin below horizontal text. passpasspass
margin-inline-start (ltr)
ltr-margin-inline-start-001.html
The margin-inline-start property produces a margin to the left of horizontal text. passpasspass
margin-inline-end (ltr)
ltr-margin-inline-end-001.html
The margin-inline-end property produces a margin to the right of horizontal text. passpasspass
margin-inline-start (rtl)
rtl-margin-inline-start-001.html
The margin-inline-start property produces a margin to the right of RTL horizontal text. passpasspass
margin-inline-end (rtl)
rtl-margin-inline-end-001.html
The margin-inline-end property produces a margin to the left of RTL horizontal text. passpasspass

Vertical

Links to run testsAssertionsGecko FirefoxBlink ChromeWebkit Safari
margin-block-start (vrl)
vrl-margin-block-start-001.html
The margin-block-start property produces a margin to the right of vertical text with lines ordered from right to left. passpasspass
margin-block-end (vrl)
vrl-margin-block-end-001.html
The margin-block-end property produces a margin to the left of vertical text with lines ordered from right to left. passpasspass
margin-inline-start (vrl)
vrl-margin-inline-start-001.html
The margin-inline-start property produces a margin above a line of vertical text. passpasspass
margin-inline-end (vrl)
vrl-margin-inline-end-001.html
The margin-inline-end property produces a margin above a line of vertical text. passpasspass
margin-block-start (vlr)
vlr-margin-block-start-001.html
The margin-block-start property produces a margin to the right of vertical text with lines ordered from left to right. passpasspass
margin-block-end (vlr)
vlr-margin-block-end-001.html
The margin-block-end property produces a margin to the left of vertical text with lines ordered from left to right. passpasspass
margin-inline-start (vlr)
vlr-margin-inline-start-001.html
The margin-inline-start property produces a margin above a line of vertical text. passpasspass
margin-inline-end (vlr)
vlr-margin-inline-end-001.html
The margin-inline-end property produces a margin below a line of vertical text. passpasspass

Shorthands

Links to run testsAssertionsGecko FirefoxBlink ChromeWebkit Safari
margin-block (1 value)
margin-block-001.html
The margin-block property with a single value produces a margin above and below horizontal text. passpasspass
margin-block (2 values)
margin-block-002.html
The margin-block property with 2 values produces a margin above and below horizontal text. passpasspass
margin-inline (1 value)
margin-inline-001.html
The margin-inline property with a single value produces a margin to the left and right of horizontal text. passpasspass
margin-inline (2 values)
margin-inline-002.html
The margin-inline property with 2 values produces a margin to the left and right of horizontal text. passpasspass
margin logical (4 values)
margin-001.html
[Exploratory] The margin property with a 'logical' flag and 4 values produces a margin all around horizontal text, with the correct dimensions. failfailfail

Padding

Horizontal

Links to run testsAssertionsGecko FirefoxBlink ChromeWebkit Safari
padding-block-start
padding-block-start-001.html
The padding-block-start property produces padding above horizontal text. passpasspass
padding-block-end
padding-block-end-001.html
The padding-block-end property produces padding below horizontal text. passpasspass
padding-inline-start
padding-inline-start-001.html
The padding-inline-start property produces padding to the left of horizontal text. passpasspass
padding-inline-end
padding-inline-end-001.html
The padding-inline-end property produces padding to the right of horizontal text. passpasspass
padding-inline-start (rtl)
rtl-padding-inline-start-001.html
The padding-inline-start property produces padding to the right of RTL horizontal text. passpasspass
padding-inline-end (rtl)
rtl-padding-inline-end-001.html
The padding-inline-end property produces padding to the left of RTL horizontal text. passpasspass

Vertical

Links to run testsAssertionsGecko FirefoxBlink ChromeWebkit Safari
padding-block-start (vrl)
vrl-padding-block-start-001.html
The padding-block-start property produces padding to the right of vertical text with lines ordered from right to left. passpasspass
padding-block-end (vrl)
vrl-padding-block-end-001.html
The padding-block-end property produces padding to the left of vertical text with lines ordered from right to left. passpasspass
padding-inline-start (vrl)
vrl-padding-inline-start-001.html
The padding-inline-start property produces a padding above a line of vertical text. passpasspass
padding-inline-end (vrl)
vrl-padding-inline-end-001.html
The padding-inline-end property produces padding below a line of vertical text. passpasspass
padding-block-start (vlr)
vlr-padding-block-start-001.html
The padding-block-start property produces padding to the left of vertical text with lines ordered from left to right. passpasspass
padding-block-end (vlr)
vlr-padding-block-end-001.html
The padding-block-end property produces padding to the right of vertical text with lines ordered from left to right. passpasspass
padding-inline-start (vlr)
vlr-padding-inline-start-001.html
The padding-inline-start property produces a padding above a line of vertical LR text. passpasspass
padding-inline-end (vlr)
vlr-padding-inline-end-001.html
The padding-inline-end property produces padding below a line of vertical LR text. passpasspass

Shorthands

Links to run testsAssertionsGecko FirefoxBlink ChromeWebkit Safari
padding-block (1 value)
padding-block-001.html
The padding-block property produces padding above & below horizontal text. passpasspass
padding-block (2 values)
padding-block-002.html
The padding-block property can produce padding above & below horizontal text by different amounts. passpasspass
padding logical (4 values)
padding-001.html
[Exploratory] The padding-block property with the logical keyword and 4 different values produces padding around a block of the with the correct dimensions. failfailfail

Border width

Horizontal

Links to run testsAssertionsGecko FirefoxBlink ChromeWebkit Safari
border-block-start-width
border-block-start-width-001.html
The border-block-start-width property affects the border above horizontal text. passpasspass
border-block-end-width
border-block-end-width-001.html
The border-block-end-width property affects the border below horizontal text. passpasspass
border-inline-start-width
border-inline-start-width-001.html
The border-inline-start-width property affects the border to the left of horizontal text. passpasspass
border-inline-end-width
border-inline-end-width-001.html
The border-inline-end-width property affects the border to the right of horizontal text. passpasspass

Vertical

Links to run testsAssertionsGecko FirefoxBlink ChromeWebkit Safari
border-block-start-width
vlr-border-block-start-width-001.html
The border-block-start-width property affects the border to the left in vertical text when lines run left to right. passpasspass
border-block-end-width
vlr-border-block-end-width-001.html
The border-block-end-width property affects the border to the right in vertical text where lines run left to right. passpasspass
border-inline-start-width
vlr-border-inline-start-width-001.html
The border-inline-start-width property affects the border above vertical text where lines are stacked left to right. passpasspass
border-inline-end-width
vlr-border-inline-end-width-001.html
The border-inline-end-width property affects the border below vertical text where lines run left to right. passpasspass
border-block-start-width
vrl-border-block-start-width-001.html
The border-block-start-width property affects the border to the right in vertical text. passpasspass
border-block-end-width
vrl-border-block-end-width-001.html
The border-block-end-width property affects the border to the left in vertical text. passpasspass
border-inline-start-width
vrl-border-inline-start-width-001.html
The border-inline-start-width property affects the border above vertical text. passpasspass
border-inline-end-width
vrl-border-inline-end-width-001.html
The border-inline-end-width property affects the border below vertical text. passpasspass

Shorthands

Links to run testsAssertionsGecko FirefoxBlink ChromeWebkit Safari
border-block-width
border-block-width-001.html
The border-block-width property affects the border above and below horizontal text. passpasspass
border-inline-width
border-inline-width-001.html
The border-inline-width property affects the border to the left and right of horizontal text. passpasspass
border-width
border-width-001.html
[Exploratory] The border-width property affects the borders all around horizontal text when the 'logical' flag is used, and sets appropriate thicknesses. failfailfail

Border style

Links to run testsAssertionsGecko FirefoxBlink ChromeWebkit Safari
border-block-start-style
border-block-start-style-001.html
The border-block-start-style property affects the border above horizontal text. passpasspass
border-block-end-style
border-block-end-style-001.html
The border-block-end-style property affects the border below horizontal text. passpasspass
border-inline-start-style
border-inline-start-style-001.html
The border-inline-start-style property affects the border to the left of horizontal text. passpasspass
border-inline-end-style
border-inline-end-style-001.html
The border-inline-end-style property affects the border to the right of horizontal text. passpasspass
border-block-start-style
vrl-border-block-start-style-001.html
The border-block-start-style property affects the border to the right in vertical text. passpasspass
border-block-end-style
vrl-border-block-end-style-001.html
The border-block-end-style property affects the border to the left in vertical text. passpasspass
border-inline-start-style
vrl-border-inline-start-style-001.html
The border-inline-start-style property affects the border above vertical text. passpasspass
border-inline-end-style
vrl-border-inline-end-style-001.html
The border-inline-end-style property affects the border below vertical text. passpasspass
border-block-start-style (vlr)
vlr-border-block-start-style-001.html
The border-block-start-style property affects the border to the right in vertical text where lines stack left to right. passfailpass
border-block-end-style (vlr)
vlr-border-block-end-style-001.html
The border-block-end-style property affects the border to the left in vertical text where lines stack left to right. passfailpass
border-inline-start-style (vlr)
vlr-border-inline-start-style-001.html
The border-inline-start-style property affects the border above vertical text where lines stack left to right. passpasspass
border-inline-end-style (vlr)
vlr-border-inline-end-style-001.html
The border-inline-end-style property affects the border below vertical text where lines stack left to right. passpasspass

Border color

Links to run testsAssertionsGecko FirefoxBlink ChromeWebkit Safari
border-block-start-color
border-block-start-color-001.html
The border-block-start-color property affects the border above horizontal text. passpasspass
border-block-end-color
border-block-end-color-001.html
The border-block-end-color property affects the border below horizontal text. passpasspass
border-inline-start-color
border-inline-start-color-001.html
The border-inline-start-color property affects the border to the left of horizontal text. passpasspass
border-inline-end-color
border-inline-end-color-001.html
The border-inline-end-color property affects the border to the right of horizontal text. passpasspass
border-block-start-color
vrl-border-block-start-color-001.html
The border-block-start-color property affects the border to the right in vertical text. passpasspass
border-block-end-color
vrl-border-block-end-color-001.html
The border-block-end-color property affects the border to the left in vertical text. passpasspass
border-inline-start-color
vrl-border-inline-start-color-001.html
The border-inline-start-color property affects the border above vertical text. passpasspass
border-inline-end-color
vrl-border-inline-end-color-001.html
The border-inline-end-color property affects the border below vertical text. passpasspass

Border radius

Links to run testsAssertionsGecko FirefoxBlink ChromeWebkit Safari
border-start-start-radius
border-start-start-radius-001.html
The border-start-start-radius property affects the top left corner of the border around horizontal text. passpasspass
border-start-end-radius
border-start-end-radius-001.html
The border-start-end-radius property affects the top right corner of the border around horizontal text. passpasspass
border-end-start-radius
border-end-start-radius-001.html
The border-end-start-radius property affects the bottom left corner of the border around horizontal text. passpasspass
border-end-end-radius
border-end-end-radius-001.html
The border-end-end-radius property affects the bottom right corner of the border around horizontal text. passpasspass
border-start-start-radius (vrl)
vrl-border-start-start-radius-001.html
The border-start-start-radius property affects the top right corner of the border around vertical RL text. passpasspass
border-start-end-radius (vrl)
vrl-border-start-end-radius-001.html
The border-start-end-radius property affects the bottom right corner of the border around vertical RL text. passpasspass
border-end-start-radius (vrl)
vrl-border-end-start-radius-001.html
The border-end-start-radius property affects the top left corner of the border around vertical RL text. passpasspass
border-end-end-radius (vrl)
vrl-border-end-end-radius-001.html
The border-end-end-radius property affects the bottom left corner of the border around vertical RL text. passpasspass
border-start-start-radius (vlr)
vlr-border-start-start-radius-001.html
The border-start-start-radius property affects the top left corner of the border around vertical LR text. passpasspass
border-start-end-radius (vlr)
vlr-border-start-end-radius-001.html
The border-start-end-radius property affects the bottom left corner of the border around vertical LR text. passpasspass
border-end-start-radius (vlr)
vlr-border-end-start-radius-001.html
The border-end-start-radius property affects the top right corner of the border around vertical LR text. passpasspass
border-end-end-radius (vlr)
vlr-border-end-end-radius-001.html
The border-end-end-radius property affects the bottom right corner of the border around vertical LR text. passpasspass

Caption side

Links to run testsAssertionsGecko FirefoxBlink ChromeWebkit Safari
block-start
caption-side-block-start-000.html
caption-side:block-start will cause captions to appear above the table in horizontal text. passpasspass
block-start (vrl)
caption-side-block-start-001.html
caption-side:block-start will cause captions to appear to the right in RL vertical text. passpasspass
block-start (vlr)
caption-side-block-start-002.html
caption-side:block-start will cause captions to appear to the right in LR vertical text. passpasspass
block-end
caption-side-block-end-000.html
caption-side:block-end will cause captions to appear below the table in horizontal text. failfailfail
block-end (vrl)
caption-side-block-end-001.html
caption-side:block-end will cause captions to appear to the left in RL vertical text. failfailfail
block-end (vlr)
caption-side-block-end-002.html
caption-side:block-end will cause captions to appear to the right in LR vertical text. failfailfail
inline-start
caption-side-inline-start-001.html
caption-side:inline-start will cause captions to appear to the left in horizontal LTR text. failfailfail
inline-start (rtl)
caption-side-inline-start-002.html
caption-side:inline-start will cause captions to appear to the right in horizontal RTL text. failfailfail
inline-end
caption-side-inline-end-001.html
caption-side:inline-end will cause captions to appear to the right in horizontal LTR text. failfailfail
inline-end
caption-side-inline-end-002.html
caption-side:inline-end will cause captions to appear to the left in horizontal RTL text. failfailfail

Floats

Links to run testsAssertionsGecko FirefoxBlink ChromeWebkit Safari
inline-start
float-inline-start-001.html
float:inline-start will cause captions to appear to the left in LTR horizontal text. passfailpass
inline-start
float-inline-start-002.html
float:inline-start will float text to the right in RTL horizontal text. passfailpass
inline-end
float-inline-end-001.html
float:inline-end will cause captions to appear to the right in LTR horizontal text. passfailpass
inline-end
float-inline-end-002.html
float:inline-end will cause captions to appear to the left in RTL horizontal text. passfailpass