| <!doctype html> |
| <html> |
| <head> |
| <style> |
| #target1::first-letter { |
| background-color: lime; |
| } |
| |
| #target2::after { |
| background-color: lime; |
| content: "cocoa"; |
| } |
| |
| #target3::before { |
| background-color: lime; |
| content: "cappuccino"; |
| } |
| |
| #target4::before, |
| #target4::after { |
| background-color: lime; |
| content: "around"; |
| } |
| |
| #target5, |
| #target5::first-letter { |
| background-color: lime; |
| } |
| |
| #target6, |
| #target6::first-letter { |
| background-color: lime; |
| } |
| |
| #target7, |
| #target7::before, |
| #target7::after { |
| background-color: lime; |
| content: "around"; |
| } |
| |
| /* first letter of before content is colored blue. */ |
| #target12::after, |
| #target12::before { |
| background-color: lime; |
| content: "around"; |
| } |
| |
| #target12::first-letter { |
| background-color: blue; |
| } |
| |
| #target16 > p { |
| background-color: lime; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div> |
| <p id="target1">pseudo element inside :matches has effect.</p> |
| <p id="target2">pseudo element inside :matches has effect.</p> |
| <p id="target3">pseudo element inside :matches has effect.</p> |
| <p id="target4">pseudo element inside :matches has effect.</p> |
| <p id="target5">pseudo element inside :matches has effect, so all selectors should be checked.</p> |
| <p id="target6">pseudo element inside nested :matches should have effect.</p> |
| <p id="target7">both line itself and before/after should be colored.</p> |
| <p id="target8">pseudo element inside :not doesn't have effect.</p> |
| <p id="target9">::first-line in non-rightmost fragment always unmatch.</p> |
| <p id="target10">:matches(::first-line) in non-rightmost fragment always unmatches.</p> |
| <p id="target11">pseudo element in non-rightmost fragment inside :matches always unmatches.</p> |
| <p id="target12">before/after contents are colored lime and first-letter of before content is colored blue.</p> |
| <p id="target13">non-rightmost pseudo element has no effect.</p> |
| <p id="target14"><p>non-rightmost pseudo element has no effect.</p></p> |
| <p id="target15"><p>non-rightmost pseudo element has no effect.</p></p> |
| <p id="target16"><p>matchType should be effective for normal element.</p></p> |
| </div> |
| </body> |
| </html> |
