Skip to content

GitLab

T
tangled
Commit 99088fa2 authored by dw.im@samsung.com's avatar dw.im@samsung.com
Browse files
Options

text-align-last only affect to the last line when text-align is justify. 

CSS3 Text spec about text-align-last has been modified
as the property only can affect to the last line when test-align is justify.

http://www.w3.org/TR/css-text-3/#text-align-last-property

BUG=248839

Review URL: https://codereview.chromium.org/59753002

git-svn-id: svn://svn.chromium.org/blink/trunk@179082 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 0762f2cf
Hide whitespace changes
Inline Side-by-side
Showing with 87 additions and 499 deletions
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-align-last/text-align-last-auto-expected.html deleted 100644 → 0
View file @ 0762f2cf
<!DOCTYPE HTML>
<html>
<head>
<link href="text-align-last.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
text-align-last: auto <br><br>
This test checks that text-align-last property works properly.<br>
The last line of each case should be aligned to <b>like the other lines</b>.<br>
</div>
<div dir="ltr" class='testDiv alignStart'>
<p class='testP'>LTR align is start</p>
<p class='testP'>align-last is auto.</p>
</div>
<div dir="ltr" class='testDiv alignEnd'>
<p class='testP'>LTR align is end</p>
<p class='testP'>align-last is auto.</p>
</div>
<div dir="ltr" class='testDiv alignRight'>
<p class='testP'>LTR align is right</p>
<p class='testP'>align-last is auto.</p>
</div>
<div dir="ltr" class='testDiv alignLeft'>
<p class='testP'>LTR align is left</p>
<p class='testP'> align-last is auto.</p>
</div>
<div dir="rtl" class='testDiv alignStart'>
<p class='testP'>RTL align is start</p>
<p class='testP'> align-last is auto.</p>
</div>
<div dir="rtl" class='testDiv alignEnd'>
<p class='testP'>RTL align is end</p>
<p class='testP'>align-last is auto.</p>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-align-last/text-align-last-auto.html deleted 100644 → 0
View file @ 0762f2cf
<!DOCTYPE HTML>
<html>
<head>
<link href="text-align-last.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
text-align-last: auto <br><br>
This test checks that text-align-last property works properly.<br>
The last line of each case should be aligned to <b>like the other lines</b>.<br>
</div>
<div dir="ltr" class='testDiv alignStart alignLastAuto'>LTR align is start align-last is auto.</div>
<div dir="ltr" class='testDiv alignEnd alignLastAuto'>LTR align is end align-last is auto.</div>
<div dir="ltr" class='testDiv alignRight alignLastAuto'>LTR align is right align-last is auto.</div>
<div dir="ltr" class='testDiv alignLeft alignLastAuto'>LTR align is left align-last is auto.</div>
<div dir="rtl" class='testDiv alignStart alignLastAuto'>RTL align is start align-last is auto.</div>
<div dir="rtl" class='testDiv alignEnd alignLastAuto'>RTL align is end align-last is auto.</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-align-last/text-align-last-center-expected.html deleted 100644 → 0
View file @ 0762f2cf
<!DOCTYPE HTML>
<html>
<head>
<link href="text-align-last.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
text-align-last: center <br><br>
This test checks that text-align-last property works properly.<br>
The last line of each case should be aligned to <b>center</b> side.<br>
</div>
<div dir="ltr" class='testDiv alignStart'>
<p class='testP'>LTR align is start</p>
<p class='testP alignCenter'>align-last is center.</p>
</div>
<div dir="ltr" class='testDiv alignEnd'>
<p class='testP'>LTR align is end</p>
<p class='testP alignCenter'>align-last is center.</p>
</div>
<div dir="ltr" class='testDiv alignRight'>
<p class='testP'>LTR align is right</p>
<p class='testP alignCenter'>align-last is center.</p>
</div>
<div dir="ltr" class='testDiv alignLeft'>
<p class='testP'>LTR align is left</p>
<p class='testP alignCenter'> align-last is center.</p>
</div>
<div dir="rtl" class='testDiv alignStart'>
<p class='testP'>RTL align is start</p>
<p class='testP alignCenter'> align-last is center.</p>
</div>
<div dir="rtl" class='testDiv alignEnd'>
<p class='testP'>RTL align is end</p>
<p class='testP alignCenter'>align-last is center.</p>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-align-last/text-align-last-center.html deleted 100644 → 0
View file @ 0762f2cf
<!DOCTYPE HTML>
<html>
<head>
<link href="text-align-last.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
text-align-last: center <br><br>
This test checks that text-align-last property works properly.<br>
The last line of each case should be aligned to <b>center</b> side.<br>
</div>
<div dir="ltr" class='testDiv alignStart alignLastCenter'>LTR align is start align-last is center.</div>
<div dir="ltr" class='testDiv alignEnd alignLastCenter'>LTR align is end align-last is center.</div>
<div dir="ltr" class='testDiv alignRight alignLastCenter'>LTR align is right align-last is center.</div>
<div dir="ltr" class='testDiv alignLeft alignLastCenter'>LTR align is left align-last is center.</div>
<div dir="rtl" class='testDiv alignStart alignLastCenter'>RTL align is start align-last is center.</div>
<div dir="rtl" class='testDiv alignEnd alignLastCenter'>RTL align is end align-last is center.</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-align-last/text-align-last-end-expected.html deleted 100644 → 0
View file @ 0762f2cf
<!DOCTYPE HTML>
<html>
<head>
<link href="text-align-last.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
text-align-last: end <br><br>
This test checks that text-align-last property works properly.<br>
The last line of each case should be aligned to <b>end</b> side.<br>
</div>
<div dir="ltr" class='testDiv alignStart'>
<p class='testP'>LTR align is start</p>
<p class='testP alignEnd'>align-last is end.</p>
</div>
<div dir="ltr" class='testDiv alignEnd'>
<p class='testP'>LTR align is end</p>
<p class='testP alignEnd'>align-last is end.</p>
</div>
<div dir="ltr" class='testDiv alignRight'>
<p class='testP'>LTR align is right</p>
<p class='testP alignEnd'>align-last is end.</p>
</div>
<div dir="ltr" class='testDiv alignLeft'>
<p class='testP'>LTR align is left</p>
<p class='testP alignEnd'> align-last is end.</p>
</div>
<div dir="rtl" class='testDiv alignStart'>
<p class='testP'>RTL align is start</p>
<p class='testP alignEnd'> align-last is end.</p>
</div>
<div dir="rtl" class='testDiv alignEnd'>
<p class='testP'>RTL align is end</p>
<p class='testP alignEnd'>align-last is end.</p>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-align-last/text-align-last-end.html deleted 100644 → 0
View file @ 0762f2cf
<!DOCTYPE HTML>
<html>
<head>
<link href="text-align-last.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
text-align-last: end <br><br>
This test checks that text-align-last property works properly.<br>
The last line of each case should be aligned to <b>end</b> side.<br>
</div>
<div dir="ltr" class='testDiv alignStart alignLastEnd'>LTR align is start align-last is end.</div>
<div dir="ltr" class='testDiv alignEnd alignLastEnd'>LTR align is end align-last is end.</div>
<div dir="ltr" class='testDiv alignRight alignLastEnd'>LTR align is right align-last is end.</div>
<div dir="ltr" class='testDiv alignLeft alignLastEnd'>LTR align is left align-last is end.</div>
<div dir="rtl" class='testDiv alignStart alignLastEnd'>RTL align is start align-last is end.</div>
<div dir="rtl" class='testDiv alignEnd alignLastEnd'>RTL align is end align-last is end.</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-align-last/text-align-last-expected.html 0 → 100644
View file @ 99088fa2
<!DOCTYPE HTML>
<html>
<head>
<style>
.testDiv {
width: 208px;
border: 1px solid #000000;
font-family: Ahem, monospace;
font-size: 1em;
}
</style>
</head>
<body>
<div>
When text-align is justify, the last line would be affected by the value of text-align-last.<br/>
This test checks that text-align-last property works properly.<br/>
</div>
<div class='testDiv' style='text-align:start'>start last</div>
<div class='testDiv' style='text-align:end'>end last</div>
<div class='testDiv' style='text-align:left'>left last</div>
<div class='testDiv' style='text-align:right'>right last</div>
<div class='testDiv' style='text-align:center'>center last</div>
<div class='testDiv' style='text-align:justify'>justify&nbsp; last</div>
<div class='testDiv' style='text-align:start'>start end</div>
<div class='testDiv' style='text-align:end'>end start</div>
<div class='testDiv' style='text-align:left'>left right</div>
<div class='testDiv' style='text-align:right'>right left</div>
<div class='testDiv' style='text-align:center'>center left</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-align-last/text-align-last-left-expected.html deleted 100644 → 0
View file @ 0762f2cf
<!DOCTYPE HTML>
<html>
<head>
<link href="text-align-last.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
text-align-last: left <br><br>
This test checks that text-align-last property works properly.<br>
The last line of each case should be aligned to <b>left</b> side.<br>
</div>
<div dir="ltr" class='testDiv alignStart'>
<p class='testP'>LTR align is start</p>
<p class='testP alignLeft'>align-last is left.</p>
</div>
<div dir="ltr" class='testDiv alignEnd'>
<p class='testP'>LTR align is end</p>
<p class='testP alignLeft'>align-last is left.</p>
</div>
<div dir="ltr" class='testDiv alignRight'>
<p class='testP'>LTR align is right</p>
<p class='testP alignLeft'>align-last is left.</p>
</div>
<div dir="ltr" class='testDiv alignLeft'>
<p class='testP'>LTR align is left</p>
<p class='testP alignLeft'>align-last is left.</p>
</div>
<div dir="rtl" class='testDiv alignStart'>
<p class='testP'>RTL align is start</p>
<p class='testP alignLeft'>align-last is left.</p>
</div>
<div dir="rtl" class='testDiv alignEnd'>
<p class='testP'>RTL align is end</p>
<p class='testP alignLeft'>align-last is left.</p>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-align-last/text-align-last-left.html deleted 100644 → 0
View file @ 0762f2cf
<!DOCTYPE HTML>
<html>
<head>
<link href="text-align-last.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
text-align-last: left <br><br>
This test checks that text-align-last property works properly.<br>
The last line of each case should be aligned to <b>left</b> side.<br>
</div>
<div dir="ltr" class='testDiv alignStart alignLastLeft'>LTR align is start align-last is left.</div>
<div dir="ltr" class='testDiv alignEnd alignLastLeft'>LTR align is end align-last is left.</div>
<div dir="ltr" class='testDiv alignRight alignLastLeft'>LTR align is right align-last is left.</div>
<div dir="ltr" class='testDiv alignLeft alignLastLeft'>LTR align is left align-last is left.</div>
<div dir="rtl" class='testDiv alignStart alignLastLeft'>RTL align is start align-last is left.</div>
<div dir="rtl" class='testDiv alignEnd alignLastLeft'>RTL align is end align-last is left.</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-align-last/text-align-last-right-expected.html deleted 100644 → 0
View file @ 0762f2cf
<!DOCTYPE HTML>
<html>
<head>
<link href="text-align-last.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
text-align-last: right <br><br>
This test checks that text-align-last property works properly.<br>
The last line of each case should be aligned to <b>right</b> side.<br>
</div>
<div dir="ltr" class='testDiv alignStart'>
<p class='testP'>LTR align is start</p>
<p class='testP alignRight'>align-last is right.</p>
</div>
<div dir="ltr" class='testDiv alignEnd'>
<p class='testP'>LTR align is end</p>
<p class='testP alignRight'>align-last is right.</p>
</div>
<div dir="ltr" class='testDiv alignRight'>
<p class='testP'>LTR align is right</p>
<p class='testP alignRight'>align-last is right.</p>
</div>
<div dir="ltr" class='testDiv alignLeft'>
<p class='testP'>LTR align is left</p>
<p class='testP alignRight'> align-last is right.</p>
</div>
<div dir="rtl" class='testDiv alignStart'>
<p class='testP'>RTL align is start</p>
<p class='testP alignRight'> align-last is right.</p>
</div>
<div dir="rtl" class='testDiv alignEnd'>
<p class='testP'>RTL align is end</p>
<p class='testP alignRight'>align-last is right.</p>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-align-last/text-align-last-right.html deleted 100644 → 0
View file @ 0762f2cf
<!DOCTYPE HTML>
<html>
<head>
<link href="text-align-last.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
text-align-last: right <br><br>
This test checks that text-align-last property works properly.<br>
The last line of each case should be aligned to <b>right</b> side.<br>
</div>
<div dir="ltr" class='testDiv alignStart alignLastRight'>LTR align is start align-last is right.</div>
<div dir="ltr" class='testDiv alignEnd alignLastRight'>LTR align is end align-last is right.</div>
<div dir="ltr" class='testDiv alignRight alignLastRight'>LTR align is right align-last is right.</div>
<div dir="ltr" class='testDiv alignLeft alignLastRight'>LTR align is left align-last is right.</div>
<div dir="rtl" class='testDiv alignStart alignLastRight'>RTL align is start align-last is right.</div>
<div dir="rtl" class='testDiv alignEnd alignLastRight'>RTL align is end align-last is right.</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-align-last/text-align-last-start-expected.html deleted 100644 → 0
View file @ 0762f2cf
<!DOCTYPE HTML>
<html>
<head>
<link href="text-align-last.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
text-align-last: start <br><br>
This test checks that text-align-last property works properly.<br>
The last line of each case should be aligned to <b>start</b> side.<br>
</div>
<div dir="ltr" class='testDiv alignStart'>
<p class='testP'>LTR align is start</p>
<p class='testP alignStart'>align-last is start.</p>
</div>
<div dir="ltr" class='testDiv alignEnd'>
<p class='testP'>LTR align is end</p>
<p class='testP alignStart'>align-last is start.</p>
</div>
<div dir="ltr" class='testDiv alignRight'>
<p class='testP'>LTR align is right</p>
<p class='testP alignStart'>align-last is start.</p>
</div>
<div dir="ltr" class='testDiv alignLeft'>
<p class='testP'>LTR align is left</p>
<p class='testP alignStart'> align-last is start.</p>
</div>
<div dir="rtl" class='testDiv alignStart'>
<p class='testP'>RTL align is start</p>
<p class='testP alignStart'> align-last is start.</p>
</div>
<div dir="rtl" class='testDiv alignEnd'>
<p class='testP'>RTL align is end</p>
<p class='testP alignStart'>align-last is start.</p>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-align-last/text-align-last-start.html deleted 100644 → 0
View file @ 0762f2cf
<!DOCTYPE HTML>
<html>
<head>
<link href="text-align-last.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
text-align-last: start <br><br>
This test checks that text-align-last property works properly.<br>
The last line of each case should be aligned to <b>start</b> side.<br>
</div>
<div dir="ltr" class='testDiv alignStart alignLastStart'>LTR align is start align-last is start.</div>
<div dir="ltr" class='testDiv alignEnd alignLastStart'>LTR align is end align-last is start.</div>
<div dir="ltr" class='testDiv alignRight alignLastStart'>LTR align is right align-last is start.</div>
<div dir="ltr" class='testDiv alignLeft alignLastStart'>LTR align is left align-last is start.</div>
<div dir="rtl" class='testDiv alignStart alignLastStart'>RTL align is start align-last is start.</div>
<div dir="rtl" class='testDiv alignEnd alignLastStart'>RTL align is end align-last is start.</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-align-last/text-align-last.css deleted 100644 → 0
View file @ 0762f2cf
@font-face {
font-family: 'testFont';
src: url(../../../resources/Ahem.ttf);
}
.testDiv {
width: 150px;
border: 1px solid #000000;
font-family: testFont;
font-size: 7px;
}
.testP {
border: 0;
margin: 0;
padding: 0;
}
.alignStart {
text-align: start;
}
.alignEnd {
text-align: end;
}
.alignRight {
text-align: right;
}
.alignLeft {
text-align: left;
}
.alignCenter {
text-align: center;
}
.alignLastAuto {
text-align-last: auto;
}
.alignLastStart {
text-align-last: start;
}
.alignLastEnd {
text-align-last: end;
}
.alignLastRight {
text-align-last: right;
}
.alignLastLeft {
text-align-last: left;
}
.alignLastCenter {
text-align-last: center;
}
.alignLastJustify {
text-align-last: justify;
}
third_party/WebKit/LayoutTests/fast/css3-text/css3-text-align-last/text-align-last.html 0 → 100644
View file @ 99088fa2
<!DOCTYPE HTML>
<html>
<head>
<style>
.testDiv {
width: 208px;
border: 1px solid #000000;
font-family: Ahem, monospace;
font-size: 1em;
}
</style>
</head>
<body>
<div>
When text-align is justify, the last line would be affected by the value of text-align-last.<br/>
This test checks that text-align-last property works properly.<br/>
</div>
<div class='testDiv' style='text-align:justify; text-align-last:start'>start last</div>
<div class='testDiv' style='text-align:justify; text-align-last:end'>end last</div>
<div class='testDiv' style='text-align:justify; text-align-last:left'>left last</div>
<div class='testDiv' style='text-align:justify; text-align-last:right'>right last</div>
<div class='testDiv' style='text-align:justify; text-align-last:center'>center last</div>
<div class='testDiv' style='text-align:justify; text-align-last:justify'>justify last</div>
<div class='testDiv' style='text-align:start; text-align-last:end'>start end</div>
<div class='testDiv' style='text-align:end; text-align-last:start'>end start</div>
<div class='testDiv' style='text-align:left; text-align-last:right'>left right</div>
<div class='testDiv' style='text-align:right; text-align-last:left'>right left</div>
<div class='testDiv' style='text-align:center; text-align-last:left'>center left</div>
</body>
</html>
third_party/WebKit/Source/core/rendering/RenderBlockLineLayout.cpp
View file @ 99088fa2
...@@ -269,6 +269,9 @@ ETextAlign RenderBlockFlow::textAlignmentForLine(bool endsWithSoftBreak) const ...@@ -269,6 +269,9 @@ ETextAlign RenderBlockFlow::textAlignmentForLine(bool endsWithSoftBreak) const
if (!RuntimeEnabledFeatures::css3TextEnabled()) if (!RuntimeEnabledFeatures::css3TextEnabled())
return (alignment == JUSTIFY) ? TASTART : alignment; return (alignment == JUSTIFY) ? TASTART : alignment;
if (alignment != JUSTIFY)
return alignment;
TextAlignLast alignmentLast = style()->textAlignLast(); TextAlignLast alignmentLast = style()->textAlignLast();
switch (alignmentLast) { switch (alignmentLast) {
case TextAlignLastStart: case TextAlignLastStart:
...@@ -284,8 +287,6 @@ ETextAlign RenderBlockFlow::textAlignmentForLine(bool endsWithSoftBreak) const ...@@ -284,8 +287,6 @@ ETextAlign RenderBlockFlow::textAlignmentForLine(bool endsWithSoftBreak) const
case TextAlignLastJustify: case TextAlignLastJustify:
return JUSTIFY; return JUSTIFY;
case TextAlignLastAuto: case TextAlignLastAuto:
if (alignment != JUSTIFY)
return alignment;
if (style()->textJustify() == TextJustifyDistribute) if (style()->textJustify() == TextJustifyDistribute)
return JUSTIFY; return JUSTIFY;
return TASTART; return TASTART;
......
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