CSS Masking Level 1 CR Test Suite

The deprecated clip property (28 tests)

Test Refs Flags Info
+ A The deprecated clip property
clip-absolute-positioned-001 = CSS Masking: Test clip property and rect function on div with position: absolute
  • The clip property should clip elements whose layout are governed by the CSS box model and that are abolutely positioned with 'position: absolute;'. On pass you should see a green square and no red.
clip-absolute-positioned-002 = CSS Masking: Test clip property and rect function on div with position: fixed
  • The clip property should clip elements whose layout are governed by the CSS box model and that are abolutely positioned with 'position: fixed;'. On pass you should see a green square and no red.
clip-computed Script CSS Masking Module Level 1: getComputedStyle().clip
  • clip computed value is as specified, with lengths made absolute.
clip-interpolation Script clip interpolation
  • clip supports animation
clip-invalid Script CSS Masking Module Level 1: parsing clip with invalid values
  • clip supports only the grammar 'rect() | auto'.
clip-negative-values-001 = CSS Masking: Test clip property does not clip on with negative values - 1
  • Negative values are permitted on rect function for clip. Test that whole element is clipped if bottom edge is before top edge. On pass you should see a green square and no red.
clip-negative-values-002 = CSS Masking: Test clip property does not clip on with negative values - 2
  • Negative values are permitted on rect function for clip. Test that whole element is clipped if right edge is before left edge. On pass you should see a green square and no red.
clip-negative-values-003 = CSS Masking: Test clip property does not clip on with negative values - 3
  • Negative values are permited on rect function for clip. Test that left edge can be negative. On pass you should see a vertical blue stripe.
clip-negative-values-004 = CSS Masking: Test clip property does not clip on with negative values - 4
  • Negative values are permited on rect function for clip. Test that top edge can be negative. On pass you should see a horizontal blue stripe.
clip-no-clipping-001 = CSS Masking: Test clip property does not clip on 'auto'
  • The clip property should on 'auto'. On pass you should see a green box with a blue border.
clip-no-clipping-002 = CSS Masking: Test clip property does not clip overflowing content on 'auto'.
  • The clip property should not clip overflowing content of elements whose layout are governed by the CSS box model, the position is absolute and the clip value is 'auto'. On pass you should see a a green square with a blue border.
clip-not-absolute-positioned-001 = CSS Masking: Test clip property and rect function on not absolutely positioned div - 1
  • The clip property should be ignored on elements whose layout are governed by the CSS box model and are not abolutely positioned. On pass you should see a green square with a blue border.
clip-not-absolute-positioned-002 = CSS Masking: Test clip property and rect function on not absolutely positioned div - 2
  • The clip property should be ignored on elements whose layout are governed by the CSS box model and are not abolutely positioned. Creating a stacking context with z-index does not influence clipping behavior. On pass you should see a green box square with a blue border.
clip-not-absolute-positioned-003 = CSS Masking: Test clip property and rect function on not absolutely positioned div - 3
  • The clip property should be ignored on elements whose layout are governed by the CSS box model and are not abolutely positioned. Creating a 3d rednering context does not influence clipping behavior. On pass you should see a green square with a blue border.
clip-not-absolute-positioned-004 = CSS Masking: Test clip property and rect function on not absolutely positioned div - 4
  • The clip property should be ignored on elements whose layout are governed by the CSS box model and are not abolutely positioned. position: relative does not influence clipping behavior. On pass you should see a green square with a blue border.
clip-rect-auto-001 = CSS Masking: Test clip property with rect function and auto values clip to border box - 1
  • A value of 'auto' in the rect function is equal to the certain edge of the border box. The content should be clipped to the border box. On pass you see a blue square and a smaller green square in the bottom right corner of the blue square.
clip-rect-auto-002 = CSS Masking: Test clip property with rect function and auto values clip to border box - 2
  • A value of 'auto' in the rect function is equal to the certain edge of the border box. The box shadow should be clipped, since it is painted outside the border box. On pass you should see a green square with a blue border.
clip-rect-auto-003 = CSS Masking: Test clip property with rect function and auto value for top value
  • A value of 'auto' for 'top' in the rect function is equal to the top edge of the border box. The box shadow should be clipped, since it is painted outside the border box. On pass you should see a horizontal green stripe under a horizontal blue stripe.
clip-rect-auto-004 = CSS Masking: Test clip property with rect function and auto value for right value
  • A value of 'auto' for 'right' in the rect function is equal to the top edge of the border box. The box shadow should be clipped, since it is painted outside the border box. On pass you should see a vertical blue stripe on the right side of a vertical green stripe.
clip-rect-auto-005 = CSS Masking: Test clip property with rect function and auto value for bottom value
  • A value of 'auto' for 'bottom' in the rect function is equal to the top edge of the border box. The box shadow should be clipped, since it is painted outside the border box. On pass you should see a horizontal blue stripe under a horizontal green stripe.
clip-rect-auto-006 = CSS Masking: Test clip property with rect function and auto value for left value
  • A value of 'auto' for 'left' in the rect function is equal to the top edge of the border box. The box shadow should be clipped, since it is painted outside the border box. On pass you should see a vertical green stripe on the right side of a vertical blue stripe.
clip-rect-comma-001 = CSS Masking: Test comma separation of rect function on clip - no commas
  • Values for rect function on clip can be white space or comma separated, but not both. Otherwise the property setting gets ignored. Testing rect function with white space separation. On pass you should see a green square and no red.
clip-rect-comma-002 = CSS Masking: Test comma separation of rect function on clip - no comma between 1st and 2nd value
  • Values for rect function on clip can be white space or comma separated, but not both. Otherwise the property setting gets ignored. Testing rect function without comma separation between 1st and 2nd value. On pass you should see a green square with a blue border.
clip-rect-comma-003 = CSS Masking: Test comma separation of rect function on clip - no comma between 2nd and 3rd value
  • Values for rect function on clip can be white space or comma separated, but not both. Otherwise the property setting gets ignored. Testing rect function without comma separation between 2nd and 3rd value. On pass you should see a green square with a blue border.
clip-rect-comma-004 = CSS Masking: Test comma separation of rect function on clip - no comma between 3rd and 4th value
  • Values for rect function on clip can be white space or comma separated, but not both. Otherwise the property setting gets ignored. Testing rect function without comma separation between 3rd and 4th value. On pass you should see a green square with a blue border.
clip-rect-scroll = CSS Masking: Test clip property with rect function with overflow:scroll
clip-valid Script CSS Masking Module Level 1: parsing clip with valid values
  • clip supports the full grammar 'rect() | auto'.
clip-no-stacking-context = Clip does not create a stacking context