Index: third_party/WebKit/LayoutTests/fast/css/invalidation/first-last-only-child.html |
diff --git a/third_party/WebKit/LayoutTests/fast/css/invalidation/first-last-only-child.html b/third_party/WebKit/LayoutTests/fast/css/invalidation/first-last-only-child.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..6addd87c8240b7fb3362f3a0973088db54d068b7 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/css/invalidation/first-last-only-child.html |
@@ -0,0 +1,168 @@ |
+<!DOCTYPE html> |
+<script src="../../../resources/testharness.js"></script> |
+<script src="../../../resources/testharnessreport.js"></script> |
+<style> |
+ #first_child:first-child, |
+ #first_child:first-child #first_child_inner, |
+ #last_child:last-child, |
+ #last_child:last-child #last_child_inner, |
+ #only_child:only-child, |
+ #only_child:only-child #only_child_inner { |
+ background-color: green |
+ } |
+ |
+ span:first-child { |
+ color: green; |
+ } |
+</style> |
+<div> |
+ <div id="first_child"> |
+ <div></div> |
+ <div></div> |
+ <div id="first_child_inner"></div> |
+ <div></div> |
+ </div> |
+</div> |
+<div> |
+ <div id="last_child"> |
+ <div></div> |
+ <div></div> |
+ <div id="last_child_inner"></div> |
+ <div></div> |
+ </div> |
+</div> |
+<div> |
+ <div id="only_child"> |
+ <div></div> |
+ <div></div> |
+ <div id="only_child_inner"></div> |
+ <div></div> |
+ </div> |
+</div> |
+ |
+<div> |
+ <span></span> |
+ XXX |
+ <span id="after_text_node"></span> |
+</div> |
+ |
+<script> |
+ function backgroundIsGreen(element) { |
+ assert_equals(getComputedStyle(element).backgroundColor, "rgb(0, 128, 0)"); |
+ } |
+ |
+ function backgroundIsTransparent(element) { |
+ assert_equals(getComputedStyle(element).backgroundColor, "rgba(0, 0, 0, 0)"); |
+ } |
+ |
+ test(() => { |
+ backgroundIsGreen(first_child); |
+ backgroundIsGreen(first_child_inner); |
+ backgroundIsGreen(last_child); |
+ backgroundIsGreen(last_child_inner); |
+ backgroundIsGreen(only_child); |
+ backgroundIsGreen(only_child_inner); |
+ }, "Check initial computed styles"); |
+ |
+ var div = document.createElement("div"); |
+ |
+ test(() => { |
+ first_child.offsetTop; |
+ first_child.parentNode.insertBefore(div, first_child); |
+ if (window.internals) |
+ assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3); |
+ backgroundIsTransparent(first_child); |
+ backgroundIsTransparent(first_child_inner); |
+ }, "Insert element before first child."); |
+ |
+ test(() => { |
+ first_child.offsetTop; |
+ div.remove(); |
+ if (window.internals) |
+ assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2); |
+ backgroundIsGreen(first_child); |
+ backgroundIsGreen(first_child_inner); |
+ }, "Remove first child."); |
+ |
+ test(() => { |
+ last_child.offsetTop; |
+ last_child.parentNode.insertBefore(div, null); |
+ if (window.internals) |
+ assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3); |
+ backgroundIsTransparent(last_child); |
+ backgroundIsTransparent(last_child_inner); |
+ }, "Insert element before after last child."); |
+ |
+ test(() => { |
+ last_child.offsetTop; |
+ div.remove(); |
+ if (window.internals) |
+ assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2); |
+ backgroundIsGreen(last_child); |
+ backgroundIsGreen(last_child_inner); |
+ }, "Remove last child."); |
+ |
+ test(() => { |
+ only_child.offsetTop; |
+ only_child.parentNode.insertBefore(div, only_child); |
+ if (window.internals) |
+ assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3); |
+ backgroundIsTransparent(only_child); |
+ backgroundIsTransparent(only_child_inner); |
+ }, "Insert element before only child."); |
+ |
+ test(() => { |
+ only_child.offsetTop; |
+ div.remove(); |
+ if (window.internals) |
+ assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2); |
+ backgroundIsGreen(only_child); |
+ backgroundIsGreen(only_child_inner); |
+ }, "Remove element before only child."); |
+ |
+ test(() => { |
+ only_child.offsetTop; |
+ only_child.parentNode.insertBefore(div, null); |
+ if (window.internals) |
+ assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3); |
+ backgroundIsTransparent(only_child); |
+ backgroundIsTransparent(only_child_inner); |
+ }, "Insert element after only child."); |
+ |
+ test(() => { |
+ only_child.offsetTop; |
+ div.remove(); |
+ if (window.internals) |
+ assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2); |
+ backgroundIsGreen(only_child); |
+ backgroundIsGreen(only_child_inner); |
+ }, "Remove element after only child."); |
+ |
+ test(() => { |
+ first_child.offsetTop; |
+ first_child.parentNode.insertBefore(div, null); |
+ if (window.internals) |
+ assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1); |
+ div.remove(); |
+ if (window.internals) |
+ assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 0); |
+ }, "No first-child mutation."); |
+ |
+ test(() => { |
+ last_child.offsetTop; |
+ last_child.parentNode.insertBefore(div, last_child); |
+ if (window.internals) |
+ assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1); |
+ div.remove(); |
+ if (window.internals) |
+ assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 0); |
+ }, "No last-child mutation."); |
+ |
+ test(() => { |
+ document.body.offsetTop; |
+ after_text_node.parentNode.insertBefore(div, after_text_node); |
+ if (window.internals) |
+ assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1); |
+ }, "Inserting sibling before text-node should not update for :first-child if text-node has element predecessor."); |
+ |
+</script> |