Skip to content

GitLab

T
tangled
Commit 99bd0129 authored by mario.prada@samsung.com's avatar mario.prada@samsung.com
Browse files
Options

Apply the correct style to first-letter pseudo elements composed of different renderers 

Traverse (in preorder) the whole subtree under a render block with a first-letter selector when
looking for the text renderers which would need to get the apropriate style applied, instead of
only considering the first renderer only, which might not contain all the text that should be
considered as a "first letter" (leading and trailing punctuation should be included too).

The present patch also considers leading spaces, if any, as part of the first-letter element,
to match the behaviour of other renderers such as IE and Opera (Firefox does not do that).

R=eae@chromium.org, leviw@chromium.org
BUG=354403
TEST=Add new test to check first-letter elements composed of different renderers.

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

git-svn-id: svn://svn.chromium.org/blink/trunk@170677 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 16cc0cd2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 351 additions and 103 deletions
third_party/WebKit/LayoutTests/editing/selection/extend-by-word-002-expected.txt
View file @ 99bd0129
...@@ -2,7 +2,7 @@ PASS selection.type is "Range" ...@@ -2,7 +2,7 @@ PASS selection.type is "Range"
PASS selection.anchorNode is $("test").querySelectorAll("li")[0].childNodes[0] PASS selection.anchorNode is $("test").querySelectorAll("li")[0].childNodes[0]
PASS selection.anchorOffset is 0 PASS selection.anchorOffset is 0
PASS selection.focusNode is $("test").querySelectorAll("li a")[3].firstChild PASS selection.focusNode is $("test").querySelectorAll("li a")[3].firstChild
PASS selection.focusOffset is 4 PASS selection.focusOffset is 5
PASS successfullyParsed is true PASS successfullyParsed is true
TEST COMPLETE TEST COMPLETE
......
third_party/WebKit/LayoutTests/editing/selection/extend-by-word-002.html
View file @ 99bd0129
...@@ -65,7 +65,7 @@ shouldBeEqualToString('selection.type', 'Range'); ...@@ -65,7 +65,7 @@ shouldBeEqualToString('selection.type', 'Range');
shouldBe('selection.anchorNode', '$("test").querySelectorAll("li")[0].childNodes[0]'); shouldBe('selection.anchorNode', '$("test").querySelectorAll("li")[0].childNodes[0]');
shouldBe('selection.anchorOffset', '0'); shouldBe('selection.anchorOffset', '0');
shouldBe('selection.focusNode', '$("test").querySelectorAll("li a")[3].firstChild'); shouldBe('selection.focusNode', '$("test").querySelectorAll("li a")[3].firstChild');
shouldBe('selection.focusOffset', '4'); shouldBe('selection.focusOffset', '5');
if (window.testRunner) if (window.testRunner)
$('container').outerHTML = ''; $('container').outerHTML = '';
</script> </script>
......
third_party/WebKit/LayoutTests/fast/css-generated-content/quote-first-letter-expected.html
View file @ 99bd0129
<!DOCTYPE html> <!DOCTYPE html>
<style> <style>
.quote:first-letter { color: red; } .line:first-letter { color: red; }
.line { position: absolute; top: 50px; left: 10px; } .line { position: absolute; top: 50px; left: 10px; }
</style> </style>
" " " "
<span class="line"> <span class="line">
<span class="quote">'</span>Should not crash or assert and all four quotes should be displayed.' 'Should not crash or assert and all four quotes should be displayed.'
</span> </span>
third_party/WebKit/LayoutTests/fast/css/first-letter-different-renderers-expected.html 0 → 100644
View file @ 99bd0129
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 { margin: 8px 0px; font-size: 18px; }
div, p, ul { margin: 0px; font-size: 14px; }
.bigRedText, .bigRedText a { font-size:16px; font-weight: bold; color: red; }
ul li { list-style-type: none; }
</style>
</head>
<body>
<div>
<h1>Paragraphs with only one character</h1>
<div>
<p><span class="bigRedText">A</span></p>
<p><span class="bigRedText"><b>B</b></span></p>
<p><span class="bigRedText"><em><b>C</b></em></span></p>
</div>
<h1>Paragraphs with leading spaces</h1>
<div>
<p><span class="bigRedText">&nbsp;A</span>ppetizers</p>
<p><span class="bigRedText">&nbsp;S</span><a href="#">tarters:</a> Soups & Salads</p>
<p><span class="bigRedText">&nbsp; &nbsp; M</span>ain Course: <a href="#">Pasta</a></p>
<p><span class="bigRedText">&nbsp;&nbsp;&nbsp; D</span>essert: <a href="#">Pasta</a></p>
</div>
<h1>Multiple paragraphs inside nested blocks (only the first one should get the first-letter)</h1>
<div class="testDiv">
<div>
<p><span class="bigRedText">&ldquo;(A)&rdquo;:</span> Appetizers</p>
<p>&ldquo;(<a href="#">B</a>)&rdquo;: <a href="#">Starters:</a> Soups & Salads</p>
<p>&ldquo;<b>(</b><a href="#">C</a><b>)</b>&rdquo;: Main Course: <a href="#">Pasta</a></p>
</div>
</div>
<h1>List with spaces after the leading dot</h1>
<ul>
<li>&middot; Appetizers</li>
<li>&middot; <a href="#">Starters:</a> Soups & Salads</li>
<li>&middot; Main Course: <a href="#">Pasta</a></li>
</ul>
<h1>List without spaces after the leading dot</h1>
<ul>
<li><span class="bigRedText">&middot;A</span>ppetizers</li>
<li><span class="bigRedText">&middot;S</span><a href="#">tarters:</a> Soups & Salads</li>
<li><span class="bigRedText">&middot;M</span>ain Course: <a href="#">Pasta</a></li>
</ul>
<h1>first-letter with multiple punctuation characters</h1>
<ul>
<li><span class="bigRedText">&ldquo;(A)&rdquo;:</span> Appetizers</li>
<li><span class="bigRedText">&ldquo;(B)&rdquo;:</span> <a href="#">Starters:</a> Soups & Salads</li>
<li><span class="bigRedText">&ldquo;(C)&rdquo;:</span> Main Course: <a href="#">Pasta</a></li>
<li><span class="bigRedText">&#34;<b>(</b>D<b>)</b>&#34;:</span> Desserts</li> </ul>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css/first-letter-different-renderers.html 0 → 100644
View file @ 99bd0129
<html>
<head>
<style>
h1 { margin: 8px 0px; font-size: 18px; }
div, p, ul { margin: 0px; font-size: 14px; }
.firstLetterBlock:first-letter, ul li:first-letter { font-size:16px; font-weight: bold; color: red; }
ul li { list-style-type: none; }
</style>
</head>
<body>
<div>
<h1>Paragraphs with only one character</h1>
<div>
<p class="firstLetterBlock">A</p>
<p class="firstLetterBlock"><b>B</b></p>
<p class="firstLetterBlock"><em><b>C</b></em></p>
</div>
<h1>Paragraphs with leading spaces</h1>
<div>
<p class="firstLetterBlock">&nbsp;Appetizers</p>
<p class="firstLetterBlock">&nbsp;<a href="#">Starters:</a> Soups & Salads</p>
<p class="firstLetterBlock">&nbsp; &nbsp; Main Course: <a href="#">Pasta</a></p>
<p class="firstLetterBlock">&nbsp;<a ref="#">&nbsp;</a>&nbsp; Dessert: <a href="#">Pasta</a></p>
</div>
<h1>Multiple paragraphs inside nested blocks (only the first one should get the first-letter)</h1>
<div class="firstLetterBlock">
<div>
<p>&ldquo;(A)&rdquo;: Appetizers</p>
<p>&ldquo;(<a href="#">B</a>)&rdquo;: <a href="#">Starters:</a> Soups & Salads</p>
<p>&ldquo;<b>(</b><a href="#">C</a><b>)</b>&rdquo;: Main Course: <a href="#">Pasta</a></p>
</div>
</div>
<h1>List with spaces after the leading dot</h1>
<ul>
<li>&middot; Appetizers</li>
<li>&middot;&nbsp;<a href="#">Starters:</a> Soups & Salads</li>
<li>&middot; Main Course: <a href="#">Pasta</a></li>
</ul>
<h1>List without spaces after the leading dot</h1>
<ul>
<li>&middot;Appetizers</li>
<li>&middot;<a href="#">Starters:</a> Soups & Salads</li>
<li>&middot;Main Course: <a href="#">Pasta</a></li>
</ul>
<h1>first-letter with multiple punctuation characters</h1>
<ul>
<li>&ldquo;(A)&rdquo;: Appetizers</li>
<li>&ldquo;(<a href="#">B</a>)&rdquo;: <a href="#">Starters:</a> Soups & Salads</li>
<li>&ldquo;<b>(</b><a href="#">C</a><b>)</b>&rdquo;: Main Course: <a href="#">Pasta</a></li>
<li><q><b>(</b><a href="#">D</a><b>)</b></q>: Desserts</li>
</ul>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css/first-letter-punctuation-expected.html
View file @ 99bd0129
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
.bigGreenText .bigGreenText
{ {
color: green; color: green;
font-size: 36px; font-size: 26px;
} }
</style> </style>
</head> </head>
...@@ -16,8 +16,14 @@ ...@@ -16,8 +16,14 @@
<div><span class="bigGreenText">&nbsp;T</span>est&nbsp;</div> <div><span class="bigGreenText">&nbsp;T</span>est&nbsp;</div>
<div><span class="bigGreenText">(T)</span>est</div> <div><span class="bigGreenText">(T)</span>est</div>
<div><span class="bigGreenText">(T</span>est)</div>
<div><span class="bigGreenText">&nbsp;(T)</span>est</div> <div><span class="bigGreenText">&nbsp;(T)</span>est</div>
<div><span class="bigGreenText">&nbsp;(T</span>est)</div>
<div><span class="bigGreenText">&ldquo;T&rdquo;</span>est</div> <div><span class="bigGreenText">&ldquo;T&rdquo;</span>est</div>
<div><span class="bigGreenText">&ldquo;T</span>est&rdquo;</div>
<div><span class="bigGreenText">&#34;T&#34;</span>est</div>
<div><span class="bigGreenText">&#34;T</span>est&#34;</div>
<div><span class="bigGreenText">&amp;T</span>est</div> <div><span class="bigGreenText">&amp;T</span>est</div>
<div><span class="bigGreenText">&nbsp;&amp;T</span>est</div> <div><span class="bigGreenText">&nbsp;&amp;T</span>est</div>
......
third_party/WebKit/LayoutTests/fast/css/first-letter-punctuation.html
View file @ 99bd0129
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
div:first-letter div:first-letter
{ {
color: green; color: green;
font-size: 36px; font-size: 26px;
} }
</style> </style>
</head> </head>
...@@ -16,8 +16,14 @@ ...@@ -16,8 +16,14 @@
<div>&nbsp;Test&nbsp;</div> <div>&nbsp;Test&nbsp;</div>
<div>(T)est</div> <div>(T)est</div>
<div>(Test)</div>
<div>&nbsp;(T)est</div> <div>&nbsp;(T)est</div>
<div>&nbsp;(Test)</div>
<div>&ldquo;T&rdquo;est</div> <div>&ldquo;T&rdquo;est</div>
<div>&ldquo;Test&rdquo;</div>
<div><q>T</q>est</div>
<div><q>Test</q></div>
<div>&amp;Test</div> <div>&amp;Test</div>
<div>&nbsp;&amp;Test</div> <div>&nbsp;&amp;Test</div>
......
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