CSS Shapes Module Level 1 CR Test Suite

Basic Shapes (180 tests)

Test Refs Flags Info
+ 3 Basic Shapes
shape-outside-shape-arguments-000 AhemDOM/JSScript Shape Outside Basic Shape Arguments
  • A basic basic shape can contain any length unit type, or percentage
shape-outside-shape-arguments-001 AhemDOM/JSScript Shape Outside Shape Number Values
  • The basic shape can contain all valid number formats
+ 3.1 Supported Shapes
shape-outside-001 = Ahem Left and right float with shape-outside
  • This test verifies that left floats with a shape-outside only allow content wrapping on the right side, and right floats only allow wrapping on the left.
shape-outside-002 = Ahem Left and right float with shape-outside with clipped left float
  • This test verifies that left floats with a shape-outside only allow content wrapping on the right side, and right floats only allow wrapping on the left and that the left float shape is clipped to the float's margin box
shape-outside-003 = Ahem Left and right float with shape-outside with clipped right float
  • This test verifies that left floats with a shape-outside only allow content wrapping on the right side, and right floats only allow wrapping on the left and that the right float shape is clipped to the float's margin box
shape-outside-004 = Ahem inset with no extent and inline content - inset(50% 50% 50% 50%)
  • This test verifies that a shape with no extent allow inline content to flow through all of the float's box.
shape-outside-005 = Ahem inset with no extent and inline content - inset(150% 150% 0% 0%)
  • This test verifies that a shape with no extent allow inline content to flow through all of the float's box.
shape-outside-006 = Ahem shape-outside with open areas on both the left & right of the float area
  • This test verifies that content wraps only on one side of the float even though there is open area on both the left and right sides of the float.
shape-outside-007 = Ahem Shape smaller than float content area - 1 float
  • This test verifies that inline content only wraps around the shape, and otherwise overlays the rest of the float margin box
shape-outside-008 = Ahem Shape smaller than float content area - 2 floats
  • This test verifies that inline content only wraps around the shapes, and otherwise overlays the rest of the float margin boxes when two floats are stacked next to each other.
shape-outside-circle-032 = float left, circle(50% at left top)
  • Test the boxes are wrapping around the left float shape defined by the basic shape circle(50% at left top) value.
shape-outside-circle-033 = float left, circle(50% at right bottom)
  • Test the boxes are wrapping around the left float shape defined by the basic shape circle(50% at right bottom) value.
shape-outside-circle-034 = float right, circle(50% at right top)
  • Test the boxes are wrapping around the right float shape defined by the basic shape circle(50% at right top) value.
shape-outside-circle-035 = float right, circle(50% at left bottom)
  • Test the boxes are wrapping around the right float shape defined by the basic shape circle(50% at left bottom) value.
shape-outside-circle-036 = float left, circle()
  • Test the boxes are wrapping around the left float shape defined by the basic shape circle() value.
shape-outside-circle-037 = float left, circle(closest-side at center) border-box
  • Test the boxes are wrapping around the left float shape defined by the basic shape circle(closest-side at center) border-box value.
shape-outside-circle-038 = float left, circle(farthest-side at center)
  • Test the boxes are wrapping around the left float shape defined by the basic shape circle(farthest-side at center) value.
shape-outside-circle-041 = float left, circle(100%)
  • Test the boxes are wrapping around the left float shape defined by the basic shape circle(100%) value.
shape-outside-circle-042 = float right, circle()
  • Test the boxes are wrapping around the right float shape defined by the basic shape circle() value.
shape-outside-circle-043 = float right, circle(closest-side at center) border-box
  • Test the boxes are wrapping around the right float shape defined by the basic shape circle(closest-side at center) border-box value.
shape-outside-circle-044 = float right, circle(farthest-side at center)
  • Test the boxes are wrapping around the right float shape defined by the basic shape circle(farthest-side at center) value.
shape-outside-circle-047 = float right, circle(100%)
  • Test the boxes are wrapping around the right float shape defined by the basic shape circle(100%) value.
shape-outside-circle-048 = vertical-rl, float left, circle(50% at left 40px top 40px)
  • Test the boxes are wrapping around the left float shape defined by circle(50% at left 40px top 40px) value under vertical-rl writing-mode.
shape-outside-circle-049 = vertical-rl, float right, circle(50% at left 40px bottom 40px)
  • Test the boxes are wrapping around the right float shape defined by circle(50% at left 40px bottom 40px) value under vertical-rl writing-mode.
shape-outside-circle-050 = vertical-lr, float left, circle(50% at right 40px top 40px)
  • Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px top 40px) value under vertical-lr writing-mode.
shape-outside-circle-051 = vertical-lr, float right, circle(50% at right 40px bottom 40px)
  • Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px bottom 40px) value under vertical-lr writing-mode.
shape-outside-circle-052 = sideways-lr, float left, circle(50% at right 40px bottom 40px)
  • Test the boxes are wrapping around the left float shape defined by circle(50% at right 40px bottom 40px) value under sideways-lr writing-mode.
shape-outside-circle-053 = sideways-lr, float right, circle(50% at right 40px top 40px)
  • Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px top 40px) value under sideways-lr writing-mode.
shape-outside-circle-054 = horizontal-tb, float left, circle(50% at left 40px bottom 40px)
  • Test the boxes are wrapping around the left float shape defined by circle(50% at left 40px bottom 40px) value under horizontal-tb writing-mode.
shape-outside-circle-055 = horizontal-tb, float right, circle(50% at right 40px bottom 40px)
  • Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px bottom 40px) value under horizontal-tb writing-mode.
shape-outside-ellipse-032 = float left, ellipse(40px 60px at left top)
  • Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(40px 60px at left top) value.
shape-outside-ellipse-033 = float left, ellipse(40px 60px at right bottom)
  • Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(40px 60px at right bottom) value.
shape-outside-ellipse-034 = float right, ellipse(40px 60px at right top)
  • Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(40px 60px at right top)
shape-outside-ellipse-035 = float right, ellipse(40px 60px at left bottom)
  • Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(40px 60px at left bottom) value.
shape-outside-ellipse-036 = float left, ellipse()
  • Test the boxes are wrapping around the left float shape defined by the basic shape ellipse() value.
shape-outside-ellipse-037 = float left, ellipse(closest-side farthest-side at left 40px top 60px) border-box
  • Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box
shape-outside-ellipse-038 = float right, ellipse()
  • Test the boxes are wrapping around the right float shape defined by the basic shape ellipse() value.
shape-outside-ellipse-039 = float right, ellipse(closest-side farthest-side at right 40px top 60px) border-box
  • Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(closest-side farthest-side at right 40px top 60px) border-box
shape-outside-ellipse-040 = float left, ellipse(0% 0%)
  • Test the left float shape defines an empty float area by the basic shape ellipse(0% 0%) value.
shape-outside-ellipse-041 = float left, ellipse(closest-side closest-side at top left)
  • Test the left float shape defines an empty float area by the basic shape ellipse(0% 0closest-side closest-side at top left) value.
shape-outside-ellipse-042 = float right, ellipse(0% 0%)
  • Test the right float shape defines an empty float area by the basic shape ellipse(0% 0%) value.
shape-outside-ellipse-043 = float right, ellipse(closest-side closest-side at top right)
  • Test the right float shape defines an empty float area by the basic shape ellipse(0% 0closest-side closest-side at top right) value.
shape-outside-ellipse-044 = float left, ellipse(100% 100%)
  • Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(100% 100%) value.
shape-outside-ellipse-045 = float right, ellipse(100% 100%)
  • Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(100% 100%) value.
shape-outside-ellipse-046 = vertical-rl, float left, ellipse(closest-side farthest-side at top 40px right 60px) border-box
  • Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at top 40px right 60px) border-box
shape-outside-ellipse-047 = vertical-rl, float right, ellipse(closest-side farthest-side at top 40px right 60px) border-box
  • Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(closest-side farthest-side at top 40px right 60px) border-box
shape-outside-ellipse-048 = vertical-lr, float left, ellipse(closest-side farthest-side at top 40px left 60px) border-box
  • Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box
shape-outside-ellipse-049 = vertical-lr, float right, ellipse(closest-side farthest-side at top 40px left 60px) border-box
  • Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box
shape-outside-ellipse-050 = sideways-lr, float left, ellipse(closest-side farthest-side at top 40px left 60px) border-box
  • Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box
shape-outside-ellipse-051 = sideways-lr, float right, ellipse(closest-side farthest-side at top 40px left 60px) border-box
  • Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box
shape-outside-inset-016 = float left, inset(20px) border-box
  • Test the boxes are wrapping around the left float shape defined by the inset(20px) border-box value.
shape-outside-inset-017 = float right, inset(20px) border-box
  • Test the boxes are wrapping around the right float shape defined by the inset(20px) border-box value.
shape-outside-inset-020 = horizontal-tb, float left, inset(10px round 0 40px/ 0 60px) border-box
  • Test the boxes are wrapping around the left float shape defined by the inset(10px round 0 40px/ 0 60px) border-box value under horizontal-tb writing-mode.
shape-outside-inset-021 = horizontal-tb, float right, inset(10px round 0 40px/ 0 60px) border-box
  • Test the boxes are wrapping around the right float shape defined by the inset(10px round 0 40px/ 0 60px) border-box value under horizontal-tb writing-mode.
shape-outside-inset-022 = vertical-rl, float left, inset(10px round 60px 0/ 40px 0) border-box
  • Test the boxes are wrapping around the left float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under vertical-rl writing-mode.
shape-outside-inset-023 = vertical-rl, float right, inset(10px round 60px 0/ 40px 0) border-box
  • Test the boxes are wrapping around the right float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under vertical-rl writing-mode.
shape-outside-inset-024 = vertical-lr, float left, inset(10px round 60px 0/ 40px 0) border-box
  • Test the boxes are wrapping around the left float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under vertical-lr writing-mode.
shape-outside-inset-025 = vertical-lr, float right, inset(10px round 60px 0/ 40px 0) border-box
  • Test the boxes are wrapping around the right float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under vertical-lr writing-mode.
shape-outside-inset-026 = sideways-lr, float left, inset(10px round 60px 0/ 40px 0) border-box
  • Test the boxes are wrapping around the left float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under sideways-lr writing-mode.
shape-outside-inset-027 = sideways-lr, float right, inset(10px round 60px 0/ 40px 0) border-box
  • Test the boxes are wrapping around the right float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under sideways-lr writing-mode.
shape-outside-invalid-001 DOM/JSScript CSS Shapes Test - shape-outside invalid shape
  • shape-outside declaration is invalid if shape is invalid
shape-outside-invalid-circle-000 DOM/JSScript Circle - invalid 2 args
  • shape-outside declaration is invalid if circle shape function only has two parameters
shape-outside-invalid-circle-001 DOM/JSScript Circle - invalid r values
  • shape-outside declaration is invalid if circle shape function has an invalid r parameter
shape-outside-invalid-circle-002 DOM/JSScript CSS Shapes Test - Circle - invalid cy value
  • shape-outside declaration is invalid if cy for circle function is invalid
shape-outside-invalid-circle-003 DOM/JSScript Circle - invalid cx value
  • shape-outside declaration is invalid if circle shape function has an invalid cx param
shape-outside-invalid-ellipse-001 DOM/JSScript Ellipse - invalid 2 arg
  • shape-outside declaration is invalid if ellipse shape function has two invalid arguments
shape-outside-invalid-ellipse-002 DOM/JSScript Ellipse - invalid ry value
  • shape-outside declaration is invalid if ellipse shape function has an invalid ry param
shape-outside-invalid-ellipse-003 DOM/JSScript Ellipse - invalid rx value
  • shape-outside declaration is invalid if ellipse shape function has an invalid rx param
shape-outside-invalid-ellipse-004 DOM/JSScript CSS Shapes Test - Ellipse - invalid 1 arg
  • shape-outside declaration is invalid if ellipse function has one invalid argument
shape-outside-invalid-ellipse-005 DOM/JSScript CSS Shapes Test - Ellipse - invalid cy value
  • shape-outside declaration is invalid if cy in ellipse function is invalid
shape-outside-invalid-ellipse-006 DOM/JSScript CSS Shapes Test - Ellipse - invalid cx value
  • shape-outside declaration is invalid if cx in ellipse function is invalid
shape-outside-invalid-inset-001 DOM/JSScript Inset Rectangles - invalid top arg
  • shape-outside declaration is invalid if inset shape function has an invalid top param
shape-outside-invalid-inset-002 DOM/JSScript Inset Rectangles - invalid right arg
  • shape-outside declaration is invalid if inset shape function has an invalid right param
shape-outside-invalid-inset-003 DOM/JSScript Inset Rectangles - invalid bottom arg
  • shape-outside declaration is invalid if inset shape function has an invalid bottom param
shape-outside-invalid-inset-004 DOM/JSScript Inset Rectangles - invalid left param
  • shape-outside declaration is invalid if inset shape function has an invalid left param
shape-outside-polygon-018 = horizontal-tb, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box
  • Test the boxes are wrapping around the left float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under horizontal-tb writing-mode.
shape-outside-polygon-019 = horizontal-tb, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box
  • Test the boxes are wrapping around the right float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under horizontal-tb writing-mode.
shape-outside-polygon-020 = vertical-rl, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box
  • Test the boxes are wrapping around the left float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under vertical-rl writing-mode.
shape-outside-polygon-021 = vertical-rl, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box
  • Test the boxes are wrapping around the right float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under vertical-rl writing-mode.
shape-outside-polygon-022 = vertical-lr, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box
  • Test the boxes are wrapping around the left float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under vertical-lr writing-mode.
shape-outside-polygon-023 = vertical-lr, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box
  • Test the boxes are wrapping around the right float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under vertical-lr writing-mode.
shape-outside-polygon-024 = sideways-lr, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box
  • Test the boxes are wrapping around the left float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under sideways-lr writing-mode.
shape-outside-polygon-025 = sideways-lr, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box
  • Test the boxes are wrapping around the right float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under sideways-lr writing-mode.
shape-outside-circle-015 = Ahem left float, circle + closest-side + padding-box
  • The test verifies that text wraps around a left float with a shape-outside defined as a circle with the radius explicitly set as closest-side from the padding box.
shape-outside-circle-028 = Ahem right float, circle(closest-side) at position % + shape-margin + border-box
  • The test verifies that text wraps around a right float with a shape-outside defined as a circle positioned from the border box with a shape-margin.
shape-outside-ellipse-015 = Ahem left float, ellipse + closest-side + padding-box
  • The test verifies that text wraps around a left float with a shape-outside defined as an ellipse with the radii explicitly set as closest-side from the padding box.
shape-outside-circle-016 = Ahem left float, circle + farthest-side + border-box
  • The test verifies that text wraps around a left float with a shape-outside defined as a circle with the radius defined as farthest-side from the border box.
shape-outside-circle-021 = Ahem left float, circle + farthest-side + padding-box + shape-margin
  • The test verifies that text wraps around a left float with a shape-outside defined as a circle with a farthest-side radius from the padding box with a shape-margin.
shape-outside-ellipse-017 = Ahem left float, ellipse(farthest-side) + shape-margin + content-box
  • The test verifies that text wraps around a left float with a shape-outside defined as a ellipse from the content box with only the rx defined as farthest-side and with a shape-margin.
shape-outside-circle-000 AhemDOM/JSScript Shape Outside Circle Valid Formats
  • A circular basic shape has an optional radius and position component
shape-outside-circle-001 AhemDOM/JSScript Shape Outside Circle Valid Radii
  • A circle's radius may be a length, percentage, or keyword.
shape-outside-circle-002 AhemDOM/JSScript Shape Outside Circle Valid Positions
  • A circle's position argument may be any of the valid combinations: [ percentage|length left|center|right ] or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] or [ left|center|right ] or [ left|center|right top|center|bottom ] or [ top|center|bottom ].
shape-outside-circle-003 AhemDOM/JSScript Shape Outside Circle Invalid Position Argument Lists
  • Valid circle position argument list are in the form of: [ percentage|length left|center|right ] or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] or [ left|center|right ] or [ left|center|right top|center|bottom ] or [ top|center|bottom ]. All position arguments not in this form are invalid.
shape-outside-circle-004 AhemDOM/JSScript Shape Outside Circle - Position Length Units
  • A circle's position arguments may in any valid <length> unit allowed by a <position> value.
shape-outside-circle-005 AhemDOM/JSScript Shape Outside Circle Valid Radii - length units
  • A circle's radius may be in any valid length unit.
shape-outside-circle-006 AhemDOM/JSScript Shape Outside Circle Radii - positive/negative, decimal/non-decimal
  • A circle's radius may be in signed positive or decimal/non-decimal format. Negative radii are invalid.
shape-outside-circle-007 AhemDOM/JSScript Shape Outside Circle Radii - invalid args
  • This test verifies that invalid shape-radius arguments on circle() don't parse.
shape-outside-circle-008 AhemDOM/JSScript Shape Outside Circle Invalid Position Argument Values
  • This test verifies that invalid position arguments on circle() don't parse
shape-outside-circle-009 AhemDOM/JSScript Shape Outside Circle Position Arguments - positive/negative, decimal/non-decimal
  • A circle's position arguments may be in signed positive/negative or decimal/non-decimal format.
shape-outside-circle-010 AhemDOM/JSScript Shape Outside Circle args - calc() values
  • A circle's arguments may be in calc() values.
shape-outside-circle-011 AhemDOM/JSScript Shape Outside Circle position args - calc() values
  • A circle's <position> arguments may be in calc() values.
shape-outside-circle-013 = Ahem left float, circle + margin-box + position (px)
  • The test verifies that text wraps around a left float with a shape-outside defined as a circle from the margin box and positioned in px units.
shape-outside-circle-014 = Ahem left float, circle + content-box + radius and position in % units
  • The test verifies that text wraps around a left float with a shape-outside defined as a circle from the content box with the radius and position in percentage units.
shape-outside-circle-015 = Ahem left float, circle + closest-side + padding-box
  • The test verifies that text wraps around a left float with a shape-outside defined as a circle with the radius explicitly set as closest-side from the padding box.
shape-outside-circle-016 = Ahem left float, circle + farthest-side + border-box
  • The test verifies that text wraps around a left float with a shape-outside defined as a circle with the radius defined as farthest-side from the border box.
shape-outside-circle-017 = Ahem left float, circle + shape-margin in px
  • The test verifies that text wraps around a left float with a shape-outside defined as a circle with a shape-margin in px units.
shape-outside-circle-018 = Ahem left float, circle + shape-margin in % units
  • The test verifies that text wraps around a left float with a shape-outside defined as a circle with a shape-margin in percentage units.
shape-outside-circle-019 = Ahem left float, circle at top left + margin-box + shape-margin
  • The test verifies that text wraps around a left float with a shape-outside defined as a circle from the margin box and is positioned top left with a shape-margin.
shape-outside-circle-020 = Ahem left float, circle at % + border-box + shape-margin
  • The test verifies that text wraps around a left float with a shape-outside defined as a circle from the padding box with a position specified as a percentage and with a shape-margin.
shape-outside-circle-021 = Ahem left float, circle + farthest-side + padding-box + shape-margin
  • The test verifies that text wraps around a left float with a shape-outside defined as a circle with a farthest-side radius from the padding box with a shape-margin.
shape-outside-circle-022 = Ahem left float, circle at bottom right + content-box + shape-margin
  • The test verifies that text wraps around a left float with a shape-outside defined as a circle from the padding box positioned at center right with a shape-margin.
shape-outside-circle-024 = Ahem right float, circle radius in % units + shape-margin + border-box
  • The test verifies that text wraps around a right float with a shape-outside defined as a circle from the border box with radius in percentage units and with a shape-margin.
shape-outside-circle-025 = Ahem right float, circle + shape-margin + padding-box
  • The test verifies that text wraps around a right float with a shape-outside defined as a circle from the padding box with a shape-margin.
shape-outside-circle-026 = Ahem right float, circle + shape-margin + content-box
  • The test verifies that text wraps around a right float with a shape-outside defined as a circle from the content box with a shape-margin.
shape-outside-circle-027 = Ahem right float, circle with radius in % units + shape-margin + margin-box
  • The test verifies that text wraps around a right float with a shape-outside defined as a circle positioned from the margin box with a shape-margin.
shape-outside-circle-028 = Ahem right float, circle(closest-side) at position % + shape-margin + border-box
  • The test verifies that text wraps around a right float with a shape-outside defined as a circle positioned from the border box with a shape-margin.
shape-outside-circle-029 = Ahem right float, circle at center right + shape-margin + padding-box
  • The test verifies that text wraps around a right float with a shape-outside defined as a circle positioned center right from the padding box with a shape-margin.
shape-outside-circle-030 = AhemDOM/JS left float, circle radius in px units
  • The test verifies that text wraps around a left float with a shape-outside defined as an circle with the radius in px units.
shape-outside-circle-031 = AhemDOM/JS left float, circle radius in % units
  • The test verifies that text wraps around a left float with a shape-outside defined as an circle with the radius in percentage units.
shape-outside-circle-056 = Ahem left float, offset circle at top left + margin-box + shape-margin
  • The test verifies that text wraps around a left float with a shape-outside defined as a circle from the margin box and is positioned top left with a shape-margin. Additionally, the shape-outside: circle element is offset from its containing block.
shape-outside-invalid-circle-000 DOM/JSScript Circle - invalid 2 args
  • shape-outside declaration is invalid if circle shape function only has two parameters
shape-outside-invalid-circle-001 DOM/JSScript Circle - invalid r values
  • shape-outside declaration is invalid if circle shape function has an invalid r parameter
shape-outside-invalid-circle-002 DOM/JSScript CSS Shapes Test - Circle - invalid cy value
  • shape-outside declaration is invalid if cy for circle function is invalid
shape-outside-invalid-circle-003 DOM/JSScript Circle - invalid cx value
  • shape-outside declaration is invalid if circle shape function has an invalid cx param
shape-outside-ellipse-000 AhemDOM/JSScript Shape Outside Ellipse Valid Formats
  • An elliptical basic shape has two optional components, radii (2) and a position.
shape-outside-ellipse-001 AhemDOM/JSScript Shape Outside Ellipse Valid Radii
  • An elliptical basic shape's radii may be keywords, lengths or percentages
shape-outside-ellipse-002 AhemDOM/JSScript Shape Outside Ellipse Valid Positions
  • An ellipse's position argument may be any of the valid combinations: [ percentage|length left|center|right ] or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] or [ left|center|right ] or [ left|center|right top|center|bottom ] or [ top|center|bottom ].
shape-outside-ellipse-003 AhemDOM/JSScript Shape Outside Ellipse Invalid Position Argument Lists
  • Valid ellipse position argument list are in the form of: [ percentage|length left|center|right ] or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] or [ left|center|right ] or [ left|center|right top|center|bottom ] or [ top|center|bottom ]. All position arguments not in this form are invalid.
shape-outside-ellipse-004 AhemDOM/JSScript Shape Outside Ellipse - Position Length Units
  • An ellipse's position arguments may in any valid <length> unit allowed by a <position> value.
shape-outside-ellipse-005 AhemDOM/JSScript Shape Outside Ellipse Valid Radii - length units
  • An ellipse's radii may be in any valid length unit.
shape-outside-ellipse-006 AhemDOM/JSScript Shape Outside Ellipse Radii - positive/negative, decimal/non-decimal
  • An ellipse's radii may be in signed positive or decimal/non-decimal format. Negative radii are invalid.
shape-outside-ellipse-007 AhemDOM/JSScript Shape Outside Ellipse Radii - invalid args
  • This test verifies that invalid shape-radius arguments on ellipse() don't parse.
shape-outside-ellipse-008 AhemDOM/JSScript Shape Outside Ellipse Invalid Position Argument Values
  • This test verifies that invalid position arguments on ellipse() don't parse
shape-outside-ellipse-009 AhemDOM/JSScript Shape Outside Ellipse Position Arguments - positive/negative, decimal/non-decimal
  • An ellipse's position arguments may be in signed positive/negative or decimal/non-decimal format.
shape-outside-ellipse-010 AhemDOM/JSScript Shape Outside Ellipse args - calc() values
  • An ellipse's arguments may be in calc() values.
shape-outside-ellipse-011 AhemDOM/JSScript Shape Outside Ellipse position args - calc() values
  • An ellipse's <position> arguments may be in calc() values.
shape-outside-ellipse-013 = Ahem left float, ellipse radii and position in px
  • The test verifies that text wraps around a left float with a shape-outside defined as a ellipse with radii and position in px units.
shape-outside-ellipse-014 = Ahem left float, ellipse radii and position in % units + content-box
  • The test verifies that text wraps around a left float with a shape-outside defined as a ellipse from the content box with the position and radii in percentage units.
shape-outside-ellipse-015 = Ahem left float, ellipse + closest-side + padding-box
  • The test verifies that text wraps around a left float with a shape-outside defined as an ellipse with the radii explicitly set as closest-side from the padding box.
shape-outside-ellipse-016 = Ahem left float, ellipse radii in % units + padding-box
  • The test verifies that text wraps around a left float with a shape-outside defined as a ellipse from the padding box with the radii in percentage units.
shape-outside-ellipse-017 = Ahem left float, ellipse(farthest-side) + shape-margin + content-box
  • The test verifies that text wraps around a left float with a shape-outside defined as a ellipse from the content box with only the rx defined as farthest-side and with a shape-margin.
shape-outside-ellipse-018 = Ahem left float, ellipse + shape-margin in % units
  • The test verifies that text wraps around a left float with a shape-outside defined as a ellipse with a shape-margin in percentage units.
shape-outside-ellipse-019 = Ahem left float, ellipse radii in % units + padding-box + shape-margin
  • The test verifies that text wraps around a left float with a shape-outside defined as a ellipse from the padding box with radii in percentage units and with a shape-margin.
shape-outside-ellipse-020 = Ahem left float, ellipse radii in % units + margin-box + shape-margin
  • The test verifies that text wraps around a left float with a shape-outside defined as a ellipse from the margin box with the radii specified in percentage units and with a shape-margin.
shape-outside-ellipse-021 = Ahem right float, ellipse (closest-side px) + shape-margin + padding box
  • The test verifies that text wraps around a right float with a shape-outside defined as a ellipse from the padding box with rx explicitly set at closest-side and ry in px units and with a shape-margin.
shape-outside-ellipse-022 = Ahem right float, ellipse(closest-side px) + shape-margin + content-box
  • The test verifies that text wraps around a right float with a shape-outside defined as a ellipse from the content box with a shape-margin.
shape-outside-ellipse-023 = Ahem right float, ellipse + shape-margin
  • The test verifies that text wraps around a right float with a shape-outside defined as an ellipse with only the horizontal offset specifed in px and with a shape-margin.
shape-outside-ellipse-024 = Ahem right float, ellipse at position (%) + shape-margin (%) + border-box
  • The test verifies that text wraps around a right float with a shape-outside defined as a ellipse positioned from the border box with only the horizontal offset specified in percentage units and with a shape-margin in percentage units.
shape-outside-ellipse-025 = Ahem right float, ellipse radii in % at center right + shape-margin + padding-box
  • The test verifies that text wraps around a right float with a shape-outside defined as a ellipse with the radii in percentage units positioned at center right from the margin box with a shape-margin.
shape-outside-ellipse-030 = AhemDOM/JS left float, ellipse radii in px
  • The test verifies that text wraps around a left float with a shape-outside defined as an ellipse with radii in px units.
shape-outside-ellipse-031 = AhemDOM/JS left float, ellipse radii in % units
  • The test verifies that text wraps around a left float with a shape-outside defined as an ellipse with radii in % units.
shape-outside-ellipse-052 = Ahem left float, offset ellipse + shape-margin in % units
  • The test verifies that text wraps around a left float with a shape-outside defined as a ellipse with a shape-margin in pixel units. Additionally, the shape-outside: ellipse element is offset from its containing block.
shape-outside-invalid-circle-003 DOM/JSScript Circle - invalid cx value
  • shape-outside declaration is invalid if circle shape function has an invalid cx param
shape-outside-invalid-ellipse-001 DOM/JSScript Ellipse - invalid 2 arg
  • shape-outside declaration is invalid if ellipse shape function has two invalid arguments
shape-outside-inset-000 AhemDOM/JSScript Shape Outside Inset Valid Formats
  • An inset has 1 to 4 insets, and optional border radii that follow the border-radius format
shape-outside-inset-001 AhemDOM/JSScript Shape Outside Inset Valid Insets
  • An inset has 1 to 4 insets as percentages or length in any unit
shape-outside-inset-002 AhemDOM/JSScript Shape Outside Inset Valid Rounds
  • An inset's radial component has 1 to 4 length/percentages, optionally followed by a '/' and an additional 1 to 4 length/percentages and lengths can be in any unit.
shape-outside-inset-003 AhemDOM/JSScript Shape Outside Inset Valid Round Length Units
  • An inset's radial component's values can be in any length unit
shape-outside-inset-004 AhemDOM/JSScript Shape Outside Inset - positive/negative, decimal/non-decimal args
  • These tests verify that shape-outside inset() arguments can be numbers that are signed in positive and negative and/or decimal/non-decimal form.
shape-outside-inset-005 AhemDOM/JSScript Shape Outside Inset - Invalid args
  • These tests verifies that invalid inset() arguments don't parse.
shape-outside-inset-006 AhemDOM/JSScript Shape Outside Inset Radial Args - positive/negative, decimal/non-decimal
  • These tests verify that shape-outside inset() radial component can be numbers that are in signed positive and/or decimal/non-decimal form. Negative values are not allowed
shape-outside-inset-007 AhemDOM/JSScript Shape Outside Inset Radial Args - Invalid
  • These tests verify invalid radial component arguments don't parse.
shape-outside-inset-008 AhemDOM/JSScript Shape Outside Inset Args - calc() values
  • An inset's arguments may be in calc() values.
shape-outside-inset-009 AhemDOM/JSScript Shape Outside Inset round args - calc() values
  • An inset's radial component arguments may be in calc() values.
shape-outside-inset-010 = Ahem left float, inset, px units
  • The test verfies that text flows around a left float with a shape-outside defined as an inset rectangle in px units.
shape-outside-inset-011 = Ahem left float, inset, % units
  • The test verfies that text flows around a left float with a shape-outside defined as an inset rectangle in percentage units.
shape-outside-inset-012 = Ahem left float, inset + margin-box
  • The test verfies that text flows around a left float with a shape-outside defined as an inset rectangle + margin-box.
shape-outside-inset-013 = Ahem left float, inset + border-box
  • The test verfies that text flows around a left float with a shape-outside defined as an inset rectangle + border-box.
shape-outside-inset-014 = Ahem left float, inset + content-box
  • The test verfies that text flows around a left float with a shape-outside defined as an inset rectangle + content-box.
shape-outside-inset-015 = Ahem left float, inset + padding-box
  • The test verfies that text flows around a left float with a shape-outside defined as an inset rectangle + padding-box.
shape-outside-inset-028 = Ahem left float, inset, px units
  • The test verfies that text flows around a right float with a shape-outside defined as an inset rounded rectangle in px units with a shape-margin.
shape-outside-inset-029 = Ahem left float, inset, px units
  • The test verfies that text flows around a right float with a shape-outside defined as an inset irregular elliptically rounded rectangle in px units with a shape-margin.
shape-outside-inset-030 = Ahem left float, offset inset, px units
  • The test verfies that text flows around a right float with a shape-outside defined as an inset irregular elliptically rounded rectangle in px units with a shape-margin. Additionally, the shape-outside: inset element is offset from its containing block.
shape-outside-invalid-inset-001 DOM/JSScript Inset Rectangles - invalid top arg
  • shape-outside declaration is invalid if inset shape function has an invalid top param
shape-outside-invalid-inset-002 DOM/JSScript Inset Rectangles - invalid right arg
  • shape-outside declaration is invalid if inset shape function has an invalid right param
shape-outside-invalid-inset-003 DOM/JSScript Inset Rectangles - invalid bottom arg
  • shape-outside declaration is invalid if inset shape function has an invalid bottom param
shape-outside-invalid-inset-004 DOM/JSScript Inset Rectangles - invalid left param
  • shape-outside declaration is invalid if inset shape function has an invalid left param
shape-outside-polygon-000 AhemDOM/JSScript Shape Outside Polygon Valid Formats
  • A polygonal basic shape has an optional fill-rule and one or more pairs of coordinates
shape-outside-polygon-001 AhemDOM/JSScript Shape Outside Polygon Valid Fill-Rules
  • A polygonal basic shape's optional fill-rule may be either 'nonzero' or 'evenodd'
shape-outside-polygon-002 AhemDOM/JSScript Shape Outside Polygon Valid Points
  • A polygonal basic shape's points may be either lengths or percentages
shape-outside-polygon-003 AhemDOM/JSScript Shape Outside Polygon Invalid Points
  • A polygonal basic shape's points may be either lengths or percentages
shape-outside-polygon-004 AhemDOM/JSScript Shape Outside Polygon - Argument Length Units
  • A polygon's veritices may in percentage or any valid <length> units.
shape-outside-polygon-005 AhemDOM/JSScript Shape Outside Polygon Valid Points
  • A polygon's vertices can be in signed positive/negative or decimal/non-decimal format
shape-outside-polygon-006 AhemDOM/JSScript Shape Outside Polygon args - calc() values
  • A polygon's arguments may be in calc() values.
shape-outside-polygon-007 = Ahem left float, polygon, args in px units
  • The test verifies that text wraps around a left float with a shape-outside defined as an polygon with the args in px units.
shape-outside-polygon-008 = Ahem left float, polygon, args in % units
  • The test verifies that text wraps around a left float with a shape-outside defined as an polygon with the args in px units.
shape-outside-polygon-009 = Ahem left float, polygon + border box
  • The test verifies that text wraps around a left float with a shape-outside defined as an polygon from the border box.
shape-outside-polygon-010 = Ahem left float, polygon + padding box
  • The test verifies that text wraps around a left float with a shape-outside defined as an polygon from the padding box.
shape-outside-polygon-011 = Ahem left float, polygon + content box
  • The test verifies that text wraps around a left float with a shape-outside defined as an polygon from the content box.
shape-outside-polygon-012 = Ahem right float, polygon + margin-box + shape-margin
  • The test verifies that text wraps around a right float with a shape-outside defined as an polygon from the margin box with a shape margin.
shape-outside-polygon-013 = Ahem right float, polygon + border-box + shape-margin
  • The test verifies that text wraps around a right float with a shape-outside defined as an polygon from the border box with a shape margin.
shape-outside-polygon-014 = Ahem right float, polygon + padding-box + shape-margin
  • The test verifies that text wraps around a right float with a shape-outside defined as an polygon from the padding box with a shape margin.
shape-outside-polygon-015 = Ahem right float, polygon + content-box + shape-margin
  • The test verifies that text wraps around a right float with a shape-outside defined as an polygon from the content box wtih a shape margin.
shape-outside-polygon-016 = Ahem polygon, evenodd
  • The test verifies that evenodd behaves the same as nonzero for shape-outside and that text will wraps around the outer edge of a polygon.
shape-outside-polygon-017 = Ahem right float, polygon + shape-margin beyond margin box
  • The test verifies that when a shape-margin is defined that extends beyond the margin box, the shape is clipped to the box.
shape-outside-polygon-032 = Ahem right float, offset polygon + margin-box + shape-margin
  • The test verifies that text wraps around a right float with a shape-outside defined as an polygon from the margin box with a shape margin. Additionally, the shape-outside: polygon element is offset from its containing block.
+ 3.2 Computed Values of Basic Shapes
+ 3.3 Serialization of Basic Shapes
+ 3.4 Interpolation of Basic Shapes