Skip to content

GitLab

T
tangled
Commit c6a3d4d7 authored by rego@igalia.com's avatar rego@igalia.com
Browse files
Options

Ignore ::first-letter from ancestors in grids and flexboxes 

According to the grid and flexbox specs:
"the ::first-line and ::first-letter pseudo-elements do not apply to
grid/flex containers".
http://dev.w3.org/csswg/css-grid/#grid-containers
http://dev.w3.org/csswg/css-flexbox/#flex-containers

This was almost working right, except in the case that an ancestor was
setting the ::first-letter pseudo-element.

Modified RenderBlock::updateFirstLetter() in order to stop looking for
the first text child when you reach a grid or flexbox.
Added a few more cases to the current tests in order to check this
behavior.

TEST=css3/flexbox/flexbox-ignore-container-firstLetter.html
TEST=fast/css-grid-layout/grid-container-ignore-first-letter.html

BUG=430099

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

git-svn-id: svn://svn.chromium.org/blink/trunk@184858 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 9636ec81
Hide whitespace changes
Inline Side-by-side
Showing with 53 additions and 3 deletions
third_party/WebKit/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt
View file @ c6a3d4d7
...@@ -5,3 +5,8 @@ The first item. ...@@ -5,3 +5,8 @@ The first item.
The second item. The second item.
PASS PASS
The first item.
The second item.
PASS
third_party/WebKit/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter.html
View file @ c6a3d4d7
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<link href="resources/flexbox.css" rel="stylesheet"> <link href="resources/flexbox.css" rel="stylesheet">
<style> <style>
.container::first-letter { line-height: 100px; } .container::first-letter { line-height: 100px; }
.flexbox::first-letter { line-height: 200px; } .flexboxFirstLetter::first-letter { line-height: 200px; }
p { line-height: 20px; } p { line-height: 20px; }
</style> </style>
...@@ -11,6 +11,13 @@ ...@@ -11,6 +11,13 @@
<body onload="checkLayout('.flexbox')"> <body onload="checkLayout('.flexbox')">
<p>This test flex item should ignore container's firstLetter pseudo element.</p> <p>This test flex item should ignore container's firstLetter pseudo element.</p>
<div class="container">
<div class="flexbox flexboxFirstLetter">
<p data-expected-height=20>The first item.</p>
<p data-expected-height=20>The second item.</p>
</div>
</div>
<div class="container"> <div class="container">
<div class="flexbox"> <div class="flexbox">
<p data-expected-height=20>The first item.</p> <p data-expected-height=20>The first item.</p>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-ignore-first-letter-expected.txt
View file @ c6a3d4d7
...@@ -20,3 +20,13 @@ Anonymous item. ...@@ -20,3 +20,13 @@ Anonymous item.
PASS PASS
Anonymous item. Anonymous item.
PASS PASS
The first item.
The second item.
PASS
The first item.
The second item.
PASS
Anonymous item.
PASS
Anonymous item.
PASS
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-ignore-first-letter.html
View file @ c6a3d4d7
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</style> </style>
<script src="../../resources/check-layout.js"></script> <script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid-first-letter');"> <body onload="checkLayout('.grid,.inline-grid');">
<p>This test grid item should ignore grid container's first-letter pseudo-element.</p> <p>This test grid item should ignore grid container's first-letter pseudo-element.</p>
<div class="grid grid-first-letter"> <div class="grid grid-first-letter">
...@@ -55,5 +55,31 @@ ...@@ -55,5 +55,31 @@
</div> </div>
</div> </div>
<div class="container">
<div class="grid">
<div class="item" data-expected-height=20>The first item.</div>
<div class="item" data-expected-height=20>The second item.</div>
</div>
</div>
<div class="container">
<div class="inline-grid">
<div class="item" data-expected-height=20>The first item.</div>
<div class="item" data-expected-height=20>The second item.</div>
</div>
</div>
<div class="container">
<div class="grid" data-expected-height=20>
Anonymous item.
</div>
</div>
<div class="container">
<div class="inline-grid" data-expected-height=20>
Anonymous item.
</div>
</div>
</body> </body>
</html> </html>
third_party/WebKit/Source/core/rendering/RenderBlock.cpp
View file @ c6a3d4d7
...@@ -3766,6 +3766,8 @@ void RenderBlock::updateFirstLetter() ...@@ -3766,6 +3766,8 @@ void RenderBlock::updateFirstLetter()
currChild = currChild->nextSibling(); currChild = currChild->nextSibling();
} else if (currChild->isReplaced() || currChild->isRenderButton() || currChild->isMenuList()) { } else if (currChild->isReplaced() || currChild->isRenderButton() || currChild->isMenuList()) {
break; break;
} else if (currChild->isFlexibleBoxIncludingDeprecated() || currChild->isRenderGrid()) {
return;
} else if (currChild->style()->hasPseudoStyle(FIRST_LETTER) && currChild->canHaveGeneratedChildren()) { } else if (currChild->style()->hasPseudoStyle(FIRST_LETTER) && currChild->canHaveGeneratedChildren()) {
// We found a lower-level node with first-letter, which supersedes the higher-level style // We found a lower-level node with first-letter, which supersedes the higher-level style
firstLetterBlock = currChild; firstLetterBlock = currChild;
...@@ -3775,7 +3777,7 @@ void RenderBlock::updateFirstLetter() ...@@ -3775,7 +3777,7 @@ void RenderBlock::updateFirstLetter()
} }
} }
if (!currChild || !isRenderBlockFlowOrRenderButton(firstLetterBlock)) if (!currChild)
return; return;
// If the child already has style, then it has already been created, so we just want // If the child already has style, then it has already been created, so we just want
......
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