Skip to content

GitLab

T
tangled
Commit 49530a7b authored by Eric Willigers's avatar Eric Willigers Committed by Commit Bot
Browse files
Options

CSS translate: serialize % as percent for computed values 

The CSS translate property no longer resolves percentages
in getComputedStyle results.

CSS WG Resolution:
RESOLVED: % values of translate are serialized as percent for
computed values. Add note making the behavior explicit.

https://github.com/w3c/csswg-drafts/issues/2124

BUG=811027

Change-Id: I6f9b60c285d1eccc2e13ff0e806794df5cce5151
Reviewed-on: https://chromium-review.googlesource.com/912052
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Reviewed-by: default avatarFredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#536010}
parent 58525850
Hide whitespace changes
Inline Side-by-side
Showing with 79 additions and 108 deletions
third_party/WebKit/LayoutTests/animations/composition/translate-composition.html
View file @ 49530a7b
...@@ -14,12 +14,12 @@ assertComposition({ ...@@ -14,12 +14,12 @@ assertComposition({
addFrom: '-50px 50%', addFrom: '-50px 50%',
addTo: '100%', addTo: '100%',
}, [ }, [
{at: -1, is: '-100px 300px 300px'}, {at: -1, is: '-100% calc(200px + 100%) 300px'},
{at: 0, is: '50px 250px 300px'}, {at: 0, is: '50px calc(200px + 50%) 300px'},
{at: 0.25, is: '87.5px 237.5px 300px'}, {at: 0.25, is: 'calc(62.5px + 25%) calc(200px + 37.5%) 300px'},
{at: 0.75, is: '162.5px 212.5px 300px'}, {at: 0.75, is: 'calc(87.5px + 75%) calc(200px + 12.5%) 300px'},
{at: 1, is: '200px 200px 300px'}, {at: 1, is: 'calc(100px + 100%) 200px 300px'},
{at: 2, is: '350px 150px 300px'}, {at: 2, is: 'calc(150px + 200%) calc(200px - 50%) 300px'},
]); ]);
assertComposition({ assertComposition({
...@@ -28,12 +28,12 @@ assertComposition({ ...@@ -28,12 +28,12 @@ assertComposition({
addFrom: '50% 100px', addFrom: '50% 100px',
replaceTo: '200px 50% 100px', replaceTo: '200px 50% 100px',
}, [ }, [
{at: -1, is: '100px 550px 500px'}, {at: -1, is: '100% calc(600px - 50%) 500px'},
{at: 0, is: '150px 300px 300px'}, {at: 0, is: 'calc(100px + 50%) 300px 300px'},
{at: 0.25, is: '162.5px 237.5px 250px'}, {at: 0.25, is: 'calc(125px + 37.5%) calc(225px + 12.5%) 250px'},
{at: 0.75, is: '187.5px 112.5px 150px'}, {at: 0.75, is: 'calc(175px + 12.5%) calc(75px + 37.5%) 150px'},
{at: 1, is: '200px 50px 100px'}, {at: 1, is: '200px 50% 100px'},
{at: 2, is: '250px -200px -100px'}, {at: 2, is: 'calc(300px - 50%) calc(-300px + 100%) -100px'},
]); ]);
assertComposition({ assertComposition({
...@@ -42,12 +42,12 @@ assertComposition({ ...@@ -42,12 +42,12 @@ assertComposition({
replaceFrom: '50% 100px', replaceFrom: '50% 100px',
addTo: '200px 50% 100px', addTo: '200px 50% 100px',
}, [ }, [
{at: -1, is: '-200px -50px -400px'}, {at: -1, is: 'calc(-300px + 100%) -50% -400px'},
{at: 0, is: '50px 100px'}, {at: 0, is: '50% 100px'},
{at: 0.25, is: '112.5px 137.5px 100px'}, {at: 0.25, is: 'calc(75px + 37.5%) calc(125px + 12.5%) 100px'},
{at: 0.75, is: '237.5px 212.5px 300px'}, {at: 0.75, is: 'calc(225px + 12.5%) calc(175px + 37.5%) 300px'},
{at: 1, is: '300px 250px 400px'}, {at: 1, is: '300px calc(200px + 50%) 400px'},
{at: 2, is: '550px 400px 800px'}, {at: 2, is: 'calc(600px - 50%) calc(300px + 100%) 800px'},
]); ]);
assertComposition({ assertComposition({
......
third_party/WebKit/LayoutTests/external/wpt/css/css-transforms/transforms-support-calc.html
View file @ 49530a7b
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
test(function(){ test(function(){
target.style = 'translate: calc(30px + 20%) calc(-200px + 100%);'; target.style = 'translate: calc(30px + 20%) calc(-200px + 100%);';
assert_equals(getComputedStyle(target).translate, '90px 0px'); assert_equals(getComputedStyle(target).translate, 'calc(30px + 20%) calc(-200px + 100%)');
}, 'translate supports calc'); }, 'translate supports calc');
test(function(){ test(function(){
......
third_party/WebKit/LayoutTests/external/wpt/css/css-transforms/translate-getComputedStyle.html 0 → 100644
View file @ 49530a7b
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transform Module Level 2: translate getComputedStyle</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
<meta name="assert" content="translate computed style does not resolve percentages.">
<style type="text/css">
#container {
transform-style: preserve-3d;;
}
#first {
font-size: 10px;
translate: 10px 2em;
}
#second {
translate: 30% 40% 50px;
}
#third {
font-size: 10px;
width: 98px;
height: 76px;
translate: calc(7em + 80%) -9em;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="container">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
<script>
'use strict';
function getTranslateFor(id) {
return window.getComputedStyle(document.getElementById(id)).getPropertyValue("translate");
}
test(function() {
assert_equals(getTranslateFor("first"), "10px 20px");
assert_equals(getTranslateFor("second"), "30% 40% 50px");
assert_equals(getTranslateFor("third"), "calc(70px + 80%) -90px");
}, "computed style for translate");
</script>
</body>
</html>
third_party/WebKit/LayoutTests/transforms/translate-parsing-expected.txt deleted 100644 → 0
View file @ 58525850
This is a testharness.js-based test.
Harness Error. harness_status.status = 1 , harness_status.message = 5 duplicate test names: ""translate: 42.5%;" should parse as "42.5%"", ""translate: 42.5% -20.5%;" should parse as "42.5% -20.5%"", ""translate: 42.5% -20.5% 5px;" should parse as "42.5% -20.5% 5px"", ""translate: calc(100% + 10px) calc(100% - 10px) calc(100px + 200px);" should parse as "calc(100% + 10px) calc(100% - 10px) calc(300px)"", ""translate: calc(100% * 0.5 + 2px) calc(100% - 10px / 2) calc(100px - 200px);" should parse as "calc(50% + 2px) calc(100% - 5px) calc(-100px)""
PASS "translate: initial;" should parse as "initial"
PASS "translate: initial;" should be computed to "none"
PASS "translate: inherit;" should parse as "inherit"
PASS "translate: none;" should parse as "none"
PASS "translate: none;" should be computed to "none"
PASS "translate: 10px;" should parse as "10px"
PASS "translate: 10px;" should be computed to "10px"
PASS "translate: 10px -2.5px;" should parse as "10px -2.5px"
PASS "translate: 10px -2.5px;" should be computed to "10px -2.5px"
PASS "translate: 10px -2.5px 0;" should parse as "10px -2.5px 0px"
PASS "translate: 10px -2.5px 0;" should be computed to "10px -2.5px"
PASS "translate: 42.5%;" should parse as "42.5%"
PASS "translate: 42.5%;" should be computed to "42.5px"
PASS "translate: 42.5% -20.5%;" should parse as "42.5% -20.5%"
PASS "translate: 42.5% -20.5%;" should be computed to "42.5px -41px"
PASS "translate: 42.5% -20.5% 5px;" should parse as "42.5% -20.5% 5px"
PASS "translate: 42.5% -20.5% 5px;" should be computed to "42.5px -41px 5px"
PASS "translate: 10px -2%;" should parse as "10px -2%"
PASS "translate: 10px -2%;" should be computed to "10px -4px"
PASS "translate: 10% -2px;" should parse as "10% -2px"
PASS "translate: 10% -2px;" should be computed to "10px -2px"
PASS "translate: 10% -2px 4px;" should parse as "10% -2px 4px"
PASS "translate: 10% -2px 4px;" should be computed to "10px -2px 4px"
PASS "translate: calc(100%) calc(20px) calc(-1px);" should be computed to "100px 20px -1px"
PASS "translate: calc(100% + 10px) calc(100% - 10px) calc(100px + 200px);" should parse as "calc(100% + 10px) calc(100% - 10px) calc(300px)"
PASS "translate: calc(100% + 10px) calc(100% - 10px) calc(100px + 200px);" should be computed to "110px 190px 300px"
PASS "translate: calc(100% * 0.5 + 2px) calc(100% - 10px / 2) calc(100px - 200px);" should parse as "calc(50% + 2px) calc(100% - 5px) calc(-100px)"
PASS "translate: calc(100% * 0.5 + 2px) calc(100% - 10px / 2) calc(100px - 200px);" should be computed to "52px 195px -100px"
PASS "translate: 2;" should be invalid
PASS "translate: 10deg 10px;" should be invalid
PASS "translate: 10px 10px 10%;" should be invalid
PASS "translate: 20smigens;" should be invalid
PASS "translate: 10px 20px 5 6;" should be invalid
PASS "translate: 10% 20% 30%;" should be invalid
PASS "translate: calc(100% + 10px) calc(100% - 10px) calc(100% + 200px);" should be invalid
PASS "translate: 42.5%;" should parse as "42.5%"
PASS "translate: 42.5%;" should be computed to "42.5%"
PASS "translate: 42.5% -20.5%;" should parse as "42.5% -20.5%"
PASS "translate: 42.5% -20.5%;" should be computed to "42.5% -20.5%"
PASS "translate: 42.5% -20.5% 5px;" should parse as "42.5% -20.5% 5px"
PASS "translate: 42.5% -20.5% 5px;" should be computed to "42.5% -20.5% 5px"
PASS "translate: calc(100%) calc(20px) calc(-1px);" should be computed to "100% 20px -1px"
PASS "translate: calc(100% + 10px) calc(100% - 10px) calc(100px + 200px);" should parse as "calc(100% + 10px) calc(100% - 10px) calc(300px)"
PASS "translate: calc(100% + 10px) calc(100% - 10px) calc(100px + 200px);" should be computed to "calc(10px + 100%) calc(-10px + 100%) 300px"
PASS "translate: calc(100% * 0.5 + 2px) calc(100% - 10px / 2) calc(100px - 200px);" should parse as "calc(50% + 2px) calc(100% - 5px) calc(-100px)"
PASS "translate: calc(100% * 0.5 + 2px) calc(100% - 10px / 2) calc(100px - 200px);" should be computed to "calc(2px + 50%) calc(-5px + 100%) -100px"
Harness: the test ran to completion.
third_party/WebKit/LayoutTests/transforms/translate-parsing.html
View file @ 49530a7b
...@@ -14,17 +14,13 @@ expect('10px').parsesAs('10px').isComputedTo('10px'); ...@@ -14,17 +14,13 @@ expect('10px').parsesAs('10px').isComputedTo('10px');
expect('10px -2.5px').parsesAs('10px -2.5px').isComputedTo('10px -2.5px'); expect('10px -2.5px').parsesAs('10px -2.5px').isComputedTo('10px -2.5px');
expect('10px -2.5px 0').parsesAs('10px -2.5px 0px').isComputedTo('10px -2.5px'); expect('10px -2.5px 0').parsesAs('10px -2.5px 0px').isComputedTo('10px -2.5px');
expect('42.5%').parsesAs('42.5%').isComputedTo('42.5px'); expect('42.5%').parsesAs('42.5%').isComputedTo('42.5%');
expect('42.5% -20.5%').parsesAs('42.5% -20.5%').isComputedTo('42.5px -41px'); 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.5px -41px 5px'); expect('42.5% -20.5% 5px').parsesAs('42.5% -20.5% 5px').isComputedTo('42.5% -20.5% 5px');
expect('10px -2%').parsesAs('10px -2%').isComputedTo('10px -4px');
expect('10% -2px').parsesAs('10% -2px').isComputedTo('10px -2px');
expect('10% -2px 4px').parsesAs('10% -2px 4px').isComputedTo('10px -2px 4px');
expect('calc(100%) calc(20px) calc(-1px)').isComputedTo('100px 20px -1px'); 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('110px 190px 300px'); expect('calc(100% + 10px) calc(100% - 10px) calc(100px + 200px)').parsesAs('calc(100% + 10px) calc(100% - 10px) calc(300px)').isComputedTo('calc(10px + 100%) calc(-10px + 100%) 300px');
expect('calc(100% * 0.5 + 2px) calc(100% - 10px / 2) calc(100px - 200px)').parsesAs('calc(50% + 2px) calc(100% - 5px) calc(-100px)').isComputedTo('52px 195px -100px'); expect('calc(100% * 0.5 + 2px) calc(100% - 10px / 2) calc(100px - 200px)').parsesAs('calc(50% + 2px) calc(100% - 5px) calc(-100px)').isComputedTo('calc(2px + 50%) calc(-5px + 100%) -100px');
expect('2').isInvalid(); expect('2').isInvalid();
expect('10deg 10px').isInvalid(); expect('10deg 10px').isInvalid();
...@@ -33,15 +29,4 @@ expect('20smigens').isInvalid(); ...@@ -33,15 +29,4 @@ expect('20smigens').isInvalid();
expect('10px 20px 5 6').isInvalid(); expect('10px 20px 5 6').isInvalid();
expect('10% 20% 30%').isInvalid(); expect('10% 20% 30%').isInvalid();
expect('calc(100% + 10px) calc(100% - 10px) calc(100% + 200px)').isInvalid(); // Last parameter should not have percent expect('calc(100% + 10px) calc(100% - 10px) calc(100% + 200px)').isInvalid(); // Last parameter should not have percent
/* Test codepath where layout box is not available */
target.style.display = 'none';
expect('42.5%').parsesAs('42.5%').isComputedTo('42.5%');
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(10px + 100%) calc(-10px + 100%) 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(2px + 50%) calc(-5px + 100%) -100px');
</script> </script>
third_party/WebKit/Source/core/css/properties/longhands/TranslateCustom.cpp
View file @ 49530a7b
...@@ -59,25 +59,12 @@ const CSSValue* Translate::CSSValueFromComputedStyleInternal( ...@@ -59,25 +59,12 @@ const CSSValue* Translate::CSSValueFromComputedStyleInternal(
return CSSIdentifierValue::Create(CSSValueNone); return CSSIdentifierValue::Create(CSSValueNone);
CSSValueList* list = CSSValueList::CreateSpaceSeparated(); CSSValueList* list = CSSValueList::CreateSpaceSeparated();
if (layout_object && layout_object->IsBox()) { list->Append(*ComputedStyleUtils::ZoomAdjustedPixelValueForLength(
LayoutRect box = ToLayoutBox(layout_object)->BorderBoxRect(); style.Translate()->X(), style));
list->Append(*ZoomAdjustedPixelValue(
FloatValueForLength(style.Translate()->X(), box.Width().ToFloat()),
style));
if (!style.Translate()->Y().IsZero() || style.Translate()->Z() != 0) {
list->Append(*ZoomAdjustedPixelValue(
FloatValueForLength(style.Translate()->Y(), box.Height().ToFloat()),
style));
}
} else {
// No box to resolve the percentage values
list->Append(*ComputedStyleUtils::ZoomAdjustedPixelValueForLength(
style.Translate()->X(), style));
if (!style.Translate()->Y().IsZero() || style.Translate()->Z() != 0) { if (!style.Translate()->Y().IsZero() || style.Translate()->Z() != 0) {
list->Append(*ComputedStyleUtils::ZoomAdjustedPixelValueForLength( list->Append(*ComputedStyleUtils::ZoomAdjustedPixelValueForLength(
style.Translate()->Y(), style)); style.Translate()->Y(), style));
}
} }
if (style.Translate()->Z() != 0) if (style.Translate()->Z() != 0)
......
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