css/css-borders

edit

WPT coverage of the tests of css/css-borders at the revision 5602b0f210e3. The tests link to their results in the browsers on wpt.fyi. The tentative tests (experimental features) and the reftests are listed separately from the stable tests.

Group	Passing	Tests	Pass rate
Stable	36	37	97%
Tentative	38	47	81%
Reftests	102	114	89%
All	176	198	89%

Failure reasons

The tests that do not pass (failing or disabled), by kind of reason. A test with several reasons counts once per kind.

BUG: 8
TEST BUG: 10
NOT IMPLEMENTED: 4

Stable tests

Test	Result	Subtests	Kind	Description
`border-image-width-interpolation-math-functions.html`	Pass	48 / 48
`border-shape/border-shape-animation.html`	Pass	100 / 100
`border-shape/border-shape-circle-hit-test-overflow-clip-margin.html`	Pass	1 / 1
`border-shape/border-shape-circle-hit-test-overflow-clip.html`	Pass	1 / 1
`border-shape/border-shape-circle-hit-test-siblings.html`	Pass	3 / 3
`border-shape/border-shape-circle-hit-test.html`	Pass	1 / 1
`border-shape/border-shape-hit-test-overflow.html`	Pass	1 / 1
`border-shape/border-shape-ignore-radius-computed.html`	Pass	1 / 1
`border-shape/border-shape-overflow-clip-margin-hit-test-ref-boxes.html`	Pass	3 / 3
`border-shape/border-shape-overflow-clip-margin-hit-test.html`	Pass	1 / 1
`border-shape/border-shape-replaced-hit-test.html`	Pass	1 / 1
`border-shape/border-shape-stacking-context-hit-test.html`	Pass	6 / 6
`border-width-hairline.html`	Pass	5 / 5
`corner-shape/corner-block-start-computed.html`	Pass	4 / 4
`corner-shape/corner-block-start-valid.html`	Pass	14 / 14
`corner-shape/corner-block-start-writing-modes.html`	Pass	3 / 3
`corner-shape/corner-computed.html`	Pass	24 / 24
`corner-shape/corner-invalid.html`	Pass	14 / 14
`corner-shape/corner-shape-computed.html`	Pass	38 / 38
`corner-shape/corner-shape-hittest.html`	Pass	1 / 1
`corner-shape/corner-shape-interpolation.html`	Pass	478 / 478
`corner-shape/corner-shape-invalid.html`	Pass	71 / 71
`corner-shape/corner-shape-outside-content-box.html`	Pass	7 / 7
`corner-shape/corner-shape-outside-corners.html`	Pass	5 / 5
`corner-shape/corner-shape-outside-left.html`	Fail	7 / 8	BUG	`superellipse(-.8)`: the line next to the corner starts at 90.1px where the test expects 88px with a tolerance of 2px: the curve of the contour is the quarter of an ellipse between the tangents of its two ends for the parameters between -1 and 0 (https://drafts.csswg.org/css-borders-4/#border-aligned-corner-clip-out-path), where Blink intercepts the band with the mirrored superellipse (89.98px, just within the tolerance)
`corner-shape/corner-shape-outside-margin-box.html`	Pass	7 / 7
`corner-shape/corner-shape-outside-padding-box.html`	Pass	7 / 7
`corner-shape/corner-shape-outside-right.html`	Pass	8 / 8
`corner-shape/corner-shape-outside-shape-margin.html`	Pass	7 / 7
`corner-shape/corner-shape-valid.html`	Pass	241 / 241
`corner-shape/corner-top-computed.html`	Pass	4 / 4
`corner-shape/corner-top-left-computed.html`	Pass	6 / 6
`corner-shape/corner-top-left-invalid.html`	Pass	10 / 10
`corner-shape/corner-top-left-valid.html`	Pass	11 / 11
`corner-shape/corner-top-valid.html`	Pass	14 / 14
`corner-shape/corner-valid.html`	Pass	12 / 12
`corner-shape/corners-invalid.html`	Pass	23 / 23

Tentative tests

Test	Result	Subtests	Kind	Description
`border-width-rounding.tentative.html`	Pass	22 / 22
`outline-offset-rounding.tentative.html`	Fail	9 / 30	NOT IMPLEMENTED	`outline-offset` is not snapped to device pixels like `outline-width`
`tentative/parsing/border-block-end-radius-computed.html`	Pass	6 / 6
`tentative/parsing/border-block-end-radius-invalid.html`	Pass	10 / 10
`tentative/parsing/border-block-end-radius-valid.html`	Pass	8 / 8
`tentative/parsing/border-block-start-radius-computed.html`	Pass	6 / 6
`tentative/parsing/border-block-start-radius-invalid.html`	Pass	10 / 10
`tentative/parsing/border-block-start-radius-valid.html`	Pass	8 / 8
`tentative/parsing/border-bottom-radius-computed.html`	Pass	6 / 6
`tentative/parsing/border-bottom-radius-invalid.html`	Pass	10 / 10
`tentative/parsing/border-bottom-radius-valid.html`	Pass	8 / 8
`tentative/parsing/border-clip-computed.html`	Fail	5 / 7	NOT IMPLEMENTED	the newer `border-clip` grammar (`normal`, unitless `0` kept); the webref grammar `none \\| [<length-percentage> \\| <flex>]+` is used
`tentative/parsing/border-clip-invalid.html`	Fail	3 / 4	NOT IMPLEMENTED	the newer `border-clip` grammar (`normal` instead of `none`); the webref grammar is used
`tentative/parsing/border-clip-valid.html`	Fail	5 / 7	NOT IMPLEMENTED	the newer `border-clip` grammar (`normal`, unitless `0` kept); the webref grammar is used
`tentative/parsing/border-inline-end-radius-computed.html`	Pass	6 / 6
`tentative/parsing/border-inline-end-radius-invalid.html`	Pass	10 / 10
`tentative/parsing/border-inline-end-radius-valid.html`	Pass	8 / 8
`tentative/parsing/border-inline-start-radius-computed.html`	Pass	6 / 6
`tentative/parsing/border-inline-start-radius-invalid.html`	Pass	10 / 10
`tentative/parsing/border-inline-start-radius-valid.html`	Pass	8 / 8
`tentative/parsing/border-left-radius-computed.html`	Pass	6 / 6
`tentative/parsing/border-left-radius-invalid.html`	Pass	10 / 10
`tentative/parsing/border-left-radius-valid.html`	Pass	8 / 8
`tentative/parsing/border-right-radius-computed.html`	Pass	6 / 6
`tentative/parsing/border-right-radius-invalid.html`	Pass	10 / 10
`tentative/parsing/border-right-radius-valid.html`	Pass	8 / 8
`tentative/parsing/border-shape-computed.html`	Pass	22 / 22
`tentative/parsing/border-shape-invalid.html`	Pass	12 / 12
`tentative/parsing/border-shape-valid.html`	Pass	12 / 12
`tentative/parsing/border-top-radius-computed.html`	Pass	6 / 6
`tentative/parsing/border-top-radius-invalid.html`	Pass	10 / 10
`tentative/parsing/border-top-radius-valid.html`	Pass	8 / 8
`tentative/parsing/box-shadow-blur-computed.html`	Pass	4 / 4
`tentative/parsing/box-shadow-blur-invalid.html`	Pass	6 / 6
`tentative/parsing/box-shadow-blur-valid.html`	Fail	4 / 5	TEST BUG	expects the unitless `0` of a `<length>` to be kept in the specified value (it is serialized as `0px`, as the browsers do for the other length properties); no browser implements `box-shadow-blur`
`tentative/parsing/box-shadow-color-computed.html`	Pass	17 / 17
`tentative/parsing/box-shadow-color-invalid.html`	Pass	10 / 10
`tentative/parsing/box-shadow-color-valid.html`	Fail	16 / 17	TEST BUG	expects the named colors of `red, blue` to be serialized as `rgb()` in the specified value, while `red` alone is kept (named colors are kept in the specified value); no browser implements `box-shadow-color`
`tentative/parsing/box-shadow-offset-computed.html`	Fail	4 / 6	TEST BUG	expects the unitless `0` of `10px 0` and `0 10px` to be kept in the computed value, while `0 0` computes to `0px`; no browser implements `box-shadow-offset`
`tentative/parsing/box-shadow-offset-invalid.html`	Pass	4 / 4
`tentative/parsing/box-shadow-offset-valid.html`	Fail	5 / 7	TEST BUG	expects the unitless `0` of a `<length>` to be kept in the specified value (it is serialized as `0px`, as the browsers do for the other length properties); no browser implements `box-shadow-offset`
`tentative/parsing/box-shadow-position-computed.html`	Pass	4 / 4
`tentative/parsing/box-shadow-position-invalid.html`	Pass	5 / 5
`tentative/parsing/box-shadow-position-valid.html`	Pass	4 / 4
`tentative/parsing/box-shadow-spread-computed.html`	Pass	5 / 5
`tentative/parsing/box-shadow-spread-invalid.html`	Pass	5 / 5
`tentative/parsing/box-shadow-spread-valid.html`	Fail	4 / 5	TEST BUG	expects the unitless `0` of a `<length>` to be kept in the specified value (it is serialized as `0px`, as the browsers do for the other length properties); no browser implements `box-shadow-spread`

Reftests

Test	Result	Variants	Kind	Description
`border-image-color-scheme.html`	Pass	1 / 1
`border-radius-currentcolor.html`	Pass	1 / 1
`border-radius-greater-than-width.html`	Fail	0 / 1	BUG	only the antialiased edges of what is painted differ, or a box is painted 1px away (not analyzed individually; the causes fixed with #461 are not involved: the Ahem glyphs are not antialiased, the joins of the sides of the borders, the glyphs of the highlights painted once, the slices of the border images, the transformed rectangles that are almost on the pixels)
`border-shape-absolute-coords-shape.tentative.html`	Pass	1 / 1
`border-shape/border-shape-background-origin-border-box.html`	Pass	1 / 1
`border-shape/border-shape-circle-extent-keywords.html`	Pass	1 / 1
`border-shape/border-shape-clips-background.html`	Fail	0 / 1	BUG	the stroke of the circle is painted as the ring of a border (as the border of a box with `border-radius`), the reference strokes an SVG circle: the curves of the two rings are flattened differently, so their antialiased edges differ (276 pixels, by up to 2; no fuzziness is allowed)
`border-shape/border-shape-collapsed-shape-clips-background.html`	Pass	1 / 1
`border-shape/border-shape-combined-shadow.html`	Pass	1 / 1
`border-shape/border-shape-double-shape-default.html`	Pass	1 / 1
`border-shape/border-shape-dynamic-color.html`	Pass	1 / 1
`border-shape/border-shape-ellipse-corner-keywords.tentative.html`	Pass	1 / 1
`border-shape/border-shape-ellipse-extent-keywords.html`	Pass	1 / 1
`border-shape/border-shape-geometry-box.html`	Pass	1 / 1
`border-shape/border-shape-half-border-box-default.html`	Pass	1 / 1
`border-shape/border-shape-ignore-radius.html`	Pass	1 / 1
`border-shape/border-shape-inner-outer.html`	Pass	1 / 1
`border-shape/border-shape-inset-shadow-blur.html`	Pass	1 / 1
`border-shape/border-shape-inset-shadow-negative-spread.html`	Pass	1 / 1
`border-shape/border-shape-inset-shadow.html`	Pass	1 / 1
`border-shape/border-shape-outline-auto-forms.html`	Pass	1 / 1
`border-shape/border-shape-outline-auto-with-border.html`	Pass	1 / 1
`border-shape/border-shape-outline-auto.html`	Pass	1 / 1
`border-shape/border-shape-outline-double-path.html`	Pass	1 / 1
`border-shape/border-shape-outline-double-shape.html`	Pass	1 / 1
`border-shape/border-shape-outline-double.html`	Pass	1 / 1
`border-shape/border-shape-outline-invalidation.html`	Pass	1 / 1
`border-shape/border-shape-outline-offset.html`	Pass	1 / 1
`border-shape/border-shape-outline-with-border-double-ellipse.html`	Pass	1 / 1
`border-shape/border-shape-outline-with-border-ellipse.html`	Pass	1 / 1
`border-shape/border-shape-outline-with-border.html`	Pass	1 / 1
`border-shape/border-shape-outline.html`	Pass	1 / 1
`border-shape/border-shape-overflow-child-clip.html`	Pass	1 / 1
`border-shape/border-shape-overflow-replaced-canvas.html`	Pass	1 / 1
`border-shape/border-shape-overflow-replaced-iframe.html`	Pass	1 / 1
`border-shape/border-shape-overflow-replaced-img.html`	Pass	1 / 1
`border-shape/border-shape-overflow-replaced-self.html`	Pass	1 / 1
`border-shape/border-shape-overflow-solid-background.html`	Pass	1 / 1
`border-shape/border-shape-overflow.html`	Pass	1 / 1
`border-shape/border-shape-polygon-miter-limit.html`	Pass	1 / 1
`border-shape/border-shape-shadow-blur.html`	Pass	1 / 1
`border-shape/border-shape-shadow-circle.html`	Pass	1 / 1
`border-shape/border-shape-shadow-ellipse.html`	Pass	1 / 1
`border-shape/border-shape-shadow-inset-blur.html`	Pass	1 / 1
`border-shape/border-shape-shadow-negative-spread.html`	Pass	1 / 1
`border-shape/border-shape-shadow-semitransparent.html`	Pass	1 / 1
`border-shape/border-shape-shadow-transparent.html`	Pass	1 / 1
`border-shape/border-shape-shadow.html`	Pass	1 / 1
`border-shape/border-shape-shape-arc-miter-limit.html`	Pass	1 / 1
`border-shape/border-shape-stroke-from-border.html`	Pass	1 / 1
`border-shape/border-shape-stroke-invalidation.html`	Pass	1 / 1
`border-shape/border-shape-two-shapes-shadow.html`	Pass	1 / 1
`borders-on-sub-unit-sized-elements.html`	Pass	1 / 1
`corner-shape/corner-shape-backdrop-filter-overflow.html`	Pass	1 / 1
`corner-shape/corner-shape-backdrop-filter-video-overflow.html`	Pass	1 / 1
`corner-shape/corner-shape-backdrop-filter.html`	Fail	0 / 1	BUG	the coverage of the antialiased edges is the exact area of the pixels, which differs slightly from the one of the browsers the fuzziness of the test is tuned for: 384 pixels of the shaped corners differ (by up to 32), 381 are allowed
`corner-shape/corner-shape-bevel-overflow-composite.html`	Pass	1 / 1
`corner-shape/corner-shape-bevel-overflow.html`	Fail	0 / 1	BUG	the red background of the box and the overflow clip of its green child are both antialiased along the bevels (two coverages of the same edge): the pixels of the edges keep a part of the red background (a difference of 67/255 on the 200 pixels of the four bevels; the test allows 32), where the reference clips one green box
`corner-shape/corner-shape-bevel-round-scoop-square-outset.html`	Pass	1 / 1
`corner-shape/corner-shape-bevel.html`	Pass	1 / 1
`corner-shape/corner-shape-box-shadow-spread-bevel.html`	Fail	0 / 1	TEST BUG	the reference draws the edge of the shadow at the constant distance of the spread (15px) from the bevel, but the border contour path of the specification uses the outset-adjusted border radius: the 8px or 10px radius, smaller than the spread, grows by less than the spread (https://drafts.csswg.org/css-borders-4/#outset-adjusted-border-radius), which moves the ends of the corner of the shadow by about 2px; the test fails in all the browsers (Chrome renders the adjusted radius too)
`corner-shape/corner-shape-box-shadow-spread-elliptical.html`	Fail	0 / 1	TEST BUG	the reference draws the edge of the shadow at the constant distance of the spread (15px) from the concave curve, but the border contour path of the specification uses the outset-adjusted border radius: the 8px or 10px radius, smaller than the spread, grows by less than the spread (https://drafts.csswg.org/css-borders-4/#outset-adjusted-border-radius), which moves the ends of the corner of the shadow by about 2px; the test fails in all the browsers (Chrome renders the adjusted radius too)
`corner-shape/corner-shape-clip-path-border-box.html`	Pass	1 / 1
`corner-shape/corner-shape-fill.html`	Pass	1 / 1
`corner-shape/corner-shape-iframe-border.html`	Pass	1 / 1
`corner-shape/corner-shape-img-border.html`	Pass	1 / 1
`corner-shape/corner-shape-img.html`	Pass	1 / 1
`corner-shape/corner-shape-inset-shadow.html`	Pass	1 / 1
`corner-shape/corner-shape-noop-keyframe.html`	Pass	1 / 1
`corner-shape/corner-shape-notch-mixed.html`	Pass	1 / 1
`corner-shape/corner-shape-notch-squircle-outset.html`	Pass	1 / 1
`corner-shape/corner-shape-notch.html`	Pass	1 / 1
`corner-shape/corner-shape-offset-path-coord-box-001.html`	Fail	0 / 1	BUG	the coverage of the antialiased edges is the exact area of the pixels, which differs slightly from the one of the browsers the fuzziness of the test is tuned for: 166 pixels of the edges of the shape differ (by up to 2), 16 are allowed
`corner-shape/corner-shape-offset-path-coord-box-002.html`	Pass	1 / 1
`corner-shape/corner-shape-opposite-scale-convex-inert.html`	Fail	0 / 1	TEST BUG	antialiasing only: the shapes are the same, but the coverage of the antialiased edges is the exact area of the pixels, which differs slightly from the one of the browsers the fuzziness of the test is tuned for: 876 pixels of the edges of the squircle corners differ (by up to 76), 840 are allowed
`corner-shape/corner-shape-opposite-scale-elliptical.html`	Pass	1 / 1
`corner-shape/corner-shape-opposite-scale-mixed.html`	Pass	1 / 1
`corner-shape/corner-shape-opposite-scale-notch.html`	Pass	1 / 1
`corner-shape/corner-shape-opposite-scale-scoop.html`	Pass	1 / 1
`corner-shape/corner-shape-opposite-scale-superellipse.html`	Pass	1 / 1
`corner-shape/corner-shape-outline-auto-001.html`	Pass	1 / 1
`corner-shape/corner-shape-outline-auto-002.html`	Pass	1 / 1
`corner-shape/corner-shape-outline-auto-003.html`	Pass	1 / 1
`corner-shape/corner-shape-outline-negative-offset-bevel.html`	Pass	1 / 1
`corner-shape/corner-shape-outline-negative-offset-notch001.html`	Pass	1 / 1
`corner-shape/corner-shape-outline-negative-offset-notch002.html`	Pass	1 / 1
`corner-shape/corner-shape-outline-negative-offset-notch003.html`	Pass	1 / 1
`corner-shape/corner-shape-outline-negative-offset-square.html`	Pass	1 / 1
`corner-shape/corner-shape-outline-offset-bevel.html`	Pass	1 / 1
`corner-shape/corner-shape-outline-offset-elliptical.html`	Fail	0 / 1	BUG	the outline of a `superellipse(-0.5)` corner: the curve of the contour is the quarter of an ellipse between the tangents of its two ends for the parameters between -1 and 0 (https://drafts.csswg.org/css-borders-4/#border-aligned-corner-clip-out-path), and the reference draws Bézier curves of the superellipse, which start in another direction: the edges differ by up to 73/255 on 175 pixels (the test allows 46/255; it fails in all the browsers)
`corner-shape/corner-shape-overflow-clip-margin.html`	Pass	1 / 1
`corner-shape/corner-shape-scoop.html`	Pass	1 / 1
`corner-shape/corner-shape-square-notch-mixed.html`	Pass	1 / 1
`corner-shape/corner-shape-square-notch-superellipse.html`	Pass	1 / 1
`corner-shape/corner-shape-square.html`	Pass	1 / 1
`corner-shape/corner-shape-squircle.html`	Pass	1 / 1
`corner-shape/corner-shape-superellipse-bevel.html`	Pass	1 / 1
`corner-shape/corner-shape-superellipse-concave-outset.html`	Pass	1 / 1
`corner-shape/corner-shape-superellipse-concave.html`	Fail	0 / 1	BUG	the coverage of the antialiased edges is the exact area of the pixels, which differs slightly from the one of the browsers the fuzziness of the test is tuned for: 370 pixels of the concave corners differ (by up to 70), 347 are allowed
`corner-shape/corner-shape-superellipse-convex-outset.html`	Pass	1 / 1
`corner-shape/corner-shape-superellipse-convex.html`	Pass	1 / 1
`corner-shape/corner-shape-superellipse-negative-100.html`	Pass	1 / 1
`corner-shape/corner-shape-superellipse-negative-inf.html`	Pass	1 / 1
`corner-shape/corner-shape-superellipse-scoop.html`	Pass	1 / 1
`corner-shape/corner-shape-superellipse-squircle.html`	Pass	1 / 1
`corner-shape/corner-shape-svg-border.html`	Pass	1 / 1
`corner-shape/corner-shape-video-border.html`	Pass	1 / 1
`corner-shape/corner-shorthand-rendering.html`	Pass	1 / 1
`corner-shape/render-corner-shape.html`	Pass	113 / 113
`subpixel-border-width.tentative.html`	Pass	1 / 1
`subpixel-borders-with-child-border-box-sizing.html`	Pass	1 / 1
`subpixel-borders-with-child.html`	Pass	1 / 1
`tentative/border-radius-side-shorthands/border-radius-side-shorthands-001.html`	Fail	0 / 1	TEST BUG	the test reads `border-top-radius: 1em 4em / 2em 3em` as the two radii of each corner (`1em 4em` for the first corner), where the values before the slash are the horizontal radii of the two corners and the values after it their vertical radii, as in `border-radius` (https://drafts.csswg.org/css-borders-4/#corner-sizing-side-shorthands); the green borders painted over the red ones of the same shape also leave red antialiased edges, and the test has no fuzzy tolerance (see its TODO)
`tentative/border-radius-side-shorthands/border-radius-side-shorthands-002.html`	Fail	0 / 1	TEST BUG	the test reads `border-top-radius: 1em 4em / 2em 3em` as the two radii of each corner (`1em 4em` for the first corner), where the values before the slash are the horizontal radii of the two corners and the values after it their vertical radii, as in `border-radius` (https://drafts.csswg.org/css-borders-4/#corner-sizing-side-shorthands); the green borders painted over the red ones of the same shape also leave red antialiased edges, and the test has no fuzzy tolerance (see its TODO)