[webkit-changes] [178822] trunk

Wed, 21 Jan 2015 02:03:24 -0800

Title: [178822] trunk
Revision
178822
Author
[email protected]
Date
2015-01-21 02:02:59 -0800 (Wed, 21 Jan 2015)

Log Message

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:

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.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (178821 => 178822)


--- trunk/LayoutTests/ChangeLog	2015-01-21 08:46:42 UTC (rev 178821)
+++ trunk/LayoutTests/ChangeLog	2015-01-21 10:02:59 UTC (rev 178822)
@@ -1,3 +1,23 @@
+2015-01-21  Manuel Rego Casasnovas  <[email protected]>
+
+        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  <[email protected]>
 
         [Win] Unreviewed gardening.

Modified: trunk/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt (178821 => 178822)


--- trunk/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt	2015-01-21 08:46:42 UTC (rev 178821)
+++ trunk/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt	2015-01-21 10:02:59 UTC (rev 178822)
@@ -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

Modified: trunk/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter.html (178821 => 178822)


--- trunk/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter.html	2015-01-21 08:46:42 UTC (rev 178821)
+++ trunk/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter.html	2015-01-21 10:02:59 UTC (rev 178822)
@@ -2,20 +2,223 @@
 <html>
 <link href="" 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=""
-<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>

Added: trunk/LayoutTests/fast/css/first-letter-from-ancestors-not-apply-inline-elements-expected.html (0 => 178822)


--- trunk/LayoutTests/fast/css/first-letter-from-ancestors-not-apply-inline-elements-expected.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css/first-letter-from-ancestors-not-apply-inline-elements-expected.html	2015-01-21 10:02:59 UTC (rev 178822)
@@ -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>

Added: trunk/LayoutTests/fast/css/first-letter-from-ancestors-not-apply-inline-elements.html (0 => 178822)


--- trunk/LayoutTests/fast/css/first-letter-from-ancestors-not-apply-inline-elements.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css/first-letter-from-ancestors-not-apply-inline-elements.html	2015-01-21 10:02:59 UTC (rev 178822)
@@ -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>

Added: trunk/LayoutTests/fast/css/first-letter-ignores-display-property-expected.html (0 => 178822)


--- trunk/LayoutTests/fast/css/first-letter-ignores-display-property-expected.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css/first-letter-ignores-display-property-expected.html	2015-01-21 10:02:59 UTC (rev 178822)
@@ -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>

Added: trunk/LayoutTests/fast/css/first-letter-ignores-display-property.html (0 => 178822)


--- trunk/LayoutTests/fast/css/first-letter-ignores-display-property.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css/first-letter-ignores-display-property.html	2015-01-21 10:02:59 UTC (rev 178822)
@@ -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>

Modified: trunk/LayoutTests/fast/css-grid-layout/grid-container-ignore-first-letter-expected.txt (178821 => 178822)


--- trunk/LayoutTests/fast/css-grid-layout/grid-container-ignore-first-letter-expected.txt	2015-01-21 08:46:42 UTC (rev 178821)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-container-ignore-first-letter-expected.txt	2015-01-21 10:02:59 UTC (rev 178822)
@@ -5,18 +5,76 @@
 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

Modified: trunk/LayoutTests/fast/css-grid-layout/grid-container-ignore-first-letter.html (178821 => 178822)


--- trunk/LayoutTests/fast/css-grid-layout/grid-container-ignore-first-letter.html	2015-01-21 08:46:42 UTC (rev 178821)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-container-ignore-first-letter.html	2015-01-21 10:02:59 UTC (rev 178822)
@@ -2,58 +2,219 @@
 <html>
 <link href="" 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=""
-<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>
 </html>

Modified: trunk/Source/WebCore/ChangeLog (178821 => 178822)


--- trunk/Source/WebCore/ChangeLog	2015-01-21 08:46:42 UTC (rev 178821)
+++ trunk/Source/WebCore/ChangeLog	2015-01-21 10:02:59 UTC (rev 178822)
@@ -1,3 +1,34 @@
+2015-01-21  Manuel Rego Casasnovas  <[email protected]>
+
+        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  <[email protected]>
 
         Fix cast-align warning in Source/WebCore/platform/efl/EflScreenUtilities.cpp

Modified: trunk/Source/WebCore/rendering/RenderBlock.cpp (178821 => 178822)


--- trunk/Source/WebCore/rendering/RenderBlock.cpp	2015-01-21 08:46:42 UTC (rev 178821)
+++ trunk/Source/WebCore/rendering/RenderBlock.cpp	2015-01-21 10:02:59 UTC (rev 178822)
@@ -3209,6 +3209,12 @@
             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 @@
             firstLetter = current.firstChild();
     }
     
-    if (!firstLetter || !isRenderBlockFlowOrRenderButton(*firstLetterContainer))
+    if (!firstLetter)
         firstLetterContainer = nullptr;
 }
 

_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to