| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| test1 > :empty::before { |
| background-color: green; |
| content: "Pass!"; |
| } |
| |
| test2 > :empty + ::before { |
| background-color: green; |
| content: "Pass!"; |
| } |
| |
| test3 > :empty + * > ::before { |
| background-color: green; |
| content: "Pass!"; |
| } |
| |
| test4 > :not(:empty)::before { |
| background-color: green; |
| content: "Pass!"; |
| } |
| |
| test5 > :not(:empty) + ::before { |
| background-color: green; |
| content: "Pass!"; |
| } |
| |
| test6 > :not(:empty) + * > ::before { |
| background-color: green; |
| content: "Pass!"; |
| } |
| </style> |
| <script> |
| window.addEventListener('load', function() { |
| scratch = document.documentElement.offsetTop; |
| var children = document.querySelectorAll('child'); |
| for (var i = 0; i < children.length; ++i) |
| children[i].parentNode.removeChild(children[i]); |
| |
| var children = document.querySelectorAll('notempty'); |
| for (var i = 0; i < children.length; ++i) |
| children[i].appendChild(document.createTextNode(" ")); |
| }); |
| </script> |
| </head> |
| <body> |
| <p>This tests pseudo elements are styled properly. If the test succeed, you should see 6 lines with "Pass!" over a green background.</p> |
| <test1> |
| <div><child></child></div> |
| </test1> |
| |
| <test2> |
| <div><child></child></div> |
| <div></div> |
| </test2> |
| |
| <test3> |
| <div><child></child></div> |
| <div> |
| <div></div> |
| </div> |
| </test3> |
| |
| <test4> |
| <notempty></notempty> |
| </test4> |
| |
| <test5> |
| <notempty></notempty> |
| <div></div> |
| </test5> |
| |
| <test6> |
| <notempty></notempty> |
| <div> |
| <div></div> |
| </div> |
| </test6> |
| </body> |
| </html> |
