Skip to content

GitLab

T
tangled
Commit 742dc34b authored by Eric Willigers's avatar Eric Willigers Committed by Commit Bot
Browse files
Options

CSS: text-indent serializes in canonical order 

text-indent values such as "each-line calc(2em + 3ex)"
and "each-line hanging -5vh" now parse successfully
and serialize in canonical order: <length-percentage> hanging? each-line?

Spec:
https://drafts.csswg.org/css-text-3/#text-indent-property

BUG=855268

Change-Id: I17fece32135140637880a47303062fa8b23c291c
Reviewed-on: https://chromium-review.googlesource.com/1111177
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#569908}
parent b63246ba
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 133 additions and 125 deletions
third_party/WebKit/LayoutTests/animations/responsive/animations-responsive-textIndent.html
View file @ 742dc34b
...@@ -28,32 +28,32 @@ test(function() { ...@@ -28,32 +28,32 @@ test(function() {
test(function() { test(function() {
var keyframes = [ var keyframes = [
{textIndent: 'inherit'}, {textIndent: 'inherit'},
{textIndent: '200px each-line hanging'} {textIndent: '200px hanging each-line'}
]; ];
container.style.textIndent = '100px each-line hanging'; container.style.textIndent = '100px hanging each-line';
var player = element.animate(keyframes, 10); var player = element.animate(keyframes, 10);
player.pause(); player.pause();
player.currentTime = 5; player.currentTime = 5;
assert_equals(getComputedStyle(element).textIndent, '150px each-line hanging'); assert_equals(getComputedStyle(element).textIndent, '150px hanging each-line');
container.style.textIndent = '400px hanging'; container.style.textIndent = '400px hanging';
assert_equals(getComputedStyle(element).textIndent, '200px each-line hanging'); assert_equals(getComputedStyle(element).textIndent, '200px hanging each-line');
container.style.textIndent = '400px each-line hanging'; container.style.textIndent = '400px hanging each-line';
assert_equals(getComputedStyle(element).textIndent, '300px each-line hanging'); assert_equals(getComputedStyle(element).textIndent, '300px hanging each-line');
container.style.textIndent = '800px each-line hanging'; container.style.textIndent = '800px hanging each-line';
assert_equals(getComputedStyle(element).textIndent, '500px each-line hanging'); assert_equals(getComputedStyle(element).textIndent, '500px hanging each-line');
container.style.textIndent = '400px each-line'; container.style.textIndent = '400px each-line';
assert_equals(getComputedStyle(element).textIndent, '200px each-line hanging'); assert_equals(getComputedStyle(element).textIndent, '200px hanging each-line');
container.style.textIndent = '800px each-line hanging'; container.style.textIndent = '800px hanging each-line';
assert_equals(getComputedStyle(element).textIndent, '500px each-line hanging'); assert_equals(getComputedStyle(element).textIndent, '500px hanging each-line');
container.style.textIndent = '400px each-line hanging'; container.style.textIndent = '400px hanging each-line';
assert_equals(getComputedStyle(element).textIndent, '300px each-line hanging'); assert_equals(getComputedStyle(element).textIndent, '300px hanging each-line');
}, 'textIndent responsive to inherited textIndent changes'); }, 'textIndent responsive to inherited textIndent changes');
</script> </script>
third_party/WebKit/LayoutTests/css-parser/text-indent-valid.html 0 → 100644
View file @ 742dc34b
<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="resources/property-parsing-test.js"></script>
<script>
assert_valid_value("text-indent", "each-line calc(2em + 3ex)", "calc(2em + 3ex) each-line");
assert_valid_value("text-indent", "each-line hanging -5vh", "-5vh hanging each-line");
</script>
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-indent/getComputedStyle/getComputedStyle-text-indent-inherited-expected.txt
View file @ 742dc34b
...@@ -15,9 +15,9 @@ Value of ancestor is '10px hanging': ...@@ -15,9 +15,9 @@ Value of ancestor is '10px hanging':
PASS window.getComputedStyle(ancestor).getPropertyValue('text-indent') is '10px hanging' PASS window.getComputedStyle(ancestor).getPropertyValue('text-indent') is '10px hanging'
PASS window.getComputedStyle(child).getPropertyValue('text-indent') is '10px hanging' PASS window.getComputedStyle(child).getPropertyValue('text-indent') is '10px hanging'
Value of ancestor is '10px each-line hanging': Value of ancestor is '10px hanging each-line':
PASS window.getComputedStyle(ancestor).getPropertyValue('text-indent') is '10px each-line hanging' PASS window.getComputedStyle(ancestor).getPropertyValue('text-indent') is '10px hanging each-line'
PASS window.getComputedStyle(child).getPropertyValue('text-indent') is '10px each-line hanging' PASS window.getComputedStyle(child).getPropertyValue('text-indent') is '10px hanging each-line'
Value of ancestor is '10px each-line', while child is '10px': Value of ancestor is '10px each-line', while child is '10px':
PASS window.getComputedStyle(ancestor).getPropertyValue('text-indent') is '10px each-line' PASS window.getComputedStyle(ancestor).getPropertyValue('text-indent') is '10px each-line'
...@@ -27,8 +27,8 @@ Value of ancestor is '10px hanging', while child is '10px': ...@@ -27,8 +27,8 @@ Value of ancestor is '10px hanging', while child is '10px':
PASS window.getComputedStyle(ancestor).getPropertyValue('text-indent') is '10px hanging' PASS window.getComputedStyle(ancestor).getPropertyValue('text-indent') is '10px hanging'
PASS window.getComputedStyle(child).getPropertyValue('text-indent') is '10px' PASS window.getComputedStyle(child).getPropertyValue('text-indent') is '10px'
Value of ancestor is '10px each-line hanging', while child is '10px': Value of ancestor is '10px hanging each-line', while child is '10px':
PASS window.getComputedStyle(ancestor).getPropertyValue('text-indent') is '10px each-line hanging' PASS window.getComputedStyle(ancestor).getPropertyValue('text-indent') is '10px hanging each-line'
PASS window.getComputedStyle(child).getPropertyValue('text-indent') is '10px' PASS window.getComputedStyle(child).getPropertyValue('text-indent') is '10px'
PASS successfullyParsed is true PASS successfullyParsed is true
......
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-indent/getComputedStyle/script-tests/getComputedStyle-text-indent-inherited.js
View file @ 742dc34b
...@@ -28,8 +28,8 @@ child = document.getElementById('child'); ...@@ -28,8 +28,8 @@ child = document.getElementById('child');
inheritanceTest("10px"); inheritanceTest("10px");
inheritanceTest("10px each-line"); inheritanceTest("10px each-line");
inheritanceTest("10px hanging"); inheritanceTest("10px hanging");
inheritanceTest("10px each-line hanging"); inheritanceTest("10px hanging each-line");
ownValueTest("10px each-line", "10px"); ownValueTest("10px each-line", "10px");
ownValueTest("10px hanging", "10px"); ownValueTest("10px hanging", "10px");
ownValueTest("10px each-line hanging", "10px"); ownValueTest("10px hanging each-line", "10px");
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-indent/getComputedStyle/script-tests/getComputedStyle-text-indent.js
View file @ 742dc34b
...@@ -42,33 +42,33 @@ valueSettingTest('20em', '20em', '200px'); ...@@ -42,33 +42,33 @@ valueSettingTest('20em', '20em', '200px');
valueSettingTest('50%', '50%', '50%'); valueSettingTest('50%', '50%', '50%');
valueSettingTest('calc(10px + 20px)', 'calc(30px)', '30px'); valueSettingTest('calc(10px + 20px)', 'calc(30px)', '30px');
valueSettingTest('100px each-line', '100px each-line', '100px each-line'); valueSettingTest('100px each-line', '100px each-line', '100px each-line');
valueSettingTest('each-line 100px', 'each-line 100px', '100px each-line'); valueSettingTest('each-line 100px', '100px each-line', '100px each-line');
valueSettingTest('20em each-line', '20em each-line', '200px each-line'); valueSettingTest('20em each-line', '20em each-line', '200px each-line');
valueSettingTest('each-line 20em', 'each-line 20em', '200px each-line'); valueSettingTest('each-line 20em', '20em each-line', '200px each-line');
valueSettingTest('30% each-line', '30% each-line', '30% each-line'); valueSettingTest('30% each-line', '30% each-line', '30% each-line');
valueSettingTest('each-line 30%', 'each-line 30%', '30% each-line'); valueSettingTest('each-line 30%', '30% each-line', '30% each-line');
valueSettingTest('calc(10px + 20px) each-line', 'calc(30px) each-line', '30px each-line'); valueSettingTest('calc(10px + 20px) each-line', 'calc(30px) each-line', '30px each-line');
valueSettingTest('each-line calc(10px + 20px)', 'each-line calc(30px)', '30px each-line'); valueSettingTest('each-line calc(10px + 20px)', 'calc(30px) each-line', '30px each-line');
valueSettingTest('100px hanging', '100px hanging', '100px hanging'); valueSettingTest('100px hanging', '100px hanging', '100px hanging');
valueSettingTest('hanging 100px', 'hanging 100px', '100px hanging'); valueSettingTest('hanging 100px', '100px hanging', '100px hanging');
valueSettingTest('20em hanging', '20em hanging', '200px hanging'); valueSettingTest('20em hanging', '20em hanging', '200px hanging');
valueSettingTest('hanging 20em', 'hanging 20em', '200px hanging'); valueSettingTest('hanging 20em', '20em hanging', '200px hanging');
valueSettingTest('30% hanging', '30% hanging', '30% hanging'); valueSettingTest('30% hanging', '30% hanging', '30% hanging');
valueSettingTest('hanging 30%', 'hanging 30%', '30% hanging'); valueSettingTest('hanging 30%', '30% hanging', '30% hanging');
valueSettingTest('calc(10px + 20px) hanging', 'calc(30px) hanging', '30px hanging'); valueSettingTest('calc(10px + 20px) hanging', 'calc(30px) hanging', '30px hanging');
valueSettingTest('hanging calc(10px + 20px)', 'hanging calc(30px)', '30px hanging'); valueSettingTest('hanging calc(10px + 20px)', 'calc(30px) hanging', '30px hanging');
valueSettingTest('100px each-line hanging', '100px each-line hanging', '100px each-line hanging'); valueSettingTest('100px each-line hanging', '100px hanging each-line', '100px hanging each-line');
valueSettingTest('each-line 100px hanging', 'each-line 100px hanging', '100px each-line hanging'); valueSettingTest('each-line 100px hanging', '100px hanging each-line', '100px hanging each-line');
valueSettingTest('each-line hanging 100px', 'each-line hanging 100px', '100px each-line hanging'); valueSettingTest('each-line hanging 100px', '100px hanging each-line', '100px hanging each-line');
valueSettingTest('100px hanging each-line', '100px hanging each-line', '100px each-line hanging'); valueSettingTest('100px hanging each-line', '100px hanging each-line', '100px hanging each-line');
valueSettingTest('hanging 100px each-line', 'hanging 100px each-line', '100px each-line hanging'); valueSettingTest('hanging 100px each-line', '100px hanging each-line', '100px hanging each-line');
valueSettingTest('hanging each-line 100px', 'hanging each-line 100px', '100px each-line hanging'); valueSettingTest('hanging each-line 100px', '100px hanging each-line', '100px hanging each-line');
valueSettingTest('30% each-line hanging', '30% each-line hanging', '30% each-line hanging'); valueSettingTest('30% each-line hanging', '30% hanging each-line', '30% hanging each-line');
valueSettingTest('each-line 30% hanging', 'each-line 30% hanging', '30% each-line hanging'); valueSettingTest('each-line 30% hanging', '30% hanging each-line', '30% hanging each-line');
valueSettingTest('each-line hanging 30%', 'each-line hanging 30%', '30% each-line hanging'); valueSettingTest('each-line hanging 30%', '30% hanging each-line', '30% hanging each-line');
valueSettingTest('30% hanging each-line', '30% hanging each-line', '30% each-line hanging'); valueSettingTest('30% hanging each-line', '30% hanging each-line', '30% hanging each-line');
valueSettingTest('hanging 30% each-line', 'hanging 30% each-line', '30% each-line hanging'); valueSettingTest('hanging 30% each-line', '30% hanging each-line', '30% hanging each-line');
valueSettingTest('hanging each-line 30%', 'hanging each-line 30%', '30% each-line hanging'); valueSettingTest('hanging each-line 30%', '30% hanging each-line', '30% hanging each-line');
debug(''); debug('');
defaultValue = '0px' defaultValue = '0px'
......
third_party/blink/renderer/core/css/properties/longhands/text_indent_custom.cc
View file @ 742dc34b
...@@ -20,42 +20,43 @@ const CSSValue* TextIndent::ParseSingleValue( ...@@ -20,42 +20,43 @@ const CSSValue* TextIndent::ParseSingleValue(
const CSSParserLocalContext&) const { const CSSParserLocalContext&) const {
// [ <length> | <percentage> ] && hanging? && each-line? // [ <length> | <percentage> ] && hanging? && each-line?
// Keywords only allowed when css3Text is enabled. // Keywords only allowed when css3Text is enabled.
CSSValueList* list = CSSValueList::CreateSpaceSeparated(); CSSValue* length_percentage = nullptr;
CSSValue* hanging = nullptr;
bool has_length_or_percentage = false; CSSValue* each_line = nullptr;
bool has_each_line = false;
bool has_hanging = false;
do { do {
if (!has_length_or_percentage) { if (!length_percentage) {
if (CSSValue* text_indent = length_percentage = CSSPropertyParserHelpers::ConsumeLengthOrPercent(
CSSPropertyParserHelpers::ConsumeLengthOrPercent( range, context.Mode(), kValueRangeAll,
range, context.Mode(), kValueRangeAll, CSSPropertyParserHelpers::UnitlessQuirk::kAllow);
CSSPropertyParserHelpers::UnitlessQuirk::kAllow)) { if (length_percentage) {
list->Append(*text_indent);
has_length_or_percentage = true;
continue; continue;
} }
} }
if (RuntimeEnabledFeatures::CSS3TextEnabled()) { if (RuntimeEnabledFeatures::CSS3TextEnabled()) {
CSSValueID id = range.Peek().Id(); CSSValueID id = range.Peek().Id();
if (!has_each_line && id == CSSValueEachLine) { if (!hanging && id == CSSValueHanging) {
list->Append(*CSSPropertyParserHelpers::ConsumeIdent(range)); hanging = CSSPropertyParserHelpers::ConsumeIdent(range);
has_each_line = true;
continue; continue;
} }
if (!has_hanging && id == CSSValueHanging) { if (!each_line && id == CSSValueEachLine) {
list->Append(*CSSPropertyParserHelpers::ConsumeIdent(range)); each_line = CSSPropertyParserHelpers::ConsumeIdent(range);
has_hanging = true;
continue; continue;
} }
} }
return nullptr; return nullptr;
} while (!range.AtEnd()); } while (!range.AtEnd());
if (!has_length_or_percentage) if (!length_percentage)
return nullptr; return nullptr;
CSSValueList* list = CSSValueList::CreateSpaceSeparated();
list->Append(*length_percentage);
if (hanging)
list->Append(*hanging);
if (each_line)
list->Append(*each_line);
return list; return list;
} }
...@@ -69,13 +70,11 @@ const CSSValue* TextIndent::CSSValueFromComputedStyleInternal( ...@@ -69,13 +70,11 @@ const CSSValue* TextIndent::CSSValueFromComputedStyleInternal(
CSSValueList* list = CSSValueList::CreateSpaceSeparated(); CSSValueList* list = CSSValueList::CreateSpaceSeparated();
list->Append(*ComputedStyleUtils::ZoomAdjustedPixelValueForLength( list->Append(*ComputedStyleUtils::ZoomAdjustedPixelValueForLength(
style.TextIndent(), style)); style.TextIndent(), style));
if (RuntimeEnabledFeatures::CSS3TextEnabled() && if (RuntimeEnabledFeatures::CSS3TextEnabled()) {
(style.GetTextIndentLine() == TextIndentLine::kEachLine ||
style.GetTextIndentType() == TextIndentType::kHanging)) {
if (style.GetTextIndentLine() == TextIndentLine::kEachLine)
list->Append(*CSSIdentifierValue::Create(CSSValueEachLine));
if (style.GetTextIndentType() == TextIndentType::kHanging) if (style.GetTextIndentType() == TextIndentType::kHanging)
list->Append(*CSSIdentifierValue::Create(CSSValueHanging)); list->Append(*CSSIdentifierValue::Create(CSSValueHanging));
if (style.GetTextIndentLine() == TextIndentLine::kEachLine)
list->Append(*CSSIdentifierValue::Create(CSSValueEachLine));
} }
return list; return list;
} }
......
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