CSS Shapes Module Level 1 CR Test Suite

Shapes from Box Values (83 tests)

Test Refs Flags Info
+ 5 Shapes from Box Values
shape-outside-014 AhemDOM/JSScript Shape from box value - margin-box
  • This test verifies that content wraps around a shape defined by its margin box.
shape-outside-015 AhemDOM/JSScript Shape from box value - border-box
  • This test verifies that content wraps around a shape defined by its border box.
shape-outside-016 AhemDOM/JSScript Shape from box value - padding-box
  • This test verifies that content wraps around a shape defined by its padding box.
shape-outside-017 AhemDOM/JSScript Shape from box value - content-box
  • This test verifies that content wraps around a shape defined by its content box.
shape-outside-018 AhemDOM/JSScript shape-margin offset from a polygonal shape-outside
  • This test verifies that that content flows around the shape-margin defined on a polygonal shape-outside.
shape-outside-border-box-001 = float left, border-box
  • Test the boxes are wrapping around the left float shape defined by the border-box value.
shape-outside-border-box-002 = float right, border-box
  • Test the boxes are wrapping around the right float shape defined by the border-box value.
shape-outside-border-box-border-radius-001 = float left, border-box, border-radius
  • Test the boxes are wrapping around the left float shape defined by the border-box and border-radius value.
shape-outside-border-box-border-radius-002 = float left, border-box, border-radius, no margin
  • Test the boxes are wrapping around the left float shape defined by the border-box and border-radius value.
shape-outside-border-box-border-radius-003 = float right, border-box, border-radius
  • Test the boxes are wrapping around the right float shape defined by the border-box and border-radius value.
shape-outside-border-box-border-radius-004 = float right, border-box, border-radius, no margin
  • Test the boxes are wrapping around the right float shape defined by the border-box and border-radius value.
shape-outside-border-box-border-radius-005 = vertical-rl, float left, border-box, border-bottom-right-radius
  • Test the boxes are wrapping around the left float shape defined by the border-box and border-bottom-right-radius value under vertical-rl writing-mode.
shape-outside-border-box-border-radius-006 = vertical-rl, float right, border-box, border-top-right-radius
  • Test the boxes are wrapping around the right float shape defined by the border-box and border-top-right-radius value under vertical-rl writing-mode.
shape-outside-border-box-border-radius-007 = vertical-lr, float left, border-box, border-bottom-right-radius
  • Test the boxes are wrapping around the left float shape defined by the border-box and border-bottom-right-radius value under vertical-lr writing-mode.
shape-outside-border-box-border-radius-008 = vertical-lr, float right, border-box, border-top-right-radius
  • Test the boxes are wrapping around the right float shape defined by the border-box and border-top-right-radius value under vertical-lr writing-mode.
shape-outside-border-box-border-radius-009 = sideways-rl, float left, border-box, border-bottom-right-radius
  • Test the boxes are wrapping around the left float shape defined by the border-box and border-bottom-right-radius value under sideways-rl writing-mode.
shape-outside-border-box-border-radius-010 = sideways-rl, float right, border-box, border-top-right-radius
  • Test the boxes are wrapping around the right float shape defined by the border-box and border-top-right-radius value under sideways-rl writing-mode.
shape-outside-border-box-border-radius-011 = sideways-lr, float left, border-box, border-top-right-radius
  • Test the boxes are wrapping around the left float shape defined by the border-box and border-top-right-radius value under sideways-lr writing-mode.
shape-outside-border-box-border-radius-012 = sideways-lr, float right, border-box, border-bottom-right-radius
  • Test the boxes are wrapping around the right float shape defined by the border-box and border-bottom-right-radius value under sideways-lr writing-mode.
shape-outside-box-002 = Ahem left float, shape-outside: content-box
  • The test verifies that text wraps around a left float with a shape-outside defined as the content box.
shape-outside-box-003 = Ahem left float, shape-outside: border-box
  • The test verifies that text wraps around a left float with a shape-outside defined as the border box.
shape-outside-box-004 = Ahem left float, shape-outside: padding-box
  • The test verifies that text wraps around a left float with a shape-outside defined as the padding box.
shape-outside-box-006 = Ahem right float, shape-outside: content-box
  • The test verifies that text wraps around a right float with a shape-outside defined as the content box.
shape-outside-box-007 = Ahem right float, shape-outside: border-box
  • The test verifies that text wraps around a right float with a shape-outside defined as the border box.
shape-outside-box-008 = Ahem right float, shape-outside: padding-box
  • The test verifies that text wraps around a right float with a shape-outside defined as the padding box.
shape-outside-box-009 = Ahem right float, shape-outside: border-box
  • The test verifies that text wraps around a right float with a shape-outside defined as the border box, with negative margins. The float area is clipped to the margin box.
shape-outside-content-box-001 = float left, content-box
  • Test the boxes are wrapping around the left float shape defined by the content-box value.
shape-outside-content-box-002 = float right, content-box
  • Test the boxes are wrapping around the right float shape defined by the content-box value.
shape-outside-content-box-border-radius-001 = float left, content-box, border-radius
  • Test the boxes are wrapping around the left float shape defined by the content-box and border-radius value.
shape-outside-content-box-border-radius-002 = float right, content-box, border-radius
  • Test the boxes are wrapping around the right float shape defined by the content-box and border-radius value.
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-margin-box-001 = float left, margin-box
  • Test the boxes are wrapping around the left float shape defined by the margin-box value.
shape-outside-margin-box-002 = float right, margin-box
  • Test the boxes are wrapping around the right float shape defined by the margin-box value.
shape-outside-margin-box-border-radius-001 = float left, margin-box, border-radius
  • Test the boxes are wrapping around the left float shape defined by the margin-box and border-radius value.
shape-outside-margin-box-border-radius-002 = float left, margin-box, border-radius
  • Test the boxes are wrapping around the left float shape defined by the margin-box and border-radius value.
shape-outside-margin-box-border-radius-003 = float right, margin-box, border-radius
  • Test the boxes are wrapping around the right float shape defined by the margin-box and border-radius value.
shape-outside-margin-box-border-radius-004 = float right, margin-box, border-radius
  • Test the boxes are wrapping around the right float shape defined by the margin-box and border-radius value.
shape-outside-margin-box-border-radius-005 = float left, margin-box, border-top-right-radius
  • Test the boxes are wrapping around the left float shape defined by the margin-box and border-top-right-radius value.
shape-outside-margin-box-border-radius-006 = float left, margin-box, border-bottom-right-radius
  • Test the boxes are wrapping around the left float shape defined by the margin-box and border-bottom-right-radius value.
shape-outside-margin-box-border-radius-007 = float left in rtl container, margin-box, border-top-right-radius
  • Test the boxes are wrapping around the left float shape in rtl container defined by the margin-box and border-top-right-radius value.
shape-outside-margin-box-border-radius-008 = float right in ltr container, margin-box, border-top-left-radius
  • Test the boxes are wrapping around the right float shape in ltr container defined by the margin-box and border-top-left-radius value.
shape-outside-padding-box-001 = float left, padding-box
  • Test the boxes are wrapping around the left float shape defined by the padding-box value.
shape-outside-padding-box-002 = float right, padding-box
  • Test the boxes are wrapping around the right float shape defined by the padding-box value.
shape-outside-padding-box-border-radius-001 = float left, padding-box, border-radius
  • Test the boxes are wrapping around the left float shape defined by the padding-box and border-radius value.
shape-outside-padding-box-border-radius-002 = float right, padding-box, border-radius
  • Test the boxes are wrapping around the right float shape defined by the padding-box and border-radius value.
shape-outside-box-003 = Ahem left float, shape-outside: border-box
  • The test verifies that text wraps around a left float with a shape-outside defined as the border box.
shape-outside-box-007 = Ahem right float, shape-outside: border-box
  • The test verifies that text wraps around a right float with a shape-outside defined as the border box.
shape-outside-box-009 = Ahem right float, shape-outside: border-box
  • The test verifies that text wraps around a right float with a shape-outside defined as the border box, with negative margins. The float area is clipped to the margin 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-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-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-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-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-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-box-002 = Ahem left float, shape-outside: content-box
  • The test verifies that text wraps around a left float with a shape-outside defined as the content box.
shape-outside-box-006 = Ahem right float, shape-outside: content-box
  • The test verifies that text wraps around a right float with a shape-outside defined as the content box.
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-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-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-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-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-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-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-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-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-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-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-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-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-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-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.
shape-outside-box-004 = Ahem left float, shape-outside: padding-box
  • The test verifies that text wraps around a left float with a shape-outside defined as the padding box.
shape-outside-box-008 = Ahem right float, shape-outside: padding-box
  • The test verifies that text wraps around a right float with a shape-outside defined as the padding box.
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-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-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-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-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-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-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-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-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-box-000 AhemDOM/JSScript Shape Outside Box Valid Values
  • Shape-outside may be one of the box model box values
shape-outside-shape-box-pair-000 AhemDOM/JSScript Shape Outside Box Shape and Box Valid Values
  • Shape-outside may be a pair of shape and box values