CSS Shapes Module Level 1 CR Test Suite

Shapes from Image (53 tests)

Test Refs Flags Info
+ 4 Shapes from Image
shape-image-000 = AhemBitmaps Image shape on a left float
  • This test verifies that a shape specified as a png image in a data: url is properly respected on a left float.
shape-image-001 = AhemBitmaps Image shape on a left float
  • This test verifies that a shape specified as a png image with 70% alpha is treated as if the image had no alpha.
shape-image-002 = AhemBitmaps Image shape on a left float
  • This test verifies that a shape specified as a svg image in a data uri is properly interpreted as a shape.
shape-image-003 = AhemBitmaps Image shape on a left float
  • This test verifies that a shape specified as a svg image with 20% alpha and 0.3 shape-image-threshold creates a proper shape.
shape-image-004 = AhemBitmaps Image shape on a left float
  • This test verifies that a shape specified as a png image with 50% alpha and 0.6 shape-image-threshold creates a proper shape.
shape-image-005 = AhemBitmaps Image shape on a left float
  • This test verifies that a shape specified as a svg image in a data uri with 70% alpha and 0.8 shape-image-threshold creates a proper shape.
shape-image-006 = Ahem left float, url(png), real image + shape-margin (px)
  • This test verifies that content wraps around all the image pixels + the shape-margin when shape-outside is given a png file.
shape-image-007 = Ahem left float, url(svg), real image + shape-margin (px)
  • This test verifies that content wraps around all the image pixels + the shape-margin when shape-outside is given an svg file.
shape-image-008 = Ahem left float, url(jpg), data uri + shape-margin (%)
  • This test verifies that content wraps around all the image pixels + the shape-margin as a percentage when shape-outside is given an jpg data uri.
shape-image-009 = Ahem left float, url(png), real image 70% + shape-image-threshold + shape-margin (px)
  • This test verifies that content wraps around the image pixels extracted from a shape-outside png file with shape-image-threshold set + the shape-margin in absolute length.
shape-image-010 = Ahem left float, url(png), data uri + shape-image-threshold + shape-margin (%)
  • This test verifies that content wraps around the image pixels extracted from a shape-outside png file with shape-image-threshold set + the shape-margin as a percentage.
shape-image-011 = Ahem left float, url(svg), real image + shape-image-threshold + shape-margin (px)
  • This test verifies that content wraps around the image pixels extracted from a shape-outside svg file with shape-image-threshold set + the shape-margin in absolute length.
shape-image-012 = Ahem Wrapping content around right floating actual jpg image
  • This test verifies that content wraps around all the image pixels when shape-outside is given a jpg.
shape-image-013 = Ahem Wrapping content around shape given by a right floating png
  • This test verifies that content wraps around the shape defined by the data uri png.
shape-image-014 = Ahem Wrapping content around shape given by a right floating svg file
  • This test verifies that content wraps around the shape defined by an svg file.
shape-image-015 = AhemBitmaps Image shape on a right float
  • This test verifies that a shape specified as a png image with 20% alpha and 0.2 shape-image-threshold creates a proper shape.
shape-image-016 = AhemBitmaps Image shape on a right float
  • This test verifies that a shape specified as a png image with 70% alpha and 0.71 shape-image-threshold creates a proper shape.
shape-image-017 = AhemBitmaps Image shape on a right float
  • This test verifies that a shape specified as a data uri svg with 70% alpha creates a proper shape, shape-image-threshold is defined to 0.71.
shape-image-018 = Ahem right float, url(jpg), real image + shape-margin (%)
  • This test verifies that the boundary of a shape-outside defined by a JPEG image file is the same as the image's dimensions + shape-margin.
shape-image-019 = Ahem right float, url(png), data uri + shape-margin (px)
  • This test verifies the boundary of a shape-outside defined by a PNG data URI and a shape-margin.
shape-image-020 = Ahem right float, url(svg), data uri + shape-margin (%)
  • This test verifies the boundary of a shape-outside defined by an SVG URI and a shape-margin.
shape-image-021 = Ahem right float, url(png), real image + shape-image-threshold + shape-margin (%)
  • This test verifies that the boundary of a shape-outside defined by a PNG image file and shape-margin is correct.
shape-image-022 = Ahem right float, url(gif), real image + shape-image-threshold + shape-margin (px)
  • This test verifies that the boundary of a shape-outside defined by a GIF image file and shape-margin is correct.
shape-image-023 = Ahem right float, url(svg), data uri + shape-image-threshold + shape-margin (%)
  • This test verifies the boundary of a shape-outside defined by an SVG URI, shape-image-threshold, and a shape-margin.
shape-image-024 = Ahem shape-outside from img element with different size than the image file
  • This test verifies that content wraps around all the image pixels calculated from the size of the img element, which is different than the size of the image itself.
shape-image-025 = Ahem shape-outside from first frame of animated gif
  • This test verifies that shape-outside is extracted from the first frame of an animated gif.
shape-image-026 = Ahem left float, url(png), real offset image + shape-margin (px)
  • This test verifies that content wraps around all the image pixels + the shape-margin when shape-outside is given a png file. Additionally, the shape-outside: image element is offset from its containing block.
shape-image-027 = Ahem left float, url(png), real negative offset image + shape-margin (px)
  • This test verifies that content wraps around all the image pixels + the shape-margin when shape-outside is given a png file. Additionally, the shape-outside: image element is given a negative left offset relative to its containing block.
shape-outside-010 AhemDOM/JSScript Shape from image - url(), alpha channel, opacity 0
  • This test verifies that the content flows around the shape defined in the images alpha channel that is completely transparent.
shape-outside-011 AhemDOM/JSScript Shape from image - url(), alpha channel, opacity > 0
  • This test verifies that the content flows around the shape defined in the images alpha channel that has some opacity.
shape-outside-012 AhemDOM/JSScript Shape from image - shape-image-threshold - 0.9
  • This test verifies content flows around a shape that is defined in the image's alpha channel and adjusted by the image-threshold
shape-outside-013 AhemDOM/JSScript Shape from image - shape-margin
  • This test verifies that the content flows around the shape defined in the images alpha channel and adjusted by the shape-margin.
shape-outside-019 AhemDOM/JSScript Shape from image - alpha channel, opacity > 0 + shape-margin
  • This test verifies that the content flows around the shape defined in the images alpha channel and the shape-margin.
shape-outside-linear-gradient-001 = Ahem Left float with linear gradient
  • This test verifies that shape-outside respects a simple linear gradient.
shape-outside-linear-gradient-002 = Ahem Right float with linear gradient
  • This test verifies that shape-outside respects a simple linear gradient on a right float.
shape-outside-linear-gradient-003 = Ahem Right float with linear gradient
  • This test verifies that shape-outside respects a simple linear gradient on a right float with shape-margin applied.
shape-outside-linear-gradient-004 = Shape outside and repeating linear gradient
  • This test verifies that content wraps correctly around a shape defined by a repeating linear gradient.
shape-outside-linear-gradient-005 = Ahem Test float with linear gradient under writing-mode: vertical-rl
  • This test verifies that shape-outside respects a simple linear gradient under vertical-rl.
shape-outside-linear-gradient-006 = Ahem Test float with linear gradient under writing-mode: vertical-lr
  • This test verifies that shape-outside respects a simple linear gradient under vertical-lr.
shape-outside-linear-gradient-007 = Ahem Test float with linear gradient under writing-mode: sideways-rl
  • This test verifies that shape-outside respects a simple linear gradient under sideways-rl.
shape-outside-linear-gradient-008 = Ahem Test float with linear gradient under writing-mode: sideways-lr
  • This test verifies that shape-outside respects a simple linear gradient under sideways-lr.
shape-outside-linear-gradient-009 = Ahem Test float with linear gradient under writing-mode: vertical-rl and text-orientation: sideways
  • This test verifies that shape-outside respects a simple linear gradient under vertical-rl and text-orientation: sideways.
shape-outside-linear-gradient-010 = Ahem Test float with linear gradient under writing-mode: vertical-lr and text-orientation: sideways
  • This test verifies that shape-outside respects a simple linear gradient under vertical-lr and text-orientation: sideways.
shape-outside-linear-gradient-011 = Ahem Test float with linear gradient under writing-mode: vertical-rl
  • This test verifies that shape-outside respects a simple linear gradient with shape-margin under vertical-rl.
shape-outside-linear-gradient-012 = Ahem Test float with linear gradient under writing-mode: vertical-lr
  • This test verifies that shape-outside respects a simple linear gradient with shape-margin under vertical-lr.
shape-outside-linear-gradient-013 = Ahem Test float with linear gradient under writing-mode: sideways-rl
  • This test verifies that shape-outside respects a simple linear gradient with shape-margin under sideways-rl.
shape-outside-linear-gradient-014 = Ahem Test float with linear gradient under writing-mode: sideways-lr
  • This test verifies that shape-outside respects a simple linear gradient with shape-margin under sideways-lr.
shape-outside-linear-gradient-015 = Ahem Test float with linear gradient under writing-mode: vertical-rl and text-orientation: sideways
  • This test verifies that shape-outside respects a simple linear gradient with shape-margin under vertical-rl and text-orientation: sideways.
shape-outside-linear-gradient-016 = Ahem Test float with linear gradient under writing-mode: vertical-lr and text-orientation: sideways
  • This test verifies that shape-outside respects a simple linear gradient with shape-margin under vertical-lr and text-orientation: sideways.
shape-outside-radial-gradient-001 AhemDOM/JSScript Left float with radial gradient
  • This test verifies that shape-outside respects a simple radial gradient.
shape-outside-radial-gradient-002 AhemDOM/JSScript Left float with radial gradient and percentage shape margin
  • This test verifies that shape-outside respects a simple radial gradient when a percentage margin is applied.
shape-outside-radial-gradient-003 AhemDOM/JSScript Left float with radial gradient shape, shape margin, and shape-image-threshold
  • This test verifies that shape-outside respects a simple radial gradient when a shape margin and shape-image threshold are applied.
shape-outside-radial-gradient-004 AhemDOM/JSScript Left float with radial gradient shape, shape margin, and shape-image-threshold
  • This test verifies that shape-outside respects a simple radial gradient on a right float when shape-image-threshold is applied.