Commit 73883c2a authored by hyatt@apple.com's avatar hyatt@apple.com
Browse files

WebCore:

        Make :first-child and :first-of-type properly dynamic when the DOM changes.  Brings the Acid3 score up
        to 66/100.

        Reviewed by olliej

        Added fast/css/first-child-pseudo-class.html, fast/css/first-of-type-pseudo-class.html, fast/css/empty-body-test.html

        * css/CSSGrammar.y:
        * css/CSSStyleSelector.cpp:
        (WebCore::CSSStyleSelector::checkOneSelector):
        * dom/Element.cpp:
        (WebCore::Element::recalcStyle):
        (WebCore::Element::childrenChanged):
        * rendering/RenderStyle.cpp:
        (WebCore::RenderStyle::RenderStyle):
        * rendering/RenderStyle.h:
        (WebCore::RenderStyle::childrenAffectedByFirstChildRules):
        (WebCore::RenderStyle::setChildrenAffectedByFirstChildRules):
        (WebCore::RenderStyle::childrenAffectedByLastChildRules):
        (WebCore::RenderStyle::setChildrenAffectedByLastChildRules):
        (WebCore::RenderStyle::childrenAffectedByPositionalRules):
        (WebCore::RenderStyle::setChildrenAffectedByPositionalRules):
        (WebCore::RenderStyle::firstChildState):
        (WebCore::RenderStyle::setFirstChildState):
        (WebCore::RenderStyle::lastChildState):
        (WebCore::RenderStyle::setLastChildState):

LayoutTests:

        Added tests for dynamic :first-child support (Acid3).

        Reviewed by olliej

        * fast/css/empty-body-test.html: Added.
        * fast/css/first-child-pseudo-class.html: Added.
        * fast/css/first-of-type-pseudo-class.html: Added.
        * platform/mac/fast/css/empty-body-test-expected.checksum: Added.
        * platform/mac/fast/css/empty-body-test-expected.png: Added.
        * platform/mac/fast/css/empty-body-test-expected.txt: Added.
        * platform/mac/fast/css/first-child-pseudo-class-expected.checksum: Added.
        * platform/mac/fast/css/first-child-pseudo-class-expected.png: Added.
        * platform/mac/fast/css/first-child-pseudo-class-expected.txt: Added.
        * platform/mac/fast/css/first-of-type-pseudo-class-expected.checksum: Added.
        * platform/mac/fast/css/first-of-type-pseudo-class-expected.png: Added.
        * platform/mac/fast/css/first-of-type-pseudo-class-expected.txt: Added.



git-svn-id: http://svn.webkit.org/repository/webkit/trunk@29932 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent b7d43899
2008-02-01 David Hyatt <hyatt@apple.com>
Added tests for dynamic :first-child support (Acid3).
Reviewed by olliej
* fast/css/empty-body-test.html: Added.
* fast/css/first-child-pseudo-class.html: Added.
* fast/css/first-of-type-pseudo-class.html: Added.
* platform/mac/fast/css/empty-body-test-expected.checksum: Added.
* platform/mac/fast/css/empty-body-test-expected.png: Added.
* platform/mac/fast/css/empty-body-test-expected.txt: Added.
* platform/mac/fast/css/first-child-pseudo-class-expected.checksum: Added.
* platform/mac/fast/css/first-child-pseudo-class-expected.png: Added.
* platform/mac/fast/css/first-child-pseudo-class-expected.txt: Added.
* platform/mac/fast/css/first-of-type-pseudo-class-expected.checksum: Added.
* platform/mac/fast/css/first-of-type-pseudo-class-expected.png: Added.
* platform/mac/fast/css/first-of-type-pseudo-class-expected.txt: Added.
2008-02-02 Dan Bernstein <mitz@apple.com>
 
- added Tiger-only results for a test
......
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body:empty { background-color:red; }
div#appendChild { padding: 1em;}
</style>
</head>
<body>
<p>There should be no RED on the page</p>
<div id='appendChild'></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>:first-child</title>
<style type='text/css'>
<!--
body { background: #fff; color: 000; font-family: Arial, Helvetica, sans-serif; }
pre { background: #fff; padding: 0.5em; }
li { background: #aaa; padding: 1em; width: 80%; margin: 0 0 3em; }
.test { display: block; padding: 0.75em; }
.base, .defaultgreen { background-color: #090; }
.defaultred { background-color: #900; }
.defaultred :first-child {
background-color: #090;
}
.defaultgreen :first-child {
background-color: #900;
}
blockquote {
margin: 0;
}
-->
</style>
</head>
<body>
<p>This page is part of the <a href="http://www.css3.info">CSS3.info</a> <a href="http://www.css3.info/selectors-test/">CSS selectors test</a>. See more info on <a href="http://www.css3.info/preview/attribute-selectors.html">CSS3 selectors</a>.</p>
<div class='base'></div>
<ol>
<li>
<div class='defaultred'>
<div class='test required'></div>
</div>
<pre>div :first-child {
}
&lt;div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
<p>
The CSS selector should match the inner div element, because it is the only child of the outer div element
</p>
</li>
<li>
<div class='defaultred'>
<div class='test'></div>
<blockquote></blockquote>
</div>
<pre>div :first-child {
}
&lt;div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;blockquote&gt;&lt;/blockquote&gt;
&lt;/div&gt;</pre>
<p>
The CSS selector should match the inner div element, because it is the first child of the outer div element
</p>
</li>
<li>
<div class='defaultred'>
<!-- Just a comment -->
<div class='test'></div>
</div>
<pre>div :first-child {
}
&lt;div&gt;
&lt;!-- Just a comment --&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
<p>
The CSS selector should match the inner div element, because it is the first child of the outer div element
Comments are not elements, so they should not be considered when determining the first child.
</p>
</li>
<li>
<div class='defaultred'>
.
<div class='test'></div>
</div>
<pre>div :first-child {
}
&lt;div&gt;
How about regular text...
&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
<p>
The CSS selector should match the inner div element, because it is the first child of the outer div element.
Regular text is not an element, so it should not be considered when determining the first child.
</p>
</li>
<li>
<div class='defaultgreen'>
<blockquote></blockquote>
<div class='test default required'></div>
</div>
<pre>div :first-child {
}
&lt;div&gt;
&lt;blockquote&gt;&lt;/blockquote&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
<p>
The CSS selector should not match the inner div element, because it is the second child of the outer div element
</p>
</li>
<li>
<div class='defaultred'>
<div id='insertBefore1'></div>
</div>
<script type="text/javascript">
<!--
var ib = document.getElementById('insertBefore1');
var el = document.createElement("div");
el.className = 'test';
ib.parentNode.insertBefore(el, ib);
//-->
</script>
<pre>div :first-child {
}
&lt;div&gt;
&lt;div id='insertBefore'&gt;&lt;/div&gt;
&lt;/div&gt;
var ib = document.getElementById('insertBefore');
ib.parentElement.insertBefore(document.createElement("div"), ib);</pre>
<p>
The CSS selector should match the div element that is inserted by the Javascript code.
</p>
</li>
<li>
<div class='defaultgreen'>
<div id='insertBefore2' class='test default'></div>
</div>
<script type="text/javascript">
<!--
var ib = document.getElementById('insertBefore2');
ib.parentNode.insertBefore(document.createElement("div"), ib);
//-->
</script>
<pre>div :first-child {
}
&lt;div&gt;
&lt;div id='insertBefore'&gt;&lt;/div&gt;
&lt;/div&gt;
var ib = document.getElementById('insertBefore');
ib.parentElement.insertBefore(document.createElement("div"), ib);</pre>
<p>
The original div element should not be a match for the :first-child selector.
</p>
</li>
</ol>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>:first-of-type</title>
<style type='text/css'>
<!--
body { background: #fff; color: 000; font-family: Arial, Helvetica, sans-serif; }
pre { background: #fff; padding: 0.5em; }
li { background: #aaa; padding: 1em; width: 80%; margin: 0 0 3em; }
.test { display: block; padding: 0.75em; }
.base, .defaultgreen { background-color: #090; }
.defaultred { background-color: #900; }
.defaultred :first-of-type {
background-color: #090;
}
.defaultgreen :first-of-type {
background-color: #900;
}
blockquote {
margin: 0;
}
-->
</style>
</head>
<body>
<p>This page is part of the <a href="http://www.css3.info">CSS3.info</a> <a href="http://www.css3.info/selectors-test/">CSS selectors test</a>. See more info on <a href="http://www.css3.info/preview/attribute-selectors.html">CSS3 selectors</a>.</p>
<div class='base'></div>
<ol>
<li>
<div class='defaultred'>
<div class='test required'></div>
</div>
<pre>div:first-of-type {
}
&lt;div&gt;Does this element match?&lt;/div&gt;</pre>
<p>
The CSS selector should match the marked div element, because it is the only element of this type
</p>
</li>
<li>
<div class='defaultred'>
<div class='test'></div>
<div></div>
</div>
<pre>div:first-of-type {
}
&lt;div&gt;Does this element match?&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;</pre>
<p>
The CSS selector should match the marked div element, because it is the first element of this type
</p>
</li>
<li>
<div class='defaultred'>
<blockquote></blockquote>
<div class='test required'></div>
</div>
<pre>div:first-of-type {
}
&lt;blockquote&gt;&lt;/blockquote&gt;
&lt;div&gt;Does this element match?&lt;/div&gt;</pre>
<p>
The CSS selector should match the marked div element, because it is the first element of this type
</p>
</li>
<li>
<div class='defaultred'>
<div></div>
<blockquote>
<div class='test'></div>
</blockquote>
</div>
<pre>div:first-of-type {
}
&lt;div&gt;&lt;/div&gt;
&lt;blockquote&gt;
&lt;div&gt;Does this element match?&lt;/div&gt;
&lt;/blockquote&gt;</pre>
<p>
The CSS selector should match the marked div element, because it is the first element of this type in this scope
</p>
</li>
<li>
<div class='defaultred'>
<div>
<div class='test'></div>
</div>
</div>
<pre>div:first-of-type {
}
&lt;div&gt;
&lt;div&gt;Does this element match?&lt;/div&gt;
&lt;/div&gt;</pre>
<p>
The CSS selector should match the marked div element, because it is the first element of this type in the current scope
</p>
</li>
<li>
<div class='defaultred'>
<blockquote>
<div></div>
</blockquote>
<div class='test'></div>
</div>
<pre>div:first-of-type {
}
&lt;blockquote&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/blockquote&gt;
&lt;div&gt;Does this element match?&lt;/div&gt;</pre>
<p>
The CSS selector should match the marked div element, because it is the first element of this type in the current scope
</p>
</li>
<li>
<div class='defaultgreen'>
<div></div>
<div class='test default required'></div>
</div>
<pre>div:first-of-type {
}
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;Does this element match?&lt;/div&gt;</pre>
<p>
The CSS selector should not match the marked div element, because it is the second element of this type
</p>
</li>
<li>
<div class='defaultgreen'>
<DIV></DIV>
<div class='test default'></div>
</div>
<pre>div:first-of-type {
}
&lt;DIV&gt;&lt;/DIV&gt;
&lt;div&gt;Does this element match?&lt;/div&gt;</pre>
<p>
The CSS selector should not match the marked div element, because it is the second element of this type
</p>
</li>
<li>
<div class='defaultred'>
<div id='insertBefore1'></div>
</div>
<script type="text/javascript">
<!--
var ib = document.getElementById('insertBefore1');
var el = document.createElement("div");
el.className = 'test';
ib.parentNode.insertBefore(el, ib);
//-->
</script>
<pre>div:first-of-type {
}
&lt;div id='insertBefore'&gt;&lt;/div&gt;
var ib = document.getElementById('insertBefore');
ib.parentElement.insertBefore(document.createElement("div"), ib);</pre>
<p>
The CSS selector should match the div element that is inserted by the Javascript code.
</p>
</li>
<li>
<div class='defaultgreen'>
<div id='insertBefore2' class='test default'></div>
</div>
<script type="text/javascript">
<!--
var ib = document.getElementById('insertBefore2');
ib.parentNode.insertBefore(document.createElement("div"), ib);
//-->
</script>
<pre>div:first-of-type {
}
&lt;div id='insertBefore'&gt;&lt;/div&gt;
var ib = document.getElementById('insertBefore');
ib.parentElement.insertBefore(document.createElement("div"), ib);</pre>
<p>
The original div element should not be a match for the :first-of-type selector.
</p>
</li>
</ol>
</body>
</html>
a9689d3d3e38cffa14b833e060094e0f
\ No newline at end of file
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x90
RenderBlock {HTML} at (0,0) size 800x90
RenderBody {BODY} at (8,16) size 784x66
RenderBlock {P} at (0,0) size 784x18
RenderText {#text} at (0,0) size 236x18
text run at (0,0) width 236: "There should be no RED on the page"
RenderBlock {DIV} at (0,34) size 784x32
8e07410b3e969cae315fdbf7bac24ca7
\ No newline at end of file
layer at (0,0) size 785x2263
RenderView at (0,0) size 785x600
layer at (0,0) size 785x2263
RenderBlock {HTML} at (0,0) size 785x2263
RenderBody {BODY} at (8,16) size 769x2199 [bgcolor=#FFFFFF]
RenderBlock {P} at (0,0) size 769x18
RenderText {#text} at (0,0) size 165x17
text run at (0,0) width 165: "This page is part of the "
RenderInline {A} at (0,0) size 73x17 [color=#0000EE]
RenderText {#text} at (165,0) size 73x17
text run at (165,0) width 73: "CSS3.info"
RenderText {#text} at (238,0) size 4x17
text run at (238,0) width 4: " "
RenderInline {A} at (0,0) size 131x17 [color=#0000EE]
RenderText {#text} at (242,0) size 131x17
text run at (242,0) width 131: "CSS selectors test"
RenderText {#text} at (373,0) size 133x17
text run at (373,0) width 133: ". See more info on "
RenderInline {A} at (0,0) size 111x17 [color=#0000EE]
RenderText {#text} at (506,0) size 111x17
text run at (506,0) width 111: "CSS3 selectors"
RenderText {#text} at (617,0) size 4x17
text run at (617,0) width 4: "."
RenderBlock {DIV} at (0,34) size 769x0 [bgcolor=#009900]
RenderBlock {OL} at (0,34) size 769x2165
RenderListItem {LI} at (40,0) size 615x242 [bgcolor=#AAAAAA]
RenderBlock {DIV} at (16,16) size 583x24 [bgcolor=#990000]
RenderBlock {DIV} at (0,0) size 583x24 [bgcolor=#009900]
RenderBlock {PRE} at (16,53) size 583x105 [bgcolor=#FFFFFF]
RenderListMarker at (-37,6) size 17x17: "1"
RenderText {#text} at (6,8) size 144x91
text run at (6,8) width 144: "div :first-child {"
text run at (150,8) width 0: " "
text run at (6,24) width 8: "}"
text run at (14,24) width 0: " "
text run at (6,39) width 0: " "
text run at (6,54) width 40: "<div>"
text run at (46,54) width 0: " "
text run at (6,69) width 112: " <div></div>"
text run at (118,69) width 0: " "
text run at (6,84) width 48: "</div>"
RenderBlock {P} at (16,174) size 583x36
RenderText {#text} at (0,0) size 572x35
text run at (0,0) width 572: "The CSS selector should match the inner div element, because it is the only child"
text run at (0,18) width 165: "of the outer div element"
RenderListItem {LI} at (40,290) size 615x257 [bgcolor=#AAAAAA]
RenderBlock {DIV} at (16,16) size 583x24 [bgcolor=#990000]
RenderBlock {DIV} at (0,0) size 583x24 [bgcolor=#009900]
RenderBlock {BLOCKQUOTE} at (0,24) size 583x0
RenderBlock {PRE} at (16,53) size 583x120 [bgcolor=#FFFFFF]
RenderListMarker at (-37,6) size 17x17: "2"
RenderText {#text} at (6,8) size 224x106
text run at (6,8) width 144: "div :first-child {"
text run at (150,8) width 0: " "
text run at (6,24) width 8: "}"
text run at (14,24) width 0: " "
text run at (6,39) width 0: " "
text run at (6,54) width 48: "<div> "
text run at (54,54) width 0: " "
text run at (6,69) width 112: " <div></div>"
text run at (118,69) width 0: " "
text run at (6,84) width 224: " <blockquote></blockquote>"
text run at (230,84) width 0: " "
text run at (6,99) width 48: "</div>"
RenderBlock {P} at (16,189) size 583x36
RenderText {#text} at (0,0) size 567x35
text run at (0,0) width 567: "The CSS selector should match the inner div element, because it is the first child"
text run at (0,18) width 165: "of the outer div element"
RenderListItem {LI} at (40,595) size 615x275 [bgcolor=#AAAAAA]
RenderBlock {DIV} at (16,16) size 583x24 [bgcolor=#990000]
RenderBlock {DIV} at (0,0) size 583x24 [bgcolor=#009900]
RenderBlock {PRE} at (16,53) size 583x120 [bgcolor=#FFFFFF]
RenderListMarker at (-37,6) size 17x17: "3"
RenderText {#text} at (6,8) size 208x106
text run at (6,8) width 144: "div :first-child {"
text run at (150,8) width 0: " "
text run at (6,24) width 8: "}"
text run at (14,24) width 0: " "
text run at (6,39) width 0: " "
text run at (6,54) width 48: "<div> "
text run at (54,54) width 0: " "
text run at (6,69) width 208: " <!-- Just a comment -->"
text run at (214,69) width 0: " "
text run at (6,84) width 112: " <div></div>"
text run at (118,84) width 0: " "
text run at (6,99) width 48: "</div>"
RenderBlock {P} at (16,189) size 583x54
RenderText {#text} at (0,0) size 567x53
text run at (0,0) width 567: "The CSS selector should match the inner div element, because it is the first child"
text run at (0,18) width 169: "of the outer div element "
text run at (169,18) width 358: "Comments are not elements, so they should not be"
text run at (0,36) width 307: "considered when determining the first child."
RenderListItem {LI} at (40,918) size 615x290 [bgcolor=#AAAAAA]
RenderBlock {DIV} at (16,16) size 583x42 [bgcolor=#990000]
RenderBlock (anonymous) at (0,0) size 583x18
RenderListMarker at (-37,0) size 17x17: "4"
RenderText {#text} at (0,0) size 4x17
text run at (0,0) width 4: "."
RenderBlock {DIV} at (0,18) size 583x24 [bgcolor=#009900]
RenderBlock {PRE} at (16,71) size 583x117 [bgcolor=#FFFFFF]
RenderText {#text} at (6,6) size 224x105
text run at (6,6) width 144: "div :first-child {"
text run at (150,6) width 0: " "
text run at (6,21) width 8: "}"
text run at (14,21) width 0: " "
text run at (6,36) width 0: " "
text run at (6,51) width 48: "<div> "
text run at (54,51) width 0: " "