|
+
5.1 Curve Radii: the ‘border-radius’ properties |
|---|
|
border-bottom-left-radius-001 |
= |
|
Borders. Border-bottom-left-radius using 0 value
- To verify the border-bottom-left-radius property, when set with 0, works as expected
|
|
border-bottom-left-radius-002 |
|
|
Borders. Border-bottom-left-radius using one length value: 25px
- To verify if border-bottom-left-radius property set to one length value, works as expected
|
|
border-bottom-left-radius-003 |
= |
|
Borders. Border-bottom-left-radius using two length values: 40px 20px
- To verify border-bottom-left-radius property set to two length values, works as expected
|
|
border-bottom-left-radius-004 |
= |
|
Borders. Border-bottom-left-radius using one percentage value: 20%
- To verify border-bottom-left-radius property set to percentage value, works as expected
|
|
border-bottom-left-radius-005 |
= |
|
Borders. Border-bottom-left-radius using two percentage values: 20% 30%
- To verify border-bottom-left-radius property set to two precentage value, works as expected
|
|
border-bottom-left-radius-006 |
= |
|
Borders. Border-bottom-left-radius using two values: 40px 30%
- To verify border-bottom-left-radius property set to two values in different unit, works fine
|
|
border-bottom-left-radius-007 |
= |
|
Borders. Border-bottom-left-radius using two values: 20% 25px
- To verify border-bottom-left-radius property set to two values in different unit, works fine
|
|
border-bottom-left-radius-008 |
|
|
Borders. Border-bottom-left-radius using two values: 4em 30%
- To verify border-bottom-left-radius property set to two values in different units, works fine
|
|
border-bottom-left-radius-009 |
= |
|
Borders. Border-bottom-left-radius using "inherit"
- To verify if inherit feature works, when assigned to border-bottom-left-radius
|
|
border-bottom-left-radius-010 |
= |
|
Borders. Border-bottom-left-radius using one length value: 25px 0
- To verify border-bottom-left-radius property set to one length value, works fine
|
|
border-bottom-left-radius-011 |
= |
|
Borders. Border-bottom-left-radius using one length value: 0 3em
- To verify border-bottom-left-radius property set to one length value, works fine
|
|
border-bottom-left-radius-012 |
|
|
Borders. Border-bottom-left-radius using two length values: 0.5in 10mm
- To verify border-bottom-left-radius property set to two length values (with diferent units), works as expected
|
|
border-bottom-left-radius-013 |
|
|
Borders. Border-bottom-left-radius using two length values: 40pt 2pc
- To verify border-bottom-left-radius property set to two length values (with different units), works as expected
|
|
border-bottom-left-radius-014 |
= |
|
Borders. Border-bottom-left-radius using two length values: 50px -25px
- To verify if one length value is negative in border-bottom-left-radius, then the corner is not rounded.
|
|
border-bottom-right-radius-001 |
= |
|
Borders. Border-bottom-right-radius using 0 value
- To verify border-bottom-right-radius property, when set with 0, works as expected
|
|
border-bottom-right-radius-002 |
|
|
Borders. Border-bottom-right-radius using one length value: 25px
- To verify border-bottom-right-radius property set with one length value, works as expected
|
|
border-bottom-right-radius-003 |
= |
|
Borders. Border-bottom-right-radius using two length values: 40px 20px
- To verify border-bottom-right-radius property set with two length values, works as expected
|
|
border-bottom-right-radius-004 |
= |
|
Borders. Border-bottom-right-radius using one percentage value: 20%
- To verify border-bottom-right-radius property set with one percentage value, works as expected
|
|
border-bottom-right-radius-005 |
= |
|
Borders. Border-bottom-right-radius using two percentage value: 20% 30%
- To verify border-bottom-right-radius property set with two percentage value works as expected
|
|
border-bottom-right-radius-006 |
= |
|
Borders. Border-bottom-right-radius using two value: 40px 30%
- To verify border-bottom-right-radius property set to two value with different unit, works as expected
|
|
border-bottom-right-radius-007 |
= |
|
Borders. Border-bottom-right-radius using two value: 20% 25px
- To verify border-bottom-right-radius property set to two value with different unit, works as expected
|
|
border-bottom-right-radius-008 |
|
|
Borders. Border-bottom-right-radius using two values: 4em 30%
- To verify border-bottom-right-radius property set to two values with different units, works as expected
|
|
border-bottom-right-radius-009 |
= |
|
Borders. Border-bottom-right-radius using "inherit"
- To verify if inherit feature works, when assigned to "borderbottomrightradius" property
|
|
border-bottom-right-radius-010 |
= |
|
Borders. Border-bottom-right-radius using one length value: 25px 0
- To verify border-bottom-right-radius property set with one length value, works as expected
|
|
border-bottom-right-radius-011 |
= |
|
Borders. Border-bottom-right-radius using one length value: 0 3em
- To verify border-bottom-right-radius property set with one length value, works as expected
|
|
border-bottom-right-radius-012 |
|
|
Borders. Border-bottom-right-radius using two length values: 0.5in 10mm
- To verify border-bottom-right-radius property set with two values (with different units), works as expected
|
|
border-bottom-right-radius-013 |
|
|
Borders. Border-bottom-right-radius using two length values: 40pt 2pc
- To verify border-bottom-right-radius property set with two values (with different units), works fine
|
|
border-bottom-right-radius-014 |
= |
|
Borders. Border-bottom-right-radius using two length values: 50px -25px
- To verify if one length value is negative in border-bottom-right-radius, then the corner is not rounded.
|
|
border-radius-001 |
= |
|
Borders. border
- To verify when border-radius property, when set to zero, works as expected.
|
|
border-radius-002 |
= |
|
Borders. border
- To verify border-radius property set with one length value, works as expected
|
|
border-radius-003 |
= |
|
Borders. border
- To verify border-radius property set with one length value along with a zero, works as expected
|
|
border-radius-004 |
= |
|
Borders. border
- To verify border-radius property set with value using slash, works as expected
|
|
border-radius-005 |
= |
|
Borders. border
- To verify border-radius property set with value using slash, works as expected
|
|
border-radius-006 |
= |
|
Borders. border
- To verify border-radius property set with values using slash, works as expected
|
|
border-radius-007 |
= |
|
Borders. border
- To verify border-radius property set with values (in different units) using slash, works as expected
|
|
border-radius-008 |
= |
|
Borders. border
- To verify border-radius property set with excess values, works as expected
|
|
border-radius-009 |
= |
|
Borders. border
- To verify inherit feature works, when it is assigned to border-radius
|
|
border-radius-010 |
= |
|
Borders. border
- To verify inherit feature works, when it is assigned to border-radius
|
|
border-radius-011 |
= |
|
Borders. border
- If border-radius is zero, all corners are square.
|
|
border-radius-horizontal-value-is-zero |
= |
|
border-radius property if horizontal value is zero
- If the horizontal radius length is zero, the corner is square, not rounded.
|
|
border-radius-shorthand-002 |
= |
|
Borders Radius Shorthand.
- The shorthand border radius property can be used to specify all four eliptical corners of a box.
|
|
border-top-left-radius-001 |
= |
|
Borders. Border-top-left-radius using 0 value
- To verify if the border-top-left-radius property, when set with 0, works as expected.
|
|
border-top-left-radius-002 |
|
|
Borders. Border-top-left-radius using one length value: 25px
- To verify border-top-left-radius property set to one length value, works fine
|
|
border-top-left-radius-003 |
= |
|
Borders. Border-top-left-radius using two length values: 40px 20px
- To verify border-top-left-radius property set to two length values, works fine
|
|
border-top-left-radius-004 |
= |
|
Borders. Border-top-left-radius using one percentage value: 20%
- To verify border-top-left-radius property set to one percentage value, works fine
|
|
border-top-left-radius-005 |
= |
|
Borders. Border-top-left-radius using two percentage values: 20% 30%
- To verify border-top-left-radius property set to two percentage values, works fine
|
|
border-top-left-radius-006 |
= |
|
Borders. Border-top-left-radius using two values: 40px 30%
- To verify border-top-left-radius property set to two values with different units, works fine
|
|
border-top-left-radius-007 |
= |
|
Borders. Border-top-left-radius using two values: 20% 25px
- To verify border-top-left-radius property set to two values with different units, works fine
|
|
border-top-left-radius-008 |
|
|
Borders. Border-top-left-radius using two values: 4em 30%
- To verify border-top-left-radius property set to two values with different units, works fine
|
|
border-top-left-radius-009 |
= |
|
Borders. Border-top-left-radius using "inherit"
- To verify inherit feature works, when it is assigned to border-top-left-radius.
|
|
border-top-left-radius-010 |
= |
|
Borders. Border-top-left-radius using one length value: 25px 0
- To verify if either length is 0, then the corner is not rounded.
|
|
border-top-left-radius-011 |
= |
|
Borders. Border-top-left-radius using one length value: 0 3em
- To verify if either length is 0, then the corner is not rounded.
|
|
border-top-left-radius-012 |
|
|
Borders. Border-top-left-radius using two length values: 0.5in 10mm
- To verify border-top-left-radius property set to two length values (with different units), works fine
|
|
border-top-left-radius-013 |
|
|
Borders. Border-top-left-radius using two length values: 40pt 2pc
- To verify border-top-left-radius property set to two length values (with different units), works fine
|
|
border-top-left-radius-014 |
= |
|
Borders. Border-top-left-radius using two length values: 50px -25px
- To verify if one length value is negative in border-top-left-radius, then the corner is not rounded.
|
|
border-top-right-radius-001 |
= |
|
Borders. Border-top-right-radius using 0 value
- To verify if the border-top-right-radius property, when set with 0, works as expected
|
|
border-top-right-radius-002 |
|
|
Borders. Border-top-right-radius using one length value: 25px
- To verify border-top-right-radius property set to one length value, works fine
|
|
border-top-right-radius-003 |
= |
|
Borders. Border-top-right-radius using two length values: 40px 20px
- To verify border-top-right-radius property set to two length values, works fine
|
|
border-top-right-radius-004 |
= |
|
Borders. Border-top-right-radius using one percentage value: 20%
- To verify border-top-right-radius property set to one percentage value, works fine
|
|
border-top-right-radius-005 |
= |
|
Borders. Border-top-right-radius using two percentage values: 20% 30%
- To verify border-top-right-radius property set to two percentage values, works fine
|
|
border-top-right-radius-006 |
= |
|
Borders. Border-top-right-radius using two values: 40px 30%
- To verify border-top-right-radius property set to two values with different units, works fine
|
|
border-top-right-radius-007 |
= |
|
Borders. Border-top-right-radius using two values: 20% 25px
- To verify border-top-right-radius property set to two values with different units, works fine
|
|
border-top-right-radius-008 |
|
|
Borders. Border-top-right-radius using two values: 4em 30%
- To verify border-top-right-radius property set to two values with different units, works fine
|
|
border-top-right-radius-009 |
= |
|
Borders. Border-top-right-radius using "inherit"
- To verify inherit feature works, when it is assigned to border-top-right-radius.
|
|
border-top-right-radius-010 |
= |
|
Borders. Border-top-right-radius using one length value: 25px 0
- To verify if either length is 0, then the corner is not rounded.
|
|
border-top-right-radius-011 |
= |
|
Borders. Border-top-right-radius using one length value: 0 3em
- To verify if either length is 0, then the corner is not rounded.
|
|
border-top-right-radius-012 |
|
|
Borders. Border-top-right-radius using two length values: 0.5in 10mm
- To verify border-top-right-radius property sets to two length values (with different units), works fine
|
|
border-top-right-radius-013 |
|
|
Borders. Border-top-right-radius using two length values: 40pt 2pc
- To verify border-top-right-radius property sets to two length values (with different units), works fine
|
|
border-top-right-radius-014 |
= |
|
Borders. Border-top-right-radius using two length values: 50px -25px
- To verify if one length value is negative for border-top-right-radius, then the element is not rounded.
|
|
css-border-radius-001 |
= |
|
CSS border-radius Test
|
|
css-border-radius-002 |
= |
|
CSS border-radius Test
- if there is more then one graph and one color
|
|
css-box-shadow-001 |
= |
|
CSS box-shadow Test
|
|
border-radius-applies-to-001 |
|
|
'Border-radius' applied to element with 'display' set to inline
- When 'border-radius' is applied to an element with 'displaye: inline' it produces rounded corners.
|
|
border-radius-applies-to-002 |
|
|
'Border-radius' applied to element with a display of 'block'.
- When 'border-radius' is applied to an element with 'displaye: block' it produces rounded corners.
|
|
border-radius-applies-to-003 |
|
|
'Border-radius' applied to element with 'display' set to list-item.
- When 'border-radius' is applied to an element with 'displaye: list-item' it produces rounded corners.
|
|
border-radius-applies-to-004 |
|
|
'Border-radius' applied to element with 'display' set to run-in.
- When 'border-radius' is applied to an element with 'displaye: run-in' it produces rounded corners.
|
|
border-radius-applies-to-005 |
|
|
'Border-radius' applied to element with 'display' set to inline-block.
- When 'border-radius' is applied to an element with 'displaye: inline-block' it produces rounded corners.
|
|
border-radius-applies-to-006 |
|
|
'Border-radius' applied to element with 'display' set to 'table'.
- When 'border-radius' is applied to an element with 'displaye: table' it produces rounded corners.
|
|
border-radius-applies-to-007 |
|
|
'Border-radius' applied to element with 'display' set to 'table-caption'.
- When 'border-radius' is applied to an element with 'displaye: table-caption' it produces rounded corners.
|
|
border-radius-applies-to-008 |
|
|
'Border-radius' applied to element with 'display' set to 'table-cell'.
- When 'border-radius' is applied to an element with 'displaye: table-cell' it produces rounded corners.
|
|
border-radius-applies-to-009 |
|
|
'Border-radius' should be ignored when in element with 'display' set to 'table-row' when 'border-collapse: collapse'.
- 'Border-radius' should be ignored when in element with 'display' set to 'table-row' when 'border-collapse: collapse'.
|
|
border-radius-applies-to-010 |
|
|
'Border-radius' applied to element with a display of 'none'.
- When 'border-radius' property is applied to elements with a display of 'none' then it continues to not have a layout.
|
|
border-radius-applies-to-011 |
|
|
'Border-radius' applied to element with a display of 'inline-table'.
- When 'border-radius' is applied to an element with 'displaye: inline-table' it produces rounded corners.
|
|
border-radius-applies-to-012 |
|
|
'Border-radius' should be ignored in element with 'display' set to 'table-column' when 'border-collapse: collapse'.
- 'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-column' when 'border-collapse: collapse'.
|
|
border-radius-applies-to-013 |
|
|
'Border-radius' should be ignored in element with 'display' set to 'table-row-group' when 'border-collapse: collapse'.
- 'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-row-group' when 'border-collapse: collapse'.
|
|
border-radius-applies-to-014 |
|
|
'Border-radius' should be ignored in element with 'display' set to 'table-header-group' when 'border-collapse: collapse'.
- 'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-header-group' when 'border-collapse: collapse'.
|
|
border-radius-applies-to-015 |
|
|
'Border-radius' should be ignored in element with 'display' set to 'table-footer-group' when 'border-collapse: collapse'.
- 'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-footer-group' when 'border-collapse: collapse'.
|
|
border-radius-applies-to-016 |
|
|
'Border-radius' should be ignored in element with 'display' set to 'table-column-group' when 'border-collapse: collapse'.
- 'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-column-group' when 'border-collapse: collapse'.
|
|
border-radius-applies-to-017 |
|
|
'Border-radius' applied to element with 'display' set to 'inherit'.
- When 'border-radius' is applied to an element with 'displaye: inherit' it produces rounded corners.
|
|
border-radius-clip-001 |
|
|
'Overflow' clips to the curve of the rounded corner.
- 'Overflow' clips to the curve of the rounded corner.
|
|
border-radius-clip-002 |
|
|
Background is clipped to the curve of the content-box when 'background-clip: content-box'
- Background is clipped to the curve of the content-box when 'background-clip: content-box'
|
|
border-radius-content-edge-001 |
|
|
'Border-radius' set to 'img'
- The content of replaced element 'img' is trimmed to the content edge curve of a rounded corner.
|
|
border-radius-different-width-001 |
|
|
Adjoining borders with different thicknesses show a smooth transition between the thicker and the thinner borders.
- When 'border-radius' is applied to two adjoining sides with different thicknesses the border shows a smooth transition between the thicker and the thinner sides.
|
|
border-radius-initial-value-001 |
|
|
Initial value of 'border-radius' is 0
- Initial value of 'border-radius' is 0.
|
|
border-radius-not-inherited-001 |
|
|
'Border-radius' is not inherited by default
- 'Border-radius' is not inherited by default.
|
|
border-radius-shorthand-001 |
|
|
'Border-radius' shorthand is used to set all four 'border-[*]-radius' properties.
- 'Border-radius' shorthand sets all four 'border-[*]-radius' properties.
|
|
border-radius-sum-of-radii-001 |
|
|
Different variations on the sum of border-radius for adjacent corners
- If the sum of any two adjacent corner radii exceeds the size of the border box, all the corner radii are reduced proportionally until none of them overlap.
|
|
border-radius-sum-of-radii-002 |
|
|
Different variations on the value of 'f'
- When the value of 'f' is less than 1, then all corner radii are reduced by multiplying them with 'f'.
|
|
border-radius-with-three-values-001 |
|
|
'Border-radius' property with three values
- If bottom-left radius is omitted in the 'border-radius' property then the bottom-left radius is the same as the top-right radius.
|
|
border-radius-with-two-values-001 |
|
|
'Border-radius' property with two values
- If bottom-right radius is omitted in the 'border-radius' property then the bottom-right radius is the same as the top-left radius.
|
|
border-top-left-radius-values-004 |
|
|
Percentage for the horizontal radius of 'border-top-left-radius' refers to the width of the border box.
- Percentage for the horizontal radius of 'border-top-left-radius' refers to the width of the border box.
|
|
border-top-right-radius-values-004 |
|
|
Percentage for the vertical radius of 'border-top-right-radius' refers to the height of the border box.
- Percentage for the vertical radius of 'border-top-right-radius' refers to the height of the border box.
|