Commit 5d974022 authored by Eric Willigers's avatar Eric Willigers Committed by Commit Bot

CSS: Serialize using 1% - 2px instead of 1% + -2px

We now use subtraction when the length in a computed length-percentage
calc is negative.

Discussed in https://github.com/w3c/csswg-drafts/issues/3335

Change-Id: I24822de431059a97cf8f9203950b6d84de72180e
Bug: 904805
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1777843Reviewed-by: default avatarXiaocheng Hu <xiaochengh@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#692249}
parent 3921da77
......@@ -1103,8 +1103,13 @@ CSSMathExpressionNode* CSSMathExpressionNode::Create(
// static
CSSMathExpressionNode* CSSMathExpressionNode::Create(PixelsAndPercent value) {
double pixels = value.pixels;
double percent = value.percent;
double pixels = value.pixels;
CSSMathOperator op = CSSMathOperator::kAdd;
if (pixels < 0) {
pixels = -pixels;
op = CSSMathOperator::kSubtract;
}
return CSSMathExpressionBinaryOperation::Create(
CSSMathExpressionNumericLiteral::Create(
CSSNumericLiteralValue::Create(
......@@ -1114,7 +1119,7 @@ CSSMathExpressionNode* CSSMathExpressionNode::Create(PixelsAndPercent value) {
CSSNumericLiteralValue::Create(pixels,
CSSPrimitiveValue::UnitType::kPixels),
pixels == trunc(pixels)),
CSSMathOperator::kAdd);
op);
}
// static
......
......@@ -141,25 +141,25 @@ FAIL CSS Transitions: property <grid-template-columns> from [10px 20px 30px] to
FAIL CSS Transitions: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (0.4) should be [calc(8% + 6px) calc(12% + 12px) 34px] assert_equals: expected "calc ( 8 % + 6px ) calc ( 12 % + 12px ) 34px " but got "20 % 30 % 40px "
FAIL CSS Transitions: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (0.6) should be [calc(12% + 4px) calc(18% + 8px) 36px] assert_equals: expected "calc ( 12 % + 4px ) calc ( 18 % + 8px ) 36px " but got "20 % 30 % 40px "
PASS CSS Transitions: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (1) should be [20% 30% 40px]
FAIL CSS Transitions: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (2) should be [calc(40% + -10px) calc(60% + -20px) 50px] assert_equals: expected "calc ( 40 % + - 10px ) calc ( 60 % + - 20px ) 50px " but got "20 % 30 % 40px "
FAIL CSS Transitions: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (2) should be [calc(40% - 10px) calc(60% - 20px) 50px] assert_equals: expected "calc ( 40 % - 10px ) calc ( 60 % - 20px ) 50px " but got "20 % 30 % 40px "
FAIL CSS Transitions with transition: all: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (-1) should be [calc(-20% + 20px) calc(-30% + 40px) 20px] assert_equals: expected "calc ( - 20 % + 20px ) calc ( - 30 % + 40px ) 20px " but got "20 % 30 % 40px "
FAIL CSS Transitions with transition: all: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (0) should be [10px 20px 30px] assert_equals: expected "10px 20px 30px " but got "20 % 30 % 40px "
FAIL CSS Transitions with transition: all: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (0.4) should be [calc(8% + 6px) calc(12% + 12px) 34px] assert_equals: expected "calc ( 8 % + 6px ) calc ( 12 % + 12px ) 34px " but got "20 % 30 % 40px "
FAIL CSS Transitions with transition: all: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (0.6) should be [calc(12% + 4px) calc(18% + 8px) 36px] assert_equals: expected "calc ( 12 % + 4px ) calc ( 18 % + 8px ) 36px " but got "20 % 30 % 40px "
PASS CSS Transitions with transition: all: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (1) should be [20% 30% 40px]
FAIL CSS Transitions with transition: all: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (2) should be [calc(40% + -10px) calc(60% + -20px) 50px] assert_equals: expected "calc ( 40 % + - 10px ) calc ( 60 % + - 20px ) 50px " but got "20 % 30 % 40px "
FAIL CSS Transitions with transition: all: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (2) should be [calc(40% - 10px) calc(60% - 20px) 50px] assert_equals: expected "calc ( 40 % - 10px ) calc ( 60 % - 20px ) 50px " but got "20 % 30 % 40px "
FAIL CSS Animations: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (-1) should be [calc(-20% + 20px) calc(-30% + 40px) 20px] assert_equals: expected "calc ( - 20 % + 20px ) calc ( - 30 % + 40px ) 20px " but got "10px 20px 30px "
PASS CSS Animations: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (0) should be [10px 20px 30px]
FAIL CSS Animations: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (0.4) should be [calc(8% + 6px) calc(12% + 12px) 34px] assert_equals: expected "calc ( 8 % + 6px ) calc ( 12 % + 12px ) 34px " but got "10px 20px 30px "
FAIL CSS Animations: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (0.6) should be [calc(12% + 4px) calc(18% + 8px) 36px] assert_equals: expected "calc ( 12 % + 4px ) calc ( 18 % + 8px ) 36px " but got "20 % 30 % 40px "
PASS CSS Animations: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (1) should be [20% 30% 40px]
FAIL CSS Animations: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (2) should be [calc(40% + -10px) calc(60% + -20px) 50px] assert_equals: expected "calc ( 40 % + - 10px ) calc ( 60 % + - 20px ) 50px " but got "20 % 30 % 40px "
FAIL CSS Animations: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (2) should be [calc(40% - 10px) calc(60% - 20px) 50px] assert_equals: expected "calc ( 40 % - 10px ) calc ( 60 % - 20px ) 50px " but got "20 % 30 % 40px "
FAIL Web Animations: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (-1) should be [calc(-20% + 20px) calc(-30% + 40px) 20px] assert_equals: expected "calc ( - 20 % + 20px ) calc ( - 30 % + 40px ) 20px " but got "10px 20px 30px "
PASS Web Animations: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (0) should be [10px 20px 30px]
FAIL Web Animations: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (0.4) should be [calc(8% + 6px) calc(12% + 12px) 34px] assert_equals: expected "calc ( 8 % + 6px ) calc ( 12 % + 12px ) 34px " but got "10px 20px 30px "
FAIL Web Animations: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (0.6) should be [calc(12% + 4px) calc(18% + 8px) 36px] assert_equals: expected "calc ( 12 % + 4px ) calc ( 18 % + 8px ) 36px " but got "20 % 30 % 40px "
PASS Web Animations: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (1) should be [20% 30% 40px]
FAIL Web Animations: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (2) should be [calc(40% + -10px) calc(60% + -20px) 50px] assert_equals: expected "calc ( 40 % + - 10px ) calc ( 60 % + - 20px ) 50px " but got "20 % 30 % 40px "
FAIL Web Animations: property <grid-template-columns> from [10px 20px 30px] to [20% 30% 40px] at (2) should be [calc(40% - 10px) calc(60% - 20px) 50px] assert_equals: expected "calc ( 40 % - 10px ) calc ( 60 % - 20px ) 50px " but got "20 % 30 % 40px "
FAIL CSS Transitions: property <grid-template-columns> from [1fr 1fr 1fr] to [2fr auto 2fr] at (-1) should be [0fr 1fr 0fr] assert_equals: expected "0fr 1fr 0fr " but got "2fr auto 2fr "
FAIL CSS Transitions: property <grid-template-columns> from [1fr 1fr 1fr] to [2fr auto 2fr] at (0) should be [1fr 1fr 1fr] assert_equals: expected "1fr 1fr 1fr " but got "2fr auto 2fr "
FAIL CSS Transitions: property <grid-template-columns> from [1fr 1fr 1fr] to [2fr auto 2fr] at (0.4) should be [1.4fr 1fr 1.4fr] assert_equals: expected "1.4fr 1fr 1.4fr " but got "2fr auto 2fr "
......
......@@ -141,25 +141,25 @@ FAIL CSS Transitions: property <grid-template-rows> from [10px 20px 30px] to [20
FAIL CSS Transitions: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (0.4) should be [calc(8% + 6px) calc(12% + 12px) 34px] assert_equals: expected "calc ( 8 % + 6px ) calc ( 12 % + 12px ) 34px " but got "20 % 30 % 40px "
FAIL CSS Transitions: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (0.6) should be [calc(12% + 4px) calc(18% + 8px) 36px] assert_equals: expected "calc ( 12 % + 4px ) calc ( 18 % + 8px ) 36px " but got "20 % 30 % 40px "
PASS CSS Transitions: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (1) should be [20% 30% 40px]
FAIL CSS Transitions: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (2) should be [calc(40% + -10px) calc(60% + -20px) 50px] assert_equals: expected "calc ( 40 % + - 10px ) calc ( 60 % + - 20px ) 50px " but got "20 % 30 % 40px "
FAIL CSS Transitions: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (2) should be [calc(40% - 10px) calc(60% - 20px) 50px] assert_equals: expected "calc ( 40 % - 10px ) calc ( 60 % - 20px ) 50px " but got "20 % 30 % 40px "
FAIL CSS Transitions with transition: all: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (-1) should be [calc(-20% + 20px) calc(-30% + 40px) 20px] assert_equals: expected "calc ( - 20 % + 20px ) calc ( - 30 % + 40px ) 20px " but got "20 % 30 % 40px "
FAIL CSS Transitions with transition: all: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (0) should be [10px 20px 30px] assert_equals: expected "10px 20px 30px " but got "20 % 30 % 40px "
FAIL CSS Transitions with transition: all: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (0.4) should be [calc(8% + 6px) calc(12% + 12px) 34px] assert_equals: expected "calc ( 8 % + 6px ) calc ( 12 % + 12px ) 34px " but got "20 % 30 % 40px "
FAIL CSS Transitions with transition: all: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (0.6) should be [calc(12% + 4px) calc(18% + 8px) 36px] assert_equals: expected "calc ( 12 % + 4px ) calc ( 18 % + 8px ) 36px " but got "20 % 30 % 40px "
PASS CSS Transitions with transition: all: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (1) should be [20% 30% 40px]
FAIL CSS Transitions with transition: all: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (2) should be [calc(40% + -10px) calc(60% + -20px) 50px] assert_equals: expected "calc ( 40 % + - 10px ) calc ( 60 % + - 20px ) 50px " but got "20 % 30 % 40px "
FAIL CSS Transitions with transition: all: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (2) should be [calc(40% - 10px) calc(60% - 20px) 50px] assert_equals: expected "calc ( 40 % - 10px ) calc ( 60 % - 20px ) 50px " but got "20 % 30 % 40px "
FAIL CSS Animations: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (-1) should be [calc(-20% + 20px) calc(-30% + 40px) 20px] assert_equals: expected "calc ( - 20 % + 20px ) calc ( - 30 % + 40px ) 20px " but got "10px 20px 30px "
PASS CSS Animations: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (0) should be [10px 20px 30px]
FAIL CSS Animations: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (0.4) should be [calc(8% + 6px) calc(12% + 12px) 34px] assert_equals: expected "calc ( 8 % + 6px ) calc ( 12 % + 12px ) 34px " but got "10px 20px 30px "
FAIL CSS Animations: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (0.6) should be [calc(12% + 4px) calc(18% + 8px) 36px] assert_equals: expected "calc ( 12 % + 4px ) calc ( 18 % + 8px ) 36px " but got "20 % 30 % 40px "
PASS CSS Animations: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (1) should be [20% 30% 40px]
FAIL CSS Animations: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (2) should be [calc(40% + -10px) calc(60% + -20px) 50px] assert_equals: expected "calc ( 40 % + - 10px ) calc ( 60 % + - 20px ) 50px " but got "20 % 30 % 40px "
FAIL CSS Animations: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (2) should be [calc(40% - 10px) calc(60% - 20px) 50px] assert_equals: expected "calc ( 40 % - 10px ) calc ( 60 % - 20px ) 50px " but got "20 % 30 % 40px "
FAIL Web Animations: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (-1) should be [calc(-20% + 20px) calc(-30% + 40px) 20px] assert_equals: expected "calc ( - 20 % + 20px ) calc ( - 30 % + 40px ) 20px " but got "10px 20px 30px "
PASS Web Animations: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (0) should be [10px 20px 30px]
FAIL Web Animations: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (0.4) should be [calc(8% + 6px) calc(12% + 12px) 34px] assert_equals: expected "calc ( 8 % + 6px ) calc ( 12 % + 12px ) 34px " but got "10px 20px 30px "
FAIL Web Animations: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (0.6) should be [calc(12% + 4px) calc(18% + 8px) 36px] assert_equals: expected "calc ( 12 % + 4px ) calc ( 18 % + 8px ) 36px " but got "20 % 30 % 40px "
PASS Web Animations: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (1) should be [20% 30% 40px]
FAIL Web Animations: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (2) should be [calc(40% + -10px) calc(60% + -20px) 50px] assert_equals: expected "calc ( 40 % + - 10px ) calc ( 60 % + - 20px ) 50px " but got "20 % 30 % 40px "
FAIL Web Animations: property <grid-template-rows> from [10px 20px 30px] to [20% 30% 40px] at (2) should be [calc(40% - 10px) calc(60% - 20px) 50px] assert_equals: expected "calc ( 40 % - 10px ) calc ( 60 % - 20px ) 50px " but got "20 % 30 % 40px "
FAIL CSS Transitions: property <grid-template-rows> from [1fr 1fr 1fr] to [2fr auto 2fr] at (-1) should be [0fr 1fr 0fr] assert_equals: expected "0fr 1fr 0fr " but got "2fr auto 2fr "
FAIL CSS Transitions: property <grid-template-rows> from [1fr 1fr 1fr] to [2fr auto 2fr] at (0) should be [1fr 1fr 1fr] assert_equals: expected "1fr 1fr 1fr " but got "2fr auto 2fr "
FAIL CSS Transitions: property <grid-template-rows> from [1fr 1fr 1fr] to [2fr auto 2fr] at (0.4) should be [1.4fr 1fr 1.4fr] assert_equals: expected "1.4fr 1fr 1.4fr " but got "2fr auto 2fr "
......
......@@ -26,6 +26,7 @@ test_computed_value("object-position", "right 40%", "100% 40%");
test_computed_value("object-position", "center top", "50% 0%");
test_computed_value("object-position", "center", "50% 50%");
test_computed_value("object-position", "center center", "50% 50%");
test_computed_value("object-position", "right 20px bottom 10px", "calc(100% - 20px) calc(100% - 10px)");
</script>
</body>
</html>
This is a testharness.js-based test.
PASS calc(10in) - inline style
PASS calc(10in + 20px) - inline style
PASS calc(30%) - inline style
PASS calc(100%/4) - inline style
PASS calc(25%*3) - inline style
PASS calc(25%*3 - 10in) - inline style
PASS calc((12.5%*6 + 10in) / 4) - inline style
PASS calc(10in) - computed style
PASS calc(10in + 20px) - computed style
PASS calc(30%) - computed style
PASS calc(100%/4) - computed style
PASS calc(25%*3) - computed style
FAIL calc(25%*3 - 10in) - computed style assert_in_array: value "calc(75% + -960px)" not in array ["calc(75% - 960px)", "calc(-960px + 75%)"]
PASS calc((12.5%*6 + 10in) / 4) - computed style
Harness: the test ran to completion.
This is a testharness.js-based test.
PASS circle(calc(10in)) - inline style
PASS circle(calc(10in + 20px)) - inline style
PASS circle(calc(30%)) - inline style
PASS circle(calc(100%/4)) - inline style
PASS circle(calc(25%*3)) - inline style
PASS circle(calc(25%*3 - 10in)) - inline style
PASS circle(calc((12.5%*6 + 10in) / 4)) - inline style
PASS circle(calc(10in)) - computed style
PASS circle(calc(10in + 20px)) - computed style
PASS circle(calc(30%)) - computed style
PASS circle(calc(100%/4)) - computed style
PASS circle(calc(25%*3)) - computed style
FAIL circle(calc(25%*3 - 10in)) - computed style assert_in_array: value "circle(calc(75% + -960px) at 50% 50%)" not in array ["circle(calc(75% - 960px) at 50% 50%)", "circle(calc(-960px + 75%) at 50% 50%)"]
PASS circle(calc((12.5%*6 + 10in) / 4)) - computed style
Harness: the test ran to completion.
This is a testharness.js-based test.
PASS circle(at calc(10in)) - inline style
PASS circle(at calc(10in + 20px)) - inline style
PASS circle(at calc(30%)) - inline style
PASS circle(at calc(100%/4)) - inline style
PASS circle(at calc(25%*3)) - inline style
PASS circle(at calc(25%*3 - 10in)) - inline style
PASS circle(at calc((12.5%*6 + 10in) / 4)) - inline style
PASS circle(at calc(10in)) - computed style
PASS circle(at calc(10in + 20px)) - computed style
PASS circle(at calc(30%)) - computed style
PASS circle(at calc(100%/4)) - computed style
PASS circle(at calc(25%*3)) - computed style
FAIL circle(at calc(25%*3 - 10in)) - computed style assert_in_array: value "circle(at calc(75% + -960px) 50%)" not in array ["circle(at calc(75% - 960px) 50%)", "circle(at calc(-960px + 75%) 50%)"]
PASS circle(at calc((12.5%*6 + 10in) / 4)) - computed style
Harness: the test ran to completion.
This is a testharness.js-based test.
PASS ellipse(farthest-side calc(10in)) - inline style
PASS ellipse(farthest-side calc(10in + 20px)) - inline style
PASS ellipse(farthest-side calc(30%)) - inline style
PASS ellipse(farthest-side calc(100%/4)) - inline style
PASS ellipse(farthest-side calc(25%*3)) - inline style
PASS ellipse(farthest-side calc(25%*3 - 10in)) - inline style
PASS ellipse(farthest-side calc((12.5%*6 + 10in) / 4)) - inline style
PASS ellipse(calc(10in) calc(10in)) - inline style
PASS ellipse(calc(10in + 20px) calc(10in + 20px)) - inline style
PASS ellipse(calc(30%) calc(30%)) - inline style
PASS ellipse(calc(100%/4) calc(100%/4)) - inline style
PASS ellipse(calc(25%*3) calc(25%*3)) - inline style
PASS ellipse(calc(25%*3 - 10in) calc(25%*3 - 10in)) - inline style
PASS ellipse(calc((12.5%*6 + 10in) / 4) calc((12.5%*6 + 10in) / 4)) - inline style
PASS ellipse(farthest-side calc(10in)) - computed style
PASS ellipse(farthest-side calc(10in + 20px)) - computed style
PASS ellipse(farthest-side calc(30%)) - computed style
PASS ellipse(farthest-side calc(100%/4)) - computed style
PASS ellipse(farthest-side calc(25%*3)) - computed style
FAIL ellipse(farthest-side calc(25%*3 - 10in)) - computed style assert_in_array: value "ellipse(farthest-side calc(75% + -960px) at 50% 50%)" not in array ["ellipse(farthest-side calc(75% - 960px) at 50% 50%)", "ellipse(farthest-side calc(-960px + 75%) at 50% 50%)"]
PASS ellipse(farthest-side calc((12.5%*6 + 10in) / 4)) - computed style
PASS ellipse(calc(10in) calc(10in)) - computed style
PASS ellipse(calc(10in + 20px) calc(10in + 20px)) - computed style
PASS ellipse(calc(30%) calc(30%)) - computed style
PASS ellipse(calc(100%/4) calc(100%/4)) - computed style
PASS ellipse(calc(25%*3) calc(25%*3)) - computed style
FAIL ellipse(calc(25%*3 - 10in) calc(25%*3 - 10in)) - computed style assert_in_array: value "ellipse(calc(75% + -960px) calc(75% + -960px) at 50% 50%)" not in array ["ellipse(calc(75% - 960px) calc(75% - 960px) at 50% 50%)", "ellipse(calc(-960px + 75%) calc(-960px + 75%) at 50% 50%)"]
PASS ellipse(calc((12.5%*6 + 10in) / 4) calc((12.5%*6 + 10in) / 4)) - computed style
Harness: the test ran to completion.
This is a testharness.js-based test.
PASS ellipse(at calc(10in) 50%) - inline style
PASS ellipse(at calc(10in + 20px) 50%) - inline style
PASS ellipse(at calc(30%) 50%) - inline style
PASS ellipse(at calc(100%/4) 50%) - inline style
PASS ellipse(at calc(25%*3) 50%) - inline style
PASS ellipse(at calc(25%*3 - 10in) 50%) - inline style
PASS ellipse(at calc((12.5%*6 + 10in) / 4) 50%) - inline style
PASS ellipse(closest-side farthest-side at calc(10in) calc(10in)) - inline style
PASS ellipse(closest-side farthest-side at calc(10in + 20px) calc(10in + 20px)) - inline style
PASS ellipse(closest-side farthest-side at calc(30%) calc(30%)) - inline style
PASS ellipse(closest-side farthest-side at calc(100%/4) calc(100%/4)) - inline style
PASS ellipse(closest-side farthest-side at calc(25%*3) calc(25%*3)) - inline style
PASS ellipse(closest-side farthest-side at calc(25%*3 - 10in) calc(25%*3 - 10in)) - inline style
PASS ellipse(closest-side farthest-side at calc((12.5%*6 + 10in) / 4) calc((12.5%*6 + 10in) / 4)) - inline style
PASS ellipse(at calc(10in) 50%) - computed style
PASS ellipse(at calc(10in + 20px) 50%) - computed style
PASS ellipse(at calc(30%) 50%) - computed style
PASS ellipse(at calc(100%/4) 50%) - computed style
PASS ellipse(at calc(25%*3) 50%) - computed style
FAIL ellipse(at calc(25%*3 - 10in) 50%) - computed style assert_in_array: value "ellipse(at calc(75% + -960px) 50%)" not in array ["ellipse(at calc(75% - 960px) 50%)", "ellipse(at calc(-960px + 75%) 50%)"]
PASS ellipse(at calc((12.5%*6 + 10in) / 4) 50%) - computed style
PASS ellipse(closest-side farthest-side at calc(10in) calc(10in)) - computed style
PASS ellipse(closest-side farthest-side at calc(10in + 20px) calc(10in + 20px)) - computed style
PASS ellipse(closest-side farthest-side at calc(30%) calc(30%)) - computed style
PASS ellipse(closest-side farthest-side at calc(100%/4) calc(100%/4)) - computed style
PASS ellipse(closest-side farthest-side at calc(25%*3) calc(25%*3)) - computed style
FAIL ellipse(closest-side farthest-side at calc(25%*3 - 10in) calc(25%*3 - 10in)) - computed style assert_in_array: value "ellipse(closest-side farthest-side at calc(75% + -960px) calc(75% + -960px))" not in array ["ellipse(closest-side farthest-side at calc(75% - 960px) calc(75% - 960px))", "ellipse(closest-side farthest-side at calc(-960px + 75%) calc(-960px + 75%))"]
PASS ellipse(closest-side farthest-side at calc((12.5%*6 + 10in) / 4) calc((12.5%*6 + 10in) / 4)) - computed style
Harness: the test ran to completion.
This is a testharness.js-based test.
PASS inset(calc(10in)) - inline style
PASS inset(calc(10in + 20px)) - inline style
PASS inset(calc(30%)) - inline style
PASS inset(calc(100%/4)) - inline style
PASS inset(calc(25%*3)) - inline style
PASS inset(calc(25%*3 - 10in)) - inline style
PASS inset(calc((12.5%*6 + 10in) / 4)) - inline style
PASS inset(calc(10in) calc(10in)) - inline style
PASS inset(calc(10in + 20px) calc(10in + 20px)) - inline style
PASS inset(calc(30%) calc(30%)) - inline style
PASS inset(calc(100%/4) calc(100%/4)) - inline style
PASS inset(calc(25%*3) calc(25%*3)) - inline style
PASS inset(calc(25%*3 - 10in) calc(25%*3 - 10in)) - inline style
PASS inset(calc((12.5%*6 + 10in) / 4) calc((12.5%*6 + 10in) / 4)) - inline style
PASS inset(calc(10in)) - computed style
PASS inset(calc(10in + 20px)) - computed style
PASS inset(calc(30%)) - computed style
PASS inset(calc(100%/4)) - computed style
PASS inset(calc(25%*3)) - computed style
FAIL inset(calc(25%*3 - 10in)) - computed style assert_in_array: value "inset(calc(75% + -960px))" not in array ["inset(calc(75% - 960px))", "inset(calc(-960px + 75%))"]
PASS inset(calc((12.5%*6 + 10in) / 4)) - computed style
PASS inset(calc(10in) calc(10in)) - computed style
PASS inset(calc(10in + 20px) calc(10in + 20px)) - computed style
PASS inset(calc(30%) calc(30%)) - computed style
PASS inset(calc(100%/4) calc(100%/4)) - computed style
PASS inset(calc(25%*3) calc(25%*3)) - computed style
FAIL inset(calc(25%*3 - 10in) calc(25%*3 - 10in)) - computed style assert_in_array: value "inset(calc(75% + -960px))" not in array ["inset(calc(75% - 960px))", "inset(calc(-960px + 75%))"]
PASS inset(calc((12.5%*6 + 10in) / 4) calc((12.5%*6 + 10in) / 4)) - computed style
Harness: the test ran to completion.
This is a testharness.js-based test.
PASS inset(10px 10px 10px 10px round calc(10in)) - inline style
PASS inset(10px 10px 10px 10px round calc(10in + 20px)) - inline style
PASS inset(10px 10px 10px 10px round calc(30%)) - inline style
PASS inset(10px 10px 10px 10px round calc(100%/4)) - inline style
PASS inset(10px 10px 10px 10px round calc(25%*3)) - inline style
PASS inset(10px 10px 10px 10px round calc(25%*3 - 10in)) - inline style
PASS inset(10px 10px 10px 10px round calc((12.5%*6 + 10in) / 4)) - inline style
PASS inset(10px 10px 10px 10px round calc(10in) calc(10in)) - inline style
PASS inset(10px 10px 10px 10px round calc(10in + 20px) calc(10in + 20px)) - inline style
PASS inset(10px 10px 10px 10px round calc(30%) calc(30%)) - inline style
PASS inset(10px 10px 10px 10px round calc(100%/4) calc(100%/4)) - inline style
PASS inset(10px 10px 10px 10px round calc(25%*3) calc(25%*3)) - inline style
PASS inset(10px 10px 10px 10px round calc(25%*3 - 10in) calc(25%*3 - 10in)) - inline style
PASS inset(10px 10px 10px 10px round calc((12.5%*6 + 10in) / 4) calc((12.5%*6 + 10in) / 4)) - inline style
PASS inset(10px 10px 10px 10px round calc(10in)) - computed style
PASS inset(10px 10px 10px 10px round calc(10in + 20px)) - computed style
PASS inset(10px 10px 10px 10px round calc(30%)) - computed style
PASS inset(10px 10px 10px 10px round calc(100%/4)) - computed style
PASS inset(10px 10px 10px 10px round calc(25%*3)) - computed style
FAIL inset(10px 10px 10px 10px round calc(25%*3 - 10in)) - computed style assert_in_array: value "inset(10px round calc(75% + -960px))" not in array ["inset(10px round calc(75% - 960px))", "inset(10px round calc(-960px + 75%))"]
PASS inset(10px 10px 10px 10px round calc((12.5%*6 + 10in) / 4)) - computed style
PASS inset(10px 10px 10px 10px round calc(10in) calc(10in)) - computed style
PASS inset(10px 10px 10px 10px round calc(10in + 20px) calc(10in + 20px)) - computed style
PASS inset(10px 10px 10px 10px round calc(30%) calc(30%)) - computed style
PASS inset(10px 10px 10px 10px round calc(100%/4) calc(100%/4)) - computed style
PASS inset(10px 10px 10px 10px round calc(25%*3) calc(25%*3)) - computed style
FAIL inset(10px 10px 10px 10px round calc(25%*3 - 10in) calc(25%*3 - 10in)) - computed style assert_in_array: value "inset(10px round calc(75% + -960px))" not in array ["inset(10px round calc(75% - 960px))", "inset(10px round calc(-960px + 75%))"]
PASS inset(10px 10px 10px 10px round calc((12.5%*6 + 10in) / 4) calc((12.5%*6 + 10in) / 4)) - computed style
Harness: the test ran to completion.
This is a testharness.js-based test.
PASS polygon(calc(10in) calc(10in)) - inline style
PASS polygon(calc(10in + 20px) calc(10in + 20px)) - inline style
PASS polygon(calc(30%) calc(30%)) - inline style
PASS polygon(calc(100%/4) calc(100%/4)) - inline style
PASS polygon(calc(25%*3) calc(25%*3)) - inline style
PASS polygon(calc(25%*3 - 10in) calc(25%*3 - 10in)) - inline style
PASS polygon(calc((12.5%*6 + 10in) / 4) calc((12.5%*6 + 10in) / 4)) - inline style
PASS polygon(evenodd, calc(10in) calc(10in), calc(10in) calc(10in)) - inline style
PASS polygon(evenodd, calc(10in + 20px) calc(10in + 20px), calc(10in + 20px) calc(10in + 20px)) - inline style
PASS polygon(evenodd, calc(30%) calc(30%), calc(30%) calc(30%)) - inline style
PASS polygon(evenodd, calc(100%/4) calc(100%/4), calc(100%/4) calc(100%/4)) - inline style
PASS polygon(evenodd, calc(25%*3) calc(25%*3), calc(25%*3) calc(25%*3)) - inline style
PASS polygon(evenodd, calc(25%*3 - 10in) calc(25%*3 - 10in), calc(25%*3 - 10in) calc(25%*3 - 10in)) - inline style
PASS polygon(evenodd, calc((12.5%*6 + 10in) / 4) calc((12.5%*6 + 10in) / 4), calc((12.5%*6 + 10in) / 4) calc((12.5%*6 + 10in) / 4)) - inline style
PASS polygon(calc(10in) calc(10in)) - computed style
PASS polygon(calc(10in + 20px) calc(10in + 20px)) - computed style
PASS polygon(calc(30%) calc(30%)) - computed style
PASS polygon(calc(100%/4) calc(100%/4)) - computed style
PASS polygon(calc(25%*3) calc(25%*3)) - computed style
FAIL polygon(calc(25%*3 - 10in) calc(25%*3 - 10in)) - computed style assert_in_array: value "polygon(calc(75% + -960px) calc(75% + -960px))" not in array ["polygon(calc(75% - 960px) calc(75% - 960px))", "polygon(calc(-960px + 75%) calc(-960px + 75%))"]
PASS polygon(calc((12.5%*6 + 10in) / 4) calc((12.5%*6 + 10in) / 4)) - computed style
PASS polygon(evenodd, calc(10in) calc(10in), calc(10in) calc(10in)) - computed style
PASS polygon(evenodd, calc(10in + 20px) calc(10in + 20px), calc(10in + 20px) calc(10in + 20px)) - computed style
PASS polygon(evenodd, calc(30%) calc(30%), calc(30%) calc(30%)) - computed style
PASS polygon(evenodd, calc(100%/4) calc(100%/4), calc(100%/4) calc(100%/4)) - computed style
PASS polygon(evenodd, calc(25%*3) calc(25%*3), calc(25%*3) calc(25%*3)) - computed style
FAIL polygon(evenodd, calc(25%*3 - 10in) calc(25%*3 - 10in), calc(25%*3 - 10in) calc(25%*3 - 10in)) - computed style assert_in_array: value "polygon(evenodd, calc(75% + -960px) calc(75% + -960px), calc(75% + -960px) calc(75% + -960px))" not in array ["polygon(evenodd, calc(75% - 960px) calc(75% - 960px), calc(75% - 960px) calc(75% - 960px))", "polygon(evenodd, calc(-960px + 75%) calc(-960px + 75%), calc(-960px + 75%) calc(-960px + 75%))"]
PASS polygon(evenodd, calc((12.5%*6 + 10in) / 4) calc((12.5%*6 + 10in) / 4), calc((12.5%*6 + 10in) / 4) calc((12.5%*6 + 10in) / 4)) - computed style
Harness: the test ran to completion.
This is a testharness.js-based test.
FAIL translate supports calc assert_equals: expected "calc(20% + 30px) calc(100% - 200px)" but got "calc(20% + 30px) calc(100% + -200px)"
PASS rotate supports calc
PASS scale supports calc
PASS perspective supports calc
PASS perspective-origin supports calc
PASS transform supports calc
PASS transform-origin supports calc
Harness: the test ran to completion.
This is a testharness.js-based test.
PASS testing background-position: calc(2px + 3px) calc(4px + 5px)
PASS testing background-position: calc(18px - 7px) calc(19px - 7px)
PASS testing background-position: calc(4 * 5px) calc(6px * 4)
PASS testing background-position: calc(100px / 4) calc(119px / 7)
PASS testing background-position: calc(6px + 21%) calc(7em + 22%)
FAIL testing background-position: calc(-8px + 23%) calc(-9em + 24%) assert_equals: expected "calc(23% - 8px) calc(24% - 144px)" but got "calc(23% + -8px) calc(24% + -144px)"
Harness: the test ran to completion.
This is a testharness.js-based test.
FAIL offset-position supports calc assert_equals: expected "calc(20% + 30px) calc(100% - 40px)" but got "calc(20% + 30px) calc(100% + -40px)"
PASS offset-path supports calc
FAIL offset-distance supports calc assert_equals: expected "calc(50% - 100px)" but got "calc(50% + -100px)"
PASS offset-rotate supports calc
FAIL offset-anchor supports calc assert_equals: expected "calc(20% + 30px) calc(100% - 40px)" but got "calc(20% + 30px) calc(100% + -40px)"
Harness: the test ran to completion.
This is a testharness.js-based test.
Found 568 tests; 539 PASS, 29 FAIL, 0 TIMEOUT, 0 NOTRUN.
Found 568 tests; 540 PASS, 28 FAIL, 0 TIMEOUT, 0 NOTRUN.
PASS Setup
PASS align-content (type: discrete) has testAddition function
PASS align-content: "flex-end" onto "flex-start"
......@@ -539,7 +539,7 @@ FAIL rotate with different rotation axes assert_approx_equals: expected 0.57735
PASS translate (type: translateList) has testAddition function
PASS translate
PASS translate with underlying transform
FAIL translate with underlying percentage value assert_equals: The value should be calc(50% - 200px) at 0ms expected "calc(50% - 200px)" but got "calc(50% + -200px)"
PASS translate with underlying percentage value
PASS scale (type: scaleList) has testAddition function
PASS scale with two unspecified values
PASS scale with one unspecified value
......
......@@ -671,7 +671,7 @@ PASS translate (type: translateList) has testInterpolation function
PASS translate with two unspecified values
PASS translate with one unspecified value
PASS translate with all three values specified
FAIL translate with combination of percentages and lengths assert_equals: The value should be calc(0% + 200px) calc(25% - 50.5px) 200px at 500ms expected "calc(0% + 200px) calc(25% - 50.5px) 200px" but got "200px calc(25% + -50.5px) 200px"
FAIL translate with combination of percentages and lengths assert_equals: The value should be calc(0% + 200px) calc(25% - 50.5px) 200px at 500ms expected "calc(0% + 200px) calc(25% - 50.5px) 200px" but got "200px calc(25% - 50.5px) 200px"
PASS scale (type: scaleList) has testInterpolation function
PASS scale with two unspecified values
PASS scale with one unspecified value
......
......@@ -32,9 +32,9 @@ PASS window.getComputedStyle(gridWithCalcCalc, '').getPropertyValue('grid-templa
PASS window.getComputedStyle(gridWithCalcAndFixed, '').getPropertyValue('grid-template-columns') is "50% 80px"
PASS window.getComputedStyle(gridWithCalcAndFixed, '').getPropertyValue('grid-template-rows') is "88px 25%"
PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('grid-template-columns') is "calc(20% + 30px) minmax(min-content, 80px)"
PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('grid-template-rows') is "minmax(25%, max-content) calc(10% + -7px)"
PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('grid-template-rows') is "minmax(25%, max-content) calc(10% - 7px)"
PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-columns') is "minmax(calc(10% + 23px), 400px) 120px"
PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-rows') is "150px minmax(5%, calc(50% + -125px))"
PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-rows') is "150px minmax(5%, calc(50% - 125px))"
PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('grid-template-columns') is "minmax(auto, 20px) 10%"
PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('grid-template-rows') is "max-content minmax(min-content, auto)"
......
......@@ -15,8 +15,8 @@ testGridDefinitionsValues(document.getElementById("gridWithFractionFraction"), "
testGridDefinitionsValues(document.getElementById("gridWithFractionMinMax"), "minmax(min-content, 45px) 2fr", "3fr minmax(14px, max-content)");
testGridDefinitionsValues(document.getElementById("gridWithCalcCalc"), "200px 100px", "150px 75px");
testGridDefinitionsValues(document.getElementById("gridWithCalcAndFixed"), "50% 80px", "88px 25%");
testGridDefinitionsValues(document.getElementById("gridWithCalcAndMinMax"), "calc(20% + 30px) minmax(min-content, 80px)", "minmax(25%, max-content) calc(10% + -7px)");
testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMax"), "minmax(calc(10% + 23px), 400px) 120px", "150px minmax(5%, calc(50% + -125px))");
testGridDefinitionsValues(document.getElementById("gridWithCalcAndMinMax"), "calc(20% + 30px) minmax(min-content, 80px)", "minmax(25%, max-content) calc(10% - 7px)");
testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMax"), "minmax(calc(10% + 23px), 400px) 120px", "150px minmax(5%, calc(50% - 125px))");
testGridDefinitionsValues(document.getElementById("gridWithAutoInsideMinMax"), "minmax(auto, 20px) 10%", "max-content minmax(min-content, auto)");
debug("");
......
......@@ -9,7 +9,7 @@ PASS testComputedStyle("object-position: right top;") is "100% 0%"
PASS testComputedStyle("object-position: top right;") is "100% 0%"
PASS testComputedStyle("object-position: left 20px bottom 50%;") is "20px 50%"
PASS testComputedStyle("object-position: right 50% bottom 25%;") is "50% 75%"
PASS testComputedStyle("object-position: bottom 20px right 12px;") is "calc(100% + -12px) calc(100% + -20px)"
PASS testComputedStyle("object-position: bottom 20px right 12px;") is "calc(100% - 12px) calc(100% - 20px)"
PASS test("object-position: inherit;") is "inherit"
PASS test("object-position: initial;") is "initial"
PASS test("object-position: left;") is "left center"
......
......@@ -36,7 +36,7 @@
shouldBeEqualToString('testComputedStyle("object-position: top right;")', '100% 0%');
shouldBeEqualToString('testComputedStyle("object-position: left 20px bottom 50%;")', '20px 50%');
shouldBeEqualToString('testComputedStyle("object-position: right 50% bottom 25%;")', '50% 75%');
shouldBeEqualToString('testComputedStyle("object-position: bottom 20px right 12px;")', 'calc(100% + -12px) calc(100% + -20px)');
shouldBeEqualToString('testComputedStyle("object-position: bottom 20px right 12px;")', 'calc(100% - 12px) calc(100% - 20px)');
shouldBeEqualToString('test("object-position: inherit;")', 'inherit');
shouldBeEqualToString('test("object-position: initial;")', 'initial');
......
......@@ -20,7 +20,7 @@ PASS getComputedStyleValue("shape-margin", "1px") is "1px"
PASS getComputedStyleValue("shape-margin", "-5em") is "0px"
PASS getComputedStyleValue("shape-margin", "identifier") is "0px"
PASS getComputedStyleValue("shape-margin", "'string'") is "0px"
PASS getComputedStyleValue("shape-margin", "calc(25%*3 - 10in)") is "calc(75% + -960px)"
PASS getComputedStyleValue("shape-margin", "calc(25%*3 - 10in)") is "calc(75% - 960px)"
PASS getChildComputedStyle("shape-margin", "0", "0") is "0px"
PASS getChildComputedStyle("shape-margin", "0", "1px") is "1px"
PASS getChildComputedStyle("shape-margin", "1px", "-1em") is "0px"
......
......@@ -28,7 +28,7 @@ applyToEachArglist(
["shape-margin", "-5em", "0px"],
["shape-margin", "identifier", "0px"],
["shape-margin", "\'string\'", "0px"],
["shape-margin", "calc(25%*3 - 10in)", "calc(75% + -960px)"]]
["shape-margin", "calc(25%*3 - 10in)", "calc(75% - 960px)"]]
);
applyToEachArglist(
......
......@@ -67,9 +67,9 @@ PASS getComputedStyleValue("shape-outside", "inset(10px 20px 30px 40px round 5px
PASS getCSSText("shape-outside", "inset(10px round 0px / 10px)") is "inset(10px round 0px / 10px)"
PASS getComputedStyleValue("shape-outside", "inset(10px round 0px / 10px)") is "inset(10px round 0px / 10px)"
PASS getCSSText("shape-outside", "inset(calc(25%*3 - 10in) 0 0 0)") is "inset(calc(75% - 10in) 0px 0px)"
FAIL getComputedStyleValue("shape-outside", "inset(calc(25%*3 - 10in) 0 0 0)") should be inset(calc(-960px + 75%) 0px 0px). Was inset(calc(75% + -960px) 0px 0px).
FAIL getComputedStyleValue("shape-outside", "inset(calc(25%*3 - 10in) 0 0 0)") should be inset(calc(-960px + 75%) 0px 0px). Was inset(calc(75% - 960px) 0px 0px).
PASS getCSSText("shape-outside", "inset(10px 10px 10px 10px round calc(25%*3 - 10in))") is "inset(10px round calc(75% - 10in))"
FAIL getComputedStyleValue("shape-outside", "inset(10px 10px 10px 10px round calc(25%*3 - 10in))") should be inset(10px round calc(-960px + 75%)). Was inset(10px round calc(75% + -960px)).
FAIL getComputedStyleValue("shape-outside", "inset(10px 10px 10px 10px round calc(25%*3 - 10in))") should be inset(10px round calc(-960px + 75%)). Was inset(10px round calc(75% - 960px)).
PASS getCSSText("shape-outside", "circle()") is "circle(at 50% 50%)"
PASS getComputedStyleValue("shape-outside", "circle()") is "circle(at 50% 50%)"
PASS getCSSText("shape-outside", "circle(farthest-side)") is "circle(farthest-side at 50% 50%)"
......
......@@ -19,8 +19,8 @@ expect('42.5% -20.5%').parsesAs('42.5% -20.5%').isComputedTo('42.5% -20.5%');
expect('42.5% -20.5% 5px').parsesAs('42.5% -20.5% 5px').isComputedTo('42.5% -20.5% 5px');
expect('calc(100%) calc(20px) calc(-1px)').isComputedTo('100% 20px -1px');
expect('calc(100% + 10px) calc(100% - 10px) calc(100px + 200px)').parsesAs('calc(100% + 10px) calc(100% - 10px) calc(300px)').isComputedTo('calc(100% + 10px) calc(100% + -10px) 300px');
expect('calc(100% * 0.5 + 2px) calc(100% - 10px / 2) calc(100px - 200px)').parsesAs('calc(50% + 2px) calc(100% - 5px) calc(-100px)').isComputedTo('calc(50% + 2px) calc(100% + -5px) -100px');
expect('calc(100% + 10px) calc(100% - 10px) calc(100px + 200px)').parsesAs('calc(100% + 10px) calc(100% - 10px) calc(300px)').isComputedTo('calc(100% + 10px) calc(100% - 10px) 300px');
expect('calc(100% * 0.5 + 2px) calc(100% - 10px / 2) calc(100px - 200px)').parsesAs('calc(50% + 2px) calc(100% - 5px) calc(-100px)').isComputedTo('calc(50% + 2px) calc(100% - 5px) -100px');
expect('2').isInvalid();
expect('10deg 10px').isInvalid();
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment