Changeset 178822 in webkit


Ignore:
Timestamp:
Jan 21, 2015 2:02:59 AM (9 years ago)
Author:
Manuel Rego Casasnovas
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.
Location:
trunk
Files:
4 added
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r178808 r178822  
     12015-01-21  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        first-letter pseudo-element from ancestors is not being ignored in grids and flexboxes
     4        https://bugs.webkit.org/show_bug.cgi?id=138424
     5
     6        Reviewed by Benjamin Poulain.
     7
     8        Modified current tests to check that first-letter from ancestors is
     9        ignored too.
     10        Added 2 new tests to increase coverage.
     11
     12        * css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt:
     13        * css3/flexbox/flexbox-ignore-container-firstLetter.html:
     14        * fast/css-grid-layout/grid-container-ignore-first-letter-expected.txt:
     15        * fast/css-grid-layout/grid-container-ignore-first-letter.html:
     16        * fast/css/first-letter-from-ancestors-not-apply-inline-elements-expected.html: Added.
     17        * fast/css/first-letter-from-ancestors-not-apply-inline-elements.html: Added.
     18        * fast/css/first-letter-ignores-display-property-expected.html: Added.
     19        * fast/css/first-letter-ignores-display-property.html: Added.
     20
    1212015-01-20  Brent Fulgham  <bfulgham@apple.com>
    222

  • trunk/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt

    r143993 r178822  
    22
    33The first item.
    4 
    54The second item.
    6 
    75PASS
     6The first item.
     7The second item.
     8 PASS
     9Anonymous item.
     10PASS
     11Anonymous item.
     12PASS
     13The first item.
     14The second item.
     15Out of flexbox.
     16PASS
     17The first item.
     18The second item.
     19Out of flexbox.
     20PASS
     21The first item.
     22The second item.
     23Out of flexbox.
     24PASS
     25The first item.
     26The second item.
     27Out of flexbox.
     28PASS
     29Anonymous item.
     30Out of flexbox.
     31PASS
     32Anonymous item.
     33Out of flexbox.
     34PASS
     35The first item.
     36The second item.
     37Out of flexbox.
     38PASS
     39The first item.
     40The second item.
     41Out of flexbox.
     42PASS
     43The first item.
     44The second item.
     45Out of flexbox.
     46PASS
     47The first item.
     48The second item.
     49Out of flexbox.
     50PASS
     51Anonymous item.
     52Out of flexbox.
     53PASS
     54Anonymous item.
     55Out of flexbox.
     56PASS
     57Out of flexbox.
     58PASS
     59Out of flexbox.
     60PASS
     61Out of flexbox.
     62PASS
     63Out of flexbox.
     64PASS
     65Out of flexbox.
     66PASS
     67Out of flexbox.
     68PASS
     69Out of flexbox.
     70PASS
     71Out of flexbox.
     72PASS
     73Out of flexbox.
     74PASS
     75Out of flexbox.
     76PASS
     77Out of flexbox.
     78PASS
     79Out of flexbox.
     80PASS

  • trunk/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter.html

    r173444 r178822  
    33<link href="resources/flexbox.css" rel="stylesheet">
    44<style>
    5     .container::first-letter { line-height: 100px; }
    6     .flexbox::first-letter { line-height: 200px; }
    7     p { line-height: 20px; }
     5    body {
     6        line-height: 20px;
     7    }
     8
     9    .flexbox-first-letter::first-letter {
     10        line-height: 100px;
     11        color: red;
     12    }
     13
     14    .container-first-letter::first-letter {
     15        line-height: 200px;
     16        color: green;
     17    }
     18
     19    .float {
     20        float: left;
     21    }
     22
     23    .flexbox-before::before {
     24        content: "Anonymous item.";
     25        display: -webkit-flex;
     26        display: flex;
     27    }
     28
     29    .flexbox-after::before {
     30        content: "Anonymous item.";
     31        display: -webkit-flex;
     32        display: flex;
     33    }
     34
     35    .inline-flexbox-before::before {
     36        content: "Anonymous item.";
     37        display: -webkit-inline-flex;
     38        display: inline-flex;
     39    }
     40
     41    .inline-flexbox-after::before {
     42        content: "Anonymous item.";
     43        display: -webkit-inline-flex;
     44        display: inline-flex;
     45    }
     46
     47    .before-after-first-letter::first-letter {
     48        line-height: 50px;
     49        color: blue;
     50    }
    851</style>
    952
    1053<script src="../../resources/check-layout.js"></script>
    11 <body onload="checkLayout('.flexbox')">
     54<body onload="checkLayout('.container')">
    1255<p>This test flex item should ignore container's firstLetter pseudo element.</p>
    1356
    1457<div class="container">
     58    <div class="flexbox flexbox-first-letter">
     59        <div class="item" data-expected-height=20>The first item.</div>
     60        <div class="item" data-expected-height=20>The second item.</div>
     61    </div>
     62</div>
     63
     64<div class="container">
     65    <div class="inline-flexbox flexbox-first-letter">
     66        <div class="item" data-expected-height=20>The first item.</div>
     67        <div class="item" data-expected-height=20>The second item.</div>
     68    </div>
     69</div>
     70
     71<div class="container">
     72    <div class="flexbox flexbox-first-letter" data-expected-height=20>
     73        Anonymous item.
     74    </div>
     75</div>
     76
     77<div class="container">
     78    <div class="inline-flexbox flexbox-first-letter" data-expected-height=20>
     79        Anonymous item.
     80    </div>
     81</div>
     82
     83<div class="container container-first-letter">
     84    <div class="flexbox flexbox-first-letter">
     85        <div class="item" data-expected-height=20>The first item.</div>
     86        <div class="item" data-expected-height=20>The second item.</div>
     87    </div>
     88    <div data-expected-height=200>Out of flexbox.</div>
     89</div>
     90
     91<div class="container container-first-letter">
     92    <div class="inline-flexbox flexbox-first-letter">
     93        <div class="item" data-expected-height=20>The first item.</div>
     94        <div class="item" data-expected-height=20>The second item.</div>
     95    </div>
     96    <div data-expected-height=20>Out of flexbox.</div>
     97</div>
     98
     99<div class="container container-first-letter">
     100    <div class="flexbox flexbox-first-letter float">
     101        <div class="item" data-expected-height=20>The first item.</div>
     102        <div class="item" data-expected-height=20>The second item.</div>
     103    </div>
     104    <div data-expected-height=200>Out of flexbox.</div>
     105</div>
     106
     107<div class="container container-first-letter">
     108    <div class="inline-flexbox flexbox-first-letter float">
     109        <div class="item" data-expected-height=20>The first item.</div>
     110        <div class="item" data-expected-height=20>The second item.</div>
     111    </div>
     112    <div data-expected-height=200>Out of flexbox.</div>
     113</div>
     114
     115<div class="container container-first-letter">
     116    <div class="flexbox flexbox-first-letter" data-expected-height=20>
     117        Anonymous item.
     118    </div>
     119    <div data-expected-height=200>Out of flexbox.</div>
     120</div>
     121
     122<div class="container container-first-letter">
     123    <div class="inline-flexbox flexbox-first-letter" data-expected-height=20>
     124        Anonymous item.
     125    </div>
     126    <div data-expected-height=20>Out of flexbox.</div>
     127</div>
     128
     129<div class="container container-first-letter">
    15130    <div class="flexbox">
    16         <p data-expected-height=20>The first item.</p>
    17         <p data-expected-height=20>The second item.</p>
    18     </div>
    19 </div>
     131        <div class="item" data-expected-height=20>The first item.</div>
     132        <div class="item" data-expected-height=20>The second item.</div>
     133    </div>
     134    <div data-expected-height=200>Out of flexbox.</div>
     135</div>
     136
     137<div class="container container-first-letter">
     138    <div class="inline-flexbox">
     139        <div class="item" data-expected-height=20>The first item.</div>
     140        <div class="item" data-expected-height=20>The second item.</div>
     141    </div>
     142    <div data-expected-height=20>Out of flexbox.</div>
     143</div>
     144
     145<div class="container container-first-letter">
     146    <div class="flexbox float">
     147        <div class="item" data-expected-height=20>The first item.</div>
     148        <div class="item" data-expected-height=20>The second item.</div>
     149    </div>
     150    <div data-expected-height=200>Out of flexbox.</div>
     151</div>
     152
     153<div class="container container-first-letter">
     154    <div class="inline-flexbox float">
     155        <div class="item" data-expected-height=20>The first item.</div>
     156        <div class="item" data-expected-height=20>The second item.</div>
     157    </div>
     158    <div data-expected-height=200>Out of flexbox.</div>
     159</div>
     160
     161<div class="container container-first-letter">
     162    <div class="flexbox" data-expected-height=20>
     163        Anonymous item.
     164    </div>
     165    <div data-expected-height=200>Out of flexbox.</div>
     166</div>
     167
     168<div class="container container-first-letter">
     169    <div class="inline-flexbox" data-expected-height=20>
     170        Anonymous item.
     171    </div>
     172    <div data-expected-height=20>Out of flexbox.</div>
     173</div>
     174
     175<div class="container container-first-letter">
     176    <div class="flexbox-before" data-expected-height=220>Out of flexbox.</div>
     177</div>
     178
     179<div class="container">
     180    <div class="flexbox-before before-after-first-letter" data-expected-height=70>Out of flexbox.</div>
     181</div>
     182
     183<div class="container container-first-letter">
     184    <div class="flexbox-before before-after-first-letter" data-expected-height=70>Out of flexbox.</div>
     185</div>
     186
     187<div class="container container-first-letter">
     188    <div class="flexbox-after" data-expected-height=220>Out of flexbox.</div>
     189</div>
     190
     191<div class="container container-first-letter">
     192    <div class="flexbox-after before-after-first-letter" data-expected-height=70>Out of flexbox.</div>
     193</div>
     194
     195<div class="container">
     196    <div class="flexbox-after before-after-first-letter" data-expected-height=70>Out of flexbox.</div>
     197</div>
     198
     199<div class="container container-first-letter">
     200    <div class="inline-flexbox-before" data-expected-height=20>Out of flexbox.</div>
     201</div>
     202
     203<div class="container">
     204    <div class="inline-flexbox-before before-after-first-letter" data-expected-height=20>Out of flexbox.</div>
     205</div>
     206
     207<div class="container container-first-letter">
     208    <div class="inline-flexbox-before before-after-first-letter" data-expected-height=20>Out of flexbox.</div>
     209</div>
     210
     211<div class="container container-first-letter">
     212    <div class="inline-flexbox-after" data-expected-height=20>Out of flexbox.</div>
     213</div>
     214
     215<div class="container container-first-letter">
     216    <div class="inline-flexbox-after before-after-first-letter" data-expected-height=20>Out of flexbox.</div>
     217</div>
     218
     219<div class="container">
     220    <div class="inline-flexbox-after before-after-first-letter" data-expected-height=20>Out of flexbox.</div>
     221</div>
     222
    20223</body>
    21224</html>

  • trunk/LayoutTests/fast/css-grid-layout/grid-container-ignore-first-letter-expected.txt

    r173444 r178822  
    11This test grid item should ignore grid container's first-letter pseudo-element.
    22
    3 The first item.
    4 The second item.
    5 PASS
    6 The first item.
    7 The second item.
    8 PASS
    9 Anonymous item.
    10 PASS
    11 Anonymous item.
    12 PASS
    133The first item.
    144The second item.
    … …  
    2111Anonymous item.
    2212PASS
     13The first item.
     14The second item.
     15Out of grid.
     16PASS
     17The first item.
     18The second item.
     19Out of grid.
     20PASS
     21The first item.
     22The second item.
     23Out of grid.
     24PASS
     25The first item.
     26The second item.
     27Out of grid.
     28PASS
     29Anonymous item.
     30Out of grid.
     31PASS
     32Anonymous item.
     33Out of grid.
     34PASS
     35The first item.
     36The second item.
     37Out of grid.
     38PASS
     39The first item.
     40The second item.
     41Out of grid.
     42PASS
     43The first item.
     44The second item.
     45Out of grid.
     46PASS
     47The first item.
     48The second item.
     49Out of grid.
     50PASS
     51Anonymous item.
     52Out of grid.
     53PASS
     54Anonymous item.
     55Out of grid.
     56PASS
     57Out of grid.
     58PASS
     59Out of grid.
     60PASS
     61Out of grid.
     62PASS
     63Out of grid.
     64PASS
     65Out of grid.
     66PASS
     67Out of grid.
     68PASS
     69Out of grid.
     70PASS
     71Out of grid.
     72PASS
     73Out of grid.
     74PASS
     75Out of grid.
     76PASS
     77Out of grid.
     78PASS
     79Out of grid.
     80PASS

  • trunk/LayoutTests/fast/css-grid-layout/grid-container-ignore-first-letter.html

    r173444 r178822  
    33<link href="resources/grid.css" rel="stylesheet">
    44<style>
    5     body { line-height: 20px; }
    6     .grid-first-letter::first-letter { line-height: 100px; color: red; }
    7     .container::first-letter { line-height: 200px; color: green; }
     5    body {
     6        line-height: 20px;
     7    }
     8
     9    .grid-first-letter::first-letter {
     10        line-height: 100px;
     11        color: red;
     12    }
     13
     14    .container-first-letter::first-letter {
     15        line-height: 200px;
     16        color: green;
     17    }
     18
     19    .float {
     20        float: left;
     21    }
     22
     23    .grid-before::before {
     24        content: "Anonymous item.";
     25        display: -webkit-grid;
     26    }
     27
     28    .grid-after::before {
     29        content: "Anonymous item.";
     30        display: -webkit-grid;
     31    }
     32
     33    .inline-grid-before::before {
     34        content: "Anonymous item.";
     35        display: -webkit-inline-grid;
     36    }
     37
     38    .inline-grid-after::before {
     39        content: "Anonymous item.";
     40        display: -webkit-inline-grid;
     41    }
     42
     43    .before-after-first-letter::first-letter {
     44        line-height: 50px;
     45        color: blue;
     46    }
    847</style>
    948
    1049<script src="../../resources/check-layout.js"></script>
    11 <body onload="checkLayout('.grid-first-letter');">
     50<body onload="checkLayout('.container');">
    1251<p>This test grid item should ignore grid container's first-letter pseudo-element.</p>
    1352
    14 <div class="grid grid-first-letter">
    15     <div class="item" data-expected-height=20>The first item.</div>
    16     <div class="item" data-expected-height=20>The second item.</div>
    17 </div>
    18 
    19 <div class="inline-grid grid-first-letter">
    20     <div class="item" data-expected-height=20>The first item.</div>
    21     <div class="item" data-expected-height=20>The second item.</div>
    22 </div>
    23 
    24 <div class="grid grid-first-letter" data-expected-height=20>
    25     Anonymous item.
    26 </div>
    27 
    28 <div class="inline-grid grid-first-letter" data-expected-height=20>
    29     Anonymous item.
    30 </div>
    31 
    3253<div class="container">
    3354    <div class="grid grid-first-letter">
    … …  
    5475        Anonymous item.
    5576    </div>
     77</div>
     78
     79<div class="container container-first-letter">
     80    <div class="grid grid-first-letter">
     81        <div class="item" data-expected-height=20>The first item.</div>
     82        <div class="item" data-expected-height=20>The second item.</div>
     83    </div>
     84    <div data-expected-height=200>Out of grid.</div>
     85</div>
     86
     87<div class="container container-first-letter">
     88    <div class="inline-grid grid-first-letter">
     89        <div class="item" data-expected-height=20>The first item.</div>
     90        <div class="item" data-expected-height=20>The second item.</div>
     91    </div>
     92    <div data-expected-height=20>Out of grid.</div>
     93</div>
     94
     95<div class="container container-first-letter">
     96    <div class="grid grid-first-letter float">
     97        <div class="item" data-expected-height=20>The first item.</div>
     98        <div class="item" data-expected-height=20>The second item.</div>
     99    </div>
     100    <div data-expected-height=200>Out of grid.</div>
     101</div>
     102
     103<div class="container container-first-letter">
     104    <div class="inline-grid grid-first-letter float">
     105        <div class="item" data-expected-height=20>The first item.</div>
     106        <div class="item" data-expected-height=20>The second item.</div>
     107    </div>
     108    <div data-expected-height=200>Out of grid.</div>
     109</div>
     110
     111<div class="container container-first-letter">
     112    <div class="grid grid-first-letter" data-expected-height=20>
     113        Anonymous item.
     114    </div>
     115    <div data-expected-height=200>Out of grid.</div>
     116</div>
     117
     118<div class="container container-first-letter">
     119    <div class="inline-grid grid-first-letter" data-expected-height=20>
     120        Anonymous item.
     121    </div>
     122    <div data-expected-height=20>Out of grid.</div>
     123</div>
     124
     125<div class="container container-first-letter">
     126    <div class="grid">
     127        <div class="item" data-expected-height=20>The first item.</div>
     128        <div class="item" data-expected-height=20>The second item.</div>
     129    </div>
     130    <div data-expected-height=200>Out of grid.</div>
     131</div>
     132
     133<div class="container container-first-letter">
     134    <div class="inline-grid">
     135        <div class="item" data-expected-height=20>The first item.</div>
     136        <div class="item" data-expected-height=20>The second item.</div>
     137    </div>
     138    <div data-expected-height=20>Out of grid.</div>
     139</div>
     140
     141<div class="container container-first-letter">
     142    <div class="grid float">
     143        <div class="item" data-expected-height=20>The first item.</div>
     144        <div class="item" data-expected-height=20>The second item.</div>
     145    </div>
     146    <div data-expected-height=200>Out of grid.</div>
     147</div>
     148
     149<div class="container container-first-letter">
     150    <div class="inline-grid float">
     151        <div class="item" data-expected-height=20>The first item.</div>
     152        <div class="item" data-expected-height=20>The second item.</div>
     153    </div>
     154    <div data-expected-height=200>Out of grid.</div>
     155</div>
     156
     157<div class="container container-first-letter">
     158    <div class="grid" data-expected-height=20>
     159        Anonymous item.
     160    </div>
     161    <div data-expected-height=200>Out of grid.</div>
     162</div>
     163
     164<div class="container container-first-letter">
     165    <div class="inline-grid" data-expected-height=20>
     166        Anonymous item.
     167    </div>
     168    <div data-expected-height=20>Out of grid.</div>
     169</div>
     170
     171<div class="container container-first-letter">
     172    <div class="grid-before" data-expected-height=220>Out of grid.</div>
     173</div>
     174
     175<div class="container">
     176    <div class="grid-before before-after-first-letter" data-expected-height=70>Out of grid.</div>
     177</div>
     178
     179<div class="container container-first-letter">
     180    <div class="grid-before before-after-first-letter" data-expected-height=70>Out of grid.</div>
     181</div>
     182
     183<div class="container container-first-letter">
     184    <div class="grid-after" data-expected-height=220>Out of grid.</div>
     185</div>
     186
     187<div class="container container-first-letter">
     188    <div class="grid-after before-after-first-letter" data-expected-height=70>Out of grid.</div>
     189</div>
     190
     191<div class="container">
     192    <div class="grid-after before-after-first-letter" data-expected-height=70>Out of grid.</div>
     193</div>
     194
     195<div class="container container-first-letter">
     196    <div class="inline-grid-before" data-expected-height=20>Out of grid.</div>
     197</div>
     198
     199<div class="container">
     200    <div class="inline-grid-before before-after-first-letter" data-expected-height=20>Out of grid.</div>
     201</div>
     202
     203<div class="container container-first-letter">
     204    <div class="inline-grid-before before-after-first-letter" data-expected-height=20>Out of grid.</div>
     205</div>
     206
     207<div class="container container-first-letter">
     208    <div class="inline-grid-after" data-expected-height=20>Out of grid.</div>
     209</div>
     210
     211<div class="container container-first-letter">
     212    <div class="inline-grid-after before-after-first-letter" data-expected-height=20>Out of grid.</div>
     213</div>
     214
     215<div class="container">
     216    <div class="inline-grid-after before-after-first-letter" data-expected-height=20>Out of grid.</div>
    56217</div>
    57218

  • trunk/Source/WebCore/ChangeLog

    r178821 r178822  
     12015-01-21  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        first-letter pseudo-element from ancestors is not being ignored in grids and flexboxes
     4        https://bugs.webkit.org/show_bug.cgi?id=138424
     5
     6        Reviewed by Benjamin Poulain.
     7
     8        Source/WebCore:
     9
     10        According to the grid and flexbox specs:
     11        "::first-letter pseudo-element do not apply to grid/flex containers".
     12        http://dev.w3.org/csswg/css-grid/#grid-containers
     13        http://dev.w3.org/csswg/css-flexbox/#flex-containers
     14
     15        Check also the CSS WG mailing list discussion:
     16        http://lists.w3.org/Archives/Public/www-style/2014Dec/0305.html
     17
     18        This was almost working right, except in the case that an ancestor was
     19        setting the ::first-letter pseudo-element.
     20
     21        Added a few more cases to the current tests in order to check this
     22        behavior.
     23        Also created some new tests to increase coverage
     24
     25        Tests: fast/css/first-letter-from-ancestors-not-apply-inline-elements.html
     26               fast/css/first-letter-ignores-display-property.html
     27
     28        * rendering/RenderBlock.cpp:
     29        (WebCore::RenderBlock::getFirstLetter): Go to the next sibling when
     30        looking for the first text child if you reach a grid or flexbox.
     31
    1322015-01-21  Csaba Osztrogonác  <ossy@webkit.org>
    233

  • trunk/Source/WebCore/rendering/RenderBlock.cpp

    r178510 r178822  
    32103210        } else if (current.isReplaced() || is<RenderButton>(current) || is<RenderMenuList>(current))
    32113211            break;
     3212        else if (current.isFlexibleBoxIncludingDeprecated()
     3213#if ENABLE(CSS_GRID_LAYOUT)
     3214            || current.isRenderGrid()
     3215#endif
     3216            )
     3217            firstLetter = current.nextSibling();
    32123218        else if (current.style().hasPseudoStyle(FIRST_LETTER) && current.canHaveGeneratedChildren())  {
    32133219            // We found a lower-level node with first-letter, which supersedes the higher-level style
    … …  
    32183224    }
    32193225   
    3220     if (!firstLetter || !isRenderBlockFlowOrRenderButton(*firstLetterContainer))
     3226    if (!firstLetter)
    32213227        firstLetterContainer = nullptr;
    32223228}
Note: See TracChangeset for help on using the changeset viewer.