Implement calc expressions for more value types

This commit is contained in:
David Zbarsky 2015-08-20 12:31:19 -04:00
parent 35b452660b
commit 00980ea595
9 changed files with 383 additions and 312 deletions

View file

@ -6,123 +6,15 @@
[calc(0px + 0pt + 0pc + 0in + 0cm + 0mm + 0rem + 0em + 0ex + 0% + 0vw + 0vh + 0vmin + 0vmax)]
expected: FAIL
[calc for border-width]
expected: FAIL
[calc for border-top-width]
expected: FAIL
[calc for border-left-width]
expected: FAIL
[calc for border-right-width]
expected: FAIL
[calc for border-bottom-width]
expected: FAIL
[calc for outline-width]
expected: FAIL
[calc for outline-offset]
expected: FAIL
[calc for letter-spacing]
expected: FAIL
[calc for word-spacing]
expected: FAIL
[calc for border-spacing]
expected: FAIL
[calc for column-width]
expected: FAIL
[calc for column-gap]
expected: FAIL
[calc for perspective]
expected: FAIL
[calc for border-top-left-radius]
expected: FAIL
[calc for border-bottom-left-radius]
expected: FAIL
[calc for border-top-right-radius]
expected: FAIL
[calc for border-bottom-right-radius]
expected: FAIL
[calc for top]
expected: FAIL
[calc for left]
expected: FAIL
[calc for bottom]
expected: FAIL
[calc for right]
expected: FAIL
[calc for width]
expected: FAIL
[calc for height]
expected: FAIL
[calc for min-width]
expected: FAIL
[calc for min-height]
expected: FAIL
[calc for max-width]
expected: FAIL
[calc for max-height]
expected: FAIL
[calc for line-height]
expected: FAIL
[calc for vertical-align]
expected: FAIL
[calc for background-position]
expected: FAIL
[calc for background-size]
expected: FAIL
[calc for font-size]
expected: FAIL
[calc for text-indent]
expected: FAIL
[calc for transform-origin]
expected: FAIL
[calc for perspective-origin]
expected: FAIL
[calc for transition-delay]
expected: FAIL
[calc for z-index]
expected: FAIL
[calc for column-count]
expected: FAIL
[calc for opacity]
expected: FAIL
[calc for transition-duration]
[calc(0ch + 0px + 0pt + 0pc + 0in + 0cm + 0mm + 0rem + 0em + 0ex + 0% + 0vw + 0vh + 0vmin + 0vmax)]
expected: FAIL

View file

@ -39,8 +39,8 @@ var widthTests = [
['calc(1px + 1pt + 1pc + 1in + 1cm + 1mm)', '155.88333333333333px', '155.88333333333333px'],
// Alphabetical order
['calc(0px + 0pt + 0pc + 0in + 0cm + 0mm + 0rem + 0em + 0ex + 0% + 0vw + 0vh + 0vmin + 0vmax)',
'calc(0em + 0ex + 0px + 0rem + 0vh + 0vmax + 0vmin + 0vw + 0%)',
['calc(0ch + 0px + 0pt + 0pc + 0in + 0cm + 0mm + 0rem + 0em + 0ex + 0% + 0vw + 0vh + 0vmin + 0vmax)',
'calc(0ch + 0em + 0ex + 0px + 0rem + 0vh + 0vmax + 0vmin + 0vw + 0%)',
'0px'],
// Simplification
@ -59,7 +59,6 @@ widthTests.forEach(function(item) {
});
var lengthProperties = [
'border-width',
'border-top-width',
'border-left-width',
'border-right-width',
@ -68,7 +67,6 @@ var lengthProperties = [
'outline-offset',
'letter-spacing',
'word-spacing',
'border-spacing',
'column-width',
'column-gap',
'perspective',
@ -78,15 +76,10 @@ lengthProperties.forEach(function(prop) {
test(function() {
div.style.setProperty(prop, 'calc(1px)');
assert_equals(div.style.getPropertyValue(prop), '1px');
assert_equals(window.getComputedStyle(div).getPropertyValue(prop), '1px');
}, 'calc for ' + prop);
});
var lengthOrPercentageProperties = [
'border-top-left-radius',
'border-bottom-left-radius',
'border-top-right-radius',
'border-bottom-right-radius',
'top',
'left',
'bottom',
@ -99,31 +92,26 @@ var lengthOrPercentageProperties = [
'max-height',
'line-height',
'vertical-align',
'background-position',
'background-size',
'font-size',
'text-indent',
'transform-origin',
'perspective-origin',
];
lengthOrPercentageProperties.forEach(function(prop) {
test(function() {
div.style.setProperty(prop, 'calc(1px + 0%)');
assert_equals(div.style.getPropertyValue(prop), 'calc(1px + 0%)');
assert_equals(window.getComputedStyle(div).getPropertyValue(prop), '1px');
}, 'calc for ' + prop);
});
var timeProperties = [
'transition-delay',
'transition-duration',
];
timeProperties.forEach(function(prop) {
test(function() {
div.style.setProperty(prop, 'calc(1s)');
assert_equals(div.style.getPropertyValue(prop), '1s');
assert_equals(window.getComputedStyle(div).getPropertyValue(prop), '1s');
}, 'calc for ' + prop);
});
@ -131,22 +119,40 @@ var numberProperties = [
'z-index',
'column-count',
'opacity',
'transition-duration',
];
numberProperties.forEach(function(prop) {
test(function() {
div.style.setProperty(prop, 'calc(1)');
assert_equals(div.style.getPropertyValue(prop), '1');
assert_equals(window.getComputedStyle(div).getPropertyValue(prop), '1');
}, 'calc for ' + prop);
});
var otherProperties = [
['border-width', 'calc(1px)', '1px 1px 1px 1px'],
['border-spacing', 'calc(1px)', '1px 1px'],
['transform-origin', 'calc(1px + 0%)', 'calc(1px + 0%) 50% 0px'],
['perspective-origin', 'calc(1px + 0%)', 'calc(1px + 0%) 50%'],
['background-size', 'calc(1px + 0%)', 'calc(1px + 0%) auto'],
['background-position', 'calc(1px + 0%) calc(2px + 0%)', 'calc(1px + 0%) calc(2px + 0%)'],
['border-top-left-radius', 'calc(1px + 0%)', 'calc(1px + 0%) calc(1px + 0%)'],
['border-bottom-left-radius', 'calc(1px + 0%)', 'calc(1px + 0%) calc(1px + 0%)'],
['border-top-right-radius', 'calc(1px + 0%)', 'calc(1px + 0%) calc(1px + 0%)'],
['border-bottom-right-radius', 'calc(1px + 0%)', 'calc(1px + 0%) calc(1px + 0%)'],
];
otherProperties.forEach(function(testcase) {
test(function() {
div.style.setProperty(testcase[0], testcase[1]);
assert_equals(div.style.getPropertyValue(testcase[0]), testcase[2]);
}, 'calc for ' + testcase[0]);
});
/* TODO: test these:
counter-increment, counter-reset,
color, box-shadow, clip, text-shadow, transform
transition-timing-function
angles
*/
</script>
</head>