masking-path-07-b.svg

Run the test. No interaction required.

The test has passed if the following conditions are met:

• There is no red visible.
• No shapes extend outside of the rects that have a thick black border.
• For the left subtest:
  • There must be a large blue rect with a transparent smaller rect in it, and the intersection of two circles.
  • The borders of the clipregions are shown with black stroke.
  • The blue shapes must be visible only inside of these stroked regions.
• For the right subtest:
  • The test on the right must show part of the large blue rect shape with a transparent rect in it, and part of a circle.
  • The blue shapes must only be visible inside of the circle that has black stroke.

This tests that 'clipPath' elements can be used together and how the clipping paths are intersected.

There is a gray-white pattern as a background for the two subtest rectangles. This is to show that the holes that are cut out using clip-paths are transparent. The first subtest verifies that when you use the 'clip-path' property on a child element inside a 'clipPath' element the child element is clipped correctly. The second subtest verifies that when a 'clipPath' element has a 'clip-path' property the result is the intersection of the two clip paths.