first-letter pseudo-element from ancestors is not being ignored in grids and flexboxes
authorrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 21 Jan 2015 10:02:59 +0000 (10:02 +0000)
committerrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 21 Jan 2015 10:02:59 +0000 (10:02 +0000)
https://bugs.webkit.org/show_bug.cgi?id=138424

Reviewed by Benjamin Poulain.

Source/WebCore:

Source/WebCore:

According to the grid and flexbox specs:
"::first-letter pseudo-element 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

Check also the CSS WG mailing list discussion:
http://lists.w3.org/Archives/Public/www-style/2014Dec/0305.html

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

Added a few more cases to the current tests in order to check this
behavior.
Also created some new tests to increase coverage

Tests: fast/css/first-letter-from-ancestors-not-apply-inline-elements.html
       fast/css/first-letter-ignores-display-property.html

* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::getFirstLetter): Go to the next sibling when
looking for the first text child if you reach a grid or flexbox.

LayoutTests:

Modified current tests to check that first-letter from ancestors is
ignored too.
Added 2 new tests to increase coverage.

* css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt:
* css3/flexbox/flexbox-ignore-container-firstLetter.html:
* fast/css-grid-layout/grid-container-ignore-first-letter-expected.txt:
* fast/css-grid-layout/grid-container-ignore-first-letter.html:
* fast/css/first-letter-from-ancestors-not-apply-inline-elements-expected.html: Added.
* fast/css/first-letter-from-ancestors-not-apply-inline-elements.html: Added.
* fast/css/first-letter-ignores-display-property-expected.html: Added.
* fast/css/first-letter-ignores-display-property.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@178822 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt
LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter.html
LayoutTests/fast/css-grid-layout/grid-container-ignore-first-letter-expected.txt
LayoutTests/fast/css-grid-layout/grid-container-ignore-first-letter.html
LayoutTests/fast/css/first-letter-from-ancestors-not-apply-inline-elements-expected.html [new file with mode: 0644]
LayoutTests/fast/css/first-letter-from-ancestors-not-apply-inline-elements.html [new file with mode: 0644]
LayoutTests/fast/css/first-letter-ignores-display-property-expected.html [new file with mode: 0644]
LayoutTests/fast/css/first-letter-ignores-display-property.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBlock.cpp

index f7a6b45..886d3f0 100644 (file)
@@ -1,3 +1,23 @@
+2015-01-21  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        first-letter pseudo-element from ancestors is not being ignored in grids and flexboxes
+        https://bugs.webkit.org/show_bug.cgi?id=138424
+
+        Reviewed by Benjamin Poulain.
+
+        Modified current tests to check that first-letter from ancestors is
+        ignored too.
+        Added 2 new tests to increase coverage.
+
+        * css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt:
+        * css3/flexbox/flexbox-ignore-container-firstLetter.html:
+        * fast/css-grid-layout/grid-container-ignore-first-letter-expected.txt:
+        * fast/css-grid-layout/grid-container-ignore-first-letter.html:
+        * fast/css/first-letter-from-ancestors-not-apply-inline-elements-expected.html: Added.
+        * fast/css/first-letter-from-ancestors-not-apply-inline-elements.html: Added.
+        * fast/css/first-letter-ignores-display-property-expected.html: Added.
+        * fast/css/first-letter-ignores-display-property.html: Added.
+
 2015-01-20  Brent Fulgham  <bfulgham@apple.com>
 
         [Win] Unreviewed gardening.
index 1c2e618..5d31332 100644 (file)
@@ -1,7 +1,80 @@
 This test flex item should ignore container's firstLetter pseudo element.
 
 The first item.
-
 The second item.
-
+PASS
+The first item.
+The second item.
+ PASS
+Anonymous item.
+PASS
+Anonymous item.
+PASS
+The first item.
+The second item.
+Out of flexbox.
+PASS
+The first item.
+The second item.
+Out of flexbox.
+PASS
+The first item.
+The second item.
+Out of flexbox.
+PASS
+The first item.
+The second item.
+Out of flexbox.
+PASS
+Anonymous item.
+Out of flexbox.
+PASS
+Anonymous item.
+Out of flexbox.
+PASS
+The first item.
+The second item.
+Out of flexbox.
+PASS
+The first item.
+The second item.
+Out of flexbox.
+PASS
+The first item.
+The second item.
+Out of flexbox.
+PASS
+The first item.
+The second item.
+Out of flexbox.
+PASS
+Anonymous item.
+Out of flexbox.
+PASS
+Anonymous item.
+Out of flexbox.
+PASS
+Out of flexbox.
+PASS
+Out of flexbox.
+PASS
+Out of flexbox.
+PASS
+Out of flexbox.
+PASS
+Out of flexbox.
+PASS
+Out of flexbox.
+PASS
+Out of flexbox.
+PASS
+Out of flexbox.
+PASS
+Out of flexbox.
+PASS
+Out of flexbox.
+PASS
+Out of flexbox.
+PASS
+Out of flexbox.
 PASS
index 48aa5bb..1a6f3fc 100644 (file)
 <html>
 <link href="resources/flexbox.css" rel="stylesheet">
 <style>
-    .container::first-letter { line-height: 100px; }
-    .flexbox::first-letter { line-height: 200px; }
-    p { line-height: 20px; }
+    body {
+        line-height: 20px;
+    }
+
+    .flexbox-first-letter::first-letter {
+        line-height: 100px;
+        color: red;
+    }
+
+    .container-first-letter::first-letter {
+        line-height: 200px;
+        color: green;
+    }
+
+    .float {
+        float: left;
+    }
+
+    .flexbox-before::before {
+        content: "Anonymous item.";
+        display: -webkit-flex;
+        display: flex;
+    }
+
+    .flexbox-after::before {
+        content: "Anonymous item.";
+        display: -webkit-flex;
+        display: flex;
+    }
+
+    .inline-flexbox-before::before {
+        content: "Anonymous item.";
+        display: -webkit-inline-flex;
+        display: inline-flex;
+    }
+
+    .inline-flexbox-after::before {
+        content: "Anonymous item.";
+        display: -webkit-inline-flex;
+        display: inline-flex;
+    }
+
+    .before-after-first-letter::first-letter {
+        line-height: 50px;
+        color: blue;
+    }
 </style>
 
 <script src="../../resources/check-layout.js"></script>
-<body onload="checkLayout('.flexbox')">
+<body onload="checkLayout('.container')">
 <p>This test flex item should ignore container's firstLetter pseudo element.</p>
 
 <div class="container">
+    <div class="flexbox flexbox-first-letter">
+        <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-flexbox flexbox-first-letter">
+        <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="flexbox flexbox-first-letter" data-expected-height=20>
+        Anonymous item.
+    </div>
+</div>
+
+<div class="container">
+    <div class="inline-flexbox flexbox-first-letter" data-expected-height=20>
+        Anonymous item.
+    </div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="flexbox flexbox-first-letter">
+        <div class="item" data-expected-height=20>The first item.</div>
+        <div class="item" data-expected-height=20>The second item.</div>
+    </div>
+    <div data-expected-height=200>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="inline-flexbox flexbox-first-letter">
+        <div class="item" data-expected-height=20>The first item.</div>
+        <div class="item" data-expected-height=20>The second item.</div>
+    </div>
+    <div data-expected-height=20>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="flexbox flexbox-first-letter float">
+        <div class="item" data-expected-height=20>The first item.</div>
+        <div class="item" data-expected-height=20>The second item.</div>
+    </div>
+    <div data-expected-height=200>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="inline-flexbox flexbox-first-letter float">
+        <div class="item" data-expected-height=20>The first item.</div>
+        <div class="item" data-expected-height=20>The second item.</div>
+    </div>
+    <div data-expected-height=200>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="flexbox flexbox-first-letter" data-expected-height=20>
+        Anonymous item.
+    </div>
+    <div data-expected-height=200>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="inline-flexbox flexbox-first-letter" data-expected-height=20>
+        Anonymous item.
+    </div>
+    <div data-expected-height=20>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
     <div class="flexbox">
-        <p data-expected-height=20>The first item.</p>
-        <p data-expected-height=20>The second item.</p>
+        <div class="item" data-expected-height=20>The first item.</div>
+        <div class="item" data-expected-height=20>The second item.</div>
     </div>
+    <div data-expected-height=200>Out of flexbox.</div>
 </div>
+
+<div class="container container-first-letter">
+    <div class="inline-flexbox">
+        <div class="item" data-expected-height=20>The first item.</div>
+        <div class="item" data-expected-height=20>The second item.</div>
+    </div>
+    <div data-expected-height=20>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="flexbox float">
+        <div class="item" data-expected-height=20>The first item.</div>
+        <div class="item" data-expected-height=20>The second item.</div>
+    </div>
+    <div data-expected-height=200>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="inline-flexbox float">
+        <div class="item" data-expected-height=20>The first item.</div>
+        <div class="item" data-expected-height=20>The second item.</div>
+    </div>
+    <div data-expected-height=200>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="flexbox" data-expected-height=20>
+        Anonymous item.
+    </div>
+    <div data-expected-height=200>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="inline-flexbox" data-expected-height=20>
+        Anonymous item.
+    </div>
+    <div data-expected-height=20>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="flexbox-before" data-expected-height=220>Out of flexbox.</div>
+</div>
+
+<div class="container">
+    <div class="flexbox-before before-after-first-letter" data-expected-height=70>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="flexbox-before before-after-first-letter" data-expected-height=70>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="flexbox-after" data-expected-height=220>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="flexbox-after before-after-first-letter" data-expected-height=70>Out of flexbox.</div>
+</div>
+
+<div class="container">
+    <div class="flexbox-after before-after-first-letter" data-expected-height=70>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="inline-flexbox-before" data-expected-height=20>Out of flexbox.</div>
+</div>
+
+<div class="container">
+    <div class="inline-flexbox-before before-after-first-letter" data-expected-height=20>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="inline-flexbox-before before-after-first-letter" data-expected-height=20>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="inline-flexbox-after" data-expected-height=20>Out of flexbox.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="inline-flexbox-after before-after-first-letter" data-expected-height=20>Out of flexbox.</div>
+</div>
+
+<div class="container">
+    <div class="inline-flexbox-after before-after-first-letter" data-expected-height=20>Out of flexbox.</div>
+</div>
+
 </body>
 </html>
index 8f9afac..984465a 100644 (file)
@@ -5,18 +5,76 @@ The second item.
 PASS
 The first item.
 The second item.
+ PASS
+Anonymous item.
+PASS
+Anonymous item.
+PASS
+The first item.
+The second item.
+Out of grid.
+PASS
+The first item.
+The second item.
+Out of grid.
+PASS
+The first item.
+The second item.
+Out of grid.
+PASS
+The first item.
+The second item.
+Out of grid.
 PASS
 Anonymous item.
+Out of grid.
 PASS
 Anonymous item.
+Out of grid.
 PASS
 The first item.
 The second item.
+Out of grid.
 PASS
 The first item.
 The second item.
- PASS
+Out of grid.
+PASS
+The first item.
+The second item.
+Out of grid.
+PASS
+The first item.
+The second item.
+Out of grid.
+PASS
 Anonymous item.
+Out of grid.
 PASS
 Anonymous item.
+Out of grid.
+PASS
+Out of grid.
+PASS
+Out of grid.
+PASS
+Out of grid.
+PASS
+Out of grid.
+PASS
+Out of grid.
+PASS
+Out of grid.
+PASS
+Out of grid.
+PASS
+Out of grid.
+PASS
+Out of grid.
+PASS
+Out of grid.
+PASS
+Out of grid.
+PASS
+Out of grid.
 PASS
index 15b2f43..4e06f4e 100644 (file)
 <html>
 <link href="resources/grid.css" rel="stylesheet">
 <style>
-    body { line-height: 20px; }
-    .grid-first-letter::first-letter { line-height: 100px; color: red; }
-    .container::first-letter { line-height: 200px; color: green; }
+    body {
+        line-height: 20px;
+    }
+
+    .grid-first-letter::first-letter {
+        line-height: 100px;
+        color: red;
+    }
+
+    .container-first-letter::first-letter {
+        line-height: 200px;
+        color: green;
+    }
+
+    .float {
+        float: left;
+    }
+
+    .grid-before::before {
+        content: "Anonymous item.";
+        display: -webkit-grid;
+    }
+
+    .grid-after::before {
+        content: "Anonymous item.";
+        display: -webkit-grid;
+    }
+
+    .inline-grid-before::before {
+        content: "Anonymous item.";
+        display: -webkit-inline-grid;
+    }
+
+    .inline-grid-after::before {
+        content: "Anonymous item.";
+        display: -webkit-inline-grid;
+    }
+
+    .before-after-first-letter::first-letter {
+        line-height: 50px;
+        color: blue;
+    }
 </style>
 
 <script src="../../resources/check-layout.js"></script>
-<body onload="checkLayout('.grid-first-letter');">
+<body onload="checkLayout('.container');">
 <p>This test grid item should ignore grid container's first-letter pseudo-element.</p>
 
-<div class="grid grid-first-letter">
-    <div class="item" data-expected-height=20>The first item.</div>
-    <div class="item" data-expected-height=20>The second item.</div>
+<div class="container">
+    <div class="grid grid-first-letter">
+        <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="inline-grid grid-first-letter">
-    <div class="item" data-expected-height=20>The first item.</div>
-    <div class="item" data-expected-height=20>The second item.</div>
+<div class="container">
+    <div class="inline-grid grid-first-letter">
+        <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="grid grid-first-letter" data-expected-height=20>
-    Anonymous item.
+<div class="container">
+    <div class="grid grid-first-letter" data-expected-height=20>
+        Anonymous item.
+    </div>
 </div>
 
-<div class="inline-grid grid-first-letter" data-expected-height=20>
-    Anonymous item.
+<div class="container">
+    <div class="inline-grid grid-first-letter" data-expected-height=20>
+        Anonymous item.
+    </div>
 </div>
 
-<div class="container">
+<div class="container container-first-letter">
     <div class="grid grid-first-letter">
         <div class="item" data-expected-height=20>The first item.</div>
         <div class="item" data-expected-height=20>The second item.</div>
     </div>
+    <div data-expected-height=200>Out of grid.</div>
 </div>
 
-<div class="container">
+<div class="container container-first-letter">
     <div class="inline-grid grid-first-letter">
         <div class="item" data-expected-height=20>The first item.</div>
         <div class="item" data-expected-height=20>The second item.</div>
     </div>
+    <div data-expected-height=20>Out of grid.</div>
 </div>
 
-<div class="container">
+<div class="container container-first-letter">
+    <div class="grid grid-first-letter float">
+        <div class="item" data-expected-height=20>The first item.</div>
+        <div class="item" data-expected-height=20>The second item.</div>
+    </div>
+    <div data-expected-height=200>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="inline-grid grid-first-letter float">
+        <div class="item" data-expected-height=20>The first item.</div>
+        <div class="item" data-expected-height=20>The second item.</div>
+    </div>
+    <div data-expected-height=200>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
     <div class="grid grid-first-letter" data-expected-height=20>
         Anonymous item.
     </div>
+    <div data-expected-height=200>Out of grid.</div>
 </div>
 
-<div class="container">
+<div class="container container-first-letter">
     <div class="inline-grid grid-first-letter" data-expected-height=20>
         Anonymous item.
     </div>
+    <div data-expected-height=20>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+    <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 data-expected-height=200>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+    <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 data-expected-height=20>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="grid float">
+        <div class="item" data-expected-height=20>The first item.</div>
+        <div class="item" data-expected-height=20>The second item.</div>
+    </div>
+    <div data-expected-height=200>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="inline-grid float">
+        <div class="item" data-expected-height=20>The first item.</div>
+        <div class="item" data-expected-height=20>The second item.</div>
+    </div>
+    <div data-expected-height=200>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="grid" data-expected-height=20>
+        Anonymous item.
+    </div>
+    <div data-expected-height=200>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="inline-grid" data-expected-height=20>
+        Anonymous item.
+    </div>
+    <div data-expected-height=20>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="grid-before" data-expected-height=220>Out of grid.</div>
+</div>
+
+<div class="container">
+    <div class="grid-before before-after-first-letter" data-expected-height=70>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="grid-before before-after-first-letter" data-expected-height=70>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="grid-after" data-expected-height=220>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="grid-after before-after-first-letter" data-expected-height=70>Out of grid.</div>
+</div>
+
+<div class="container">
+    <div class="grid-after before-after-first-letter" data-expected-height=70>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="inline-grid-before" data-expected-height=20>Out of grid.</div>
+</div>
+
+<div class="container">
+    <div class="inline-grid-before before-after-first-letter" data-expected-height=20>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="inline-grid-before before-after-first-letter" data-expected-height=20>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="inline-grid-after" data-expected-height=20>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+    <div class="inline-grid-after before-after-first-letter" data-expected-height=20>Out of grid.</div>
+</div>
+
+<div class="container">
+    <div class="inline-grid-after before-after-first-letter" data-expected-height=20>Out of grid.</div>
 </div>
 
 </body>
diff --git a/LayoutTests/fast/css/first-letter-from-ancestors-not-apply-inline-elements-expected.html b/LayoutTests/fast/css/first-letter-from-ancestors-not-apply-inline-elements-expected.html
new file mode 100644 (file)
index 0000000..fbab3b2
--- /dev/null
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<body>
+<p>This test checks that inline elements cannot be the first letter of an ancestor element.</p>
+<p>The tests passes if you see all the letters black and you see no red.</p>
+
+<div>
+    <div style="display: inline-block;">Text</div>
+    Out
+</div>
+
+<div>
+    <button>Text</button>
+    Out
+</div>
+
+<div>
+    <select>
+        <option>Text</option>
+    </select>
+    Out
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css/first-letter-from-ancestors-not-apply-inline-elements.html b/LayoutTests/fast/css/first-letter-from-ancestors-not-apply-inline-elements.html
new file mode 100644 (file)
index 0000000..142f5b4
--- /dev/null
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<style>
+    .first-letter::first-letter {
+        color: red;
+    }
+</style>
+
+<body>
+<p>This test checks that inline elements cannot be the first letter of an ancestor element.</p>
+<p>The tests passes if you see all the letters black and you see no red.</p>
+
+<div class="first-letter">
+    <div style="display: inline-block;">Text</div>
+    Out
+</div>
+
+<div class="first-letter">
+    <button>Text</button>
+    Out
+</div>
+
+<div class="first-letter">
+    <select>
+        <option>Text</option>
+    </select>
+    Out
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css/first-letter-ignores-display-property-expected.html b/LayoutTests/fast/css/first-letter-ignores-display-property-expected.html
new file mode 100644 (file)
index 0000000..54b894d
--- /dev/null
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<style>
+    div::first-letter {
+        color: green;
+    }
+</style>
+
+<body>
+<p>This test checks that display property is ignored in ::first-letter pseudo-element.</p>
+<p>The tests passes if you see 5 lines with "Text" and the first letter green.</p>
+
+<div>
+    Text
+</div>
+
+<div>
+    Text
+</div>
+
+<div>
+    Text
+</div>
+
+<div>
+    Text
+</div>
+
+<div>
+    Text
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css/first-letter-ignores-display-property.html b/LayoutTests/fast/css/first-letter-ignores-display-property.html
new file mode 100644 (file)
index 0000000..8bc22e9
--- /dev/null
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<style>
+    .none::first-letter {
+        color: green;
+        display: none;
+    }
+
+    .block::first-letter {
+        color: green;
+        display: block;
+    }
+
+    .table::first-letter {
+        color: green;
+        display: table;
+    }
+
+    .flex::first-letter {
+        color: green;
+        display: -webkit-flex;
+        display: flex;
+    }
+
+    .grid::first-letter {
+        color: green;
+        display: -webkit-grid;
+        display: grid;
+    }
+</style>
+
+<body>
+<p>This test checks that display property is ignored in ::first-letter pseudo-element.</p>
+<p>The tests passes if you see 5 lines with "Text" and the first letter green.</p>
+
+<div class="none">
+    Text
+</div>
+
+<div class="block">
+    Text
+</div>
+
+<div class="table">
+    Text
+</div>
+
+<div class="flex">
+    Text
+</div>
+
+<div class="grid">
+    Text
+</div>
+
+</body>
+</html>
index 53c8eb5..61369cf 100644 (file)
@@ -1,3 +1,34 @@
+2015-01-21  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        first-letter pseudo-element from ancestors is not being ignored in grids and flexboxes
+        https://bugs.webkit.org/show_bug.cgi?id=138424
+
+        Reviewed by Benjamin Poulain.
+
+        Source/WebCore:
+
+        According to the grid and flexbox specs:
+        "::first-letter pseudo-element 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
+
+        Check also the CSS WG mailing list discussion:
+        http://lists.w3.org/Archives/Public/www-style/2014Dec/0305.html
+
+        This was almost working right, except in the case that an ancestor was
+        setting the ::first-letter pseudo-element.
+
+        Added a few more cases to the current tests in order to check this
+        behavior.
+        Also created some new tests to increase coverage
+
+        Tests: fast/css/first-letter-from-ancestors-not-apply-inline-elements.html
+               fast/css/first-letter-ignores-display-property.html
+
+        * rendering/RenderBlock.cpp:
+        (WebCore::RenderBlock::getFirstLetter): Go to the next sibling when
+        looking for the first text child if you reach a grid or flexbox.
+
 2015-01-21  Csaba Osztrogon√°c  <ossy@webkit.org>
 
         Fix cast-align warning in Source/WebCore/platform/efl/EflScreenUtilities.cpp
index f94317e..a907b4f 100644 (file)
@@ -3209,6 +3209,12 @@ void RenderBlock::getFirstLetter(RenderObject*& firstLetter, RenderElement*& fir
             firstLetter = current.nextSibling();
         } else if (current.isReplaced() || is<RenderButton>(current) || is<RenderMenuList>(current))
             break;
+        else if (current.isFlexibleBoxIncludingDeprecated()
+#if ENABLE(CSS_GRID_LAYOUT)
+            || current.isRenderGrid()
+#endif
+            )
+            firstLetter = current.nextSibling();
         else if (current.style().hasPseudoStyle(FIRST_LETTER) && current.canHaveGeneratedChildren())  {
             // We found a lower-level node with first-letter, which supersedes the higher-level style
             firstLetterContainer = &current;
@@ -3217,7 +3223,7 @@ void RenderBlock::getFirstLetter(RenderObject*& firstLetter, RenderElement*& fir
             firstLetter = current.firstChild();
     }
     
-    if (!firstLetter || !isRenderBlockFlowOrRenderButton(*firstLetterContainer))
+    if (!firstLetter)
         firstLetterContainer = nullptr;
 }