OLD | NEW |
---|---|
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="../../../resources/testharness.js"></script> | 2 <script src="../../../resources/testharness.js"></script> |
3 <script src="../../../resources/testharnessreport.js"></script> | 3 <script src="../../../resources/testharnessreport.js"></script> |
4 <style> | 4 <style> |
5 #t1 > :nth-child(even) { | 5 #t1 > span:nth-child(even) { |
6 background-color: green | 6 background-color: green |
7 } | 7 } |
8 #t2 > :nth-last-child(even) { | 8 #t2 > span:nth-last-child(even) { |
9 background-color: green | |
10 } | |
11 #t3 > .second:nth-child(2) { | |
9 background-color: green | 12 background-color: green |
10 } | 13 } |
11 </style> | 14 </style> |
12 <div id="t1"> | 15 <div id="t1"> |
13 <span></span> | 16 <span></span> |
14 </div> | 17 </div> |
15 <div id="t2"> | 18 <div id="t2"> |
16 <span></span> | 19 <span></span> |
17 </div> | 20 </div> |
21 <div id="t3"> | |
22 <div class="second"></div> | |
23 <div></div> | |
24 <div></div> | |
25 <div></div> | |
26 </div> | |
18 | 27 |
19 <script> | 28 <script> |
20 function backgroundIsGreen(element) { | 29 function backgroundIsGreen(element) { |
21 assert_equals(getComputedStyle(element).backgroundColor, "rgb(0, 128, 0) "); | 30 assert_equals(getComputedStyle(element).backgroundColor, "rgb(0, 128, 0) "); |
22 } | 31 } |
23 | 32 |
24 function backgroundIsTransparent(element) { | 33 function backgroundIsTransparent(element) { |
25 assert_equals(getComputedStyle(element).backgroundColor, "rgba(0, 0, 0, 0)"); | 34 assert_equals(getComputedStyle(element).backgroundColor, "rgba(0, 0, 0, 0)"); |
26 } | 35 } |
27 | 36 |
28 test(() => { | 37 test(() => { |
29 t1.offsetTop; | 38 t1.offsetTop; |
30 assert_equals(t1.lastChild.nodeType, Node.TEXT_NODE); | 39 assert_equals(t1.lastChild.nodeType, Node.TEXT_NODE); |
31 t1.insertBefore(document.createElement("span"), t1.lastChild); | 40 t1.insertBefore(document.createElement("span"), t1.lastChild); |
32 assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1); | 41 assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1); |
33 }, "Appending an element sibling should not affect :nth-child of preceeding siblings."); | 42 }, "Appending an element sibling should not affect :nth-child of preceeding siblings."); |
34 | 43 |
35 test(() => { | 44 test(() => { |
36 t2.offsetTop; | 45 t2.offsetTop; |
37 assert_equals(t2.firstChild.nodeType, Node.TEXT_NODE); | 46 assert_equals(t2.firstChild.nodeType, Node.TEXT_NODE); |
38 assert_equals(t2.firstChild.nextSibling.nodeType, Node.ELEMENT_NODE); | 47 assert_equals(t2.firstChild.nextSibling.nodeType, Node.ELEMENT_NODE); |
39 t2.insertBefore(document.createElement("span"), t2.firstChild.nextSiblin g); | 48 t2.insertBefore(document.createElement("span"), t2.firstChild.nextSiblin g); |
40 assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1); | 49 assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1); |
41 }, "Prepending an element sibling should not affect :nth-last-child of succe eding siblings."); | 50 }, "Prepending an element sibling should not affect :nth-last-child of succe eding siblings."); |
42 | 51 |
52 test(() => { | |
53 t3.offsetTop; | |
54 let second = t3.querySelector(".second"); | |
55 backgroundIsTransparent(second); | |
56 t3.insertBefore(document.createElement("div"), t3.firstChild); | |
57 assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2); | |
58 backgroundIsGreen(second); | |
59 }, "Prepending an element sibling should not affect :nth-last-child of succe eding siblings."); | |
Eric Willigers
2016/08/13 01:00:04
This test is about nth-child.
| |
60 | |
43 </script> | 61 </script> |
OLD | NEW |