| <!DOCTYPE html> |
| <html> |
| <head> |
| <title></title> |
| <style type="text/css"> |
| doesnotexist:first-letter { color: red; } |
| doesnotexist > #targeta:first-letter { color: red; } |
| doesnotexist #targetb:first-letter { color: red; } |
| doesnotexist + #targetc:first-letter { color: red; } |
| doesnotexist ~ #targetd:first-letter { color: red; } |
| </style> |
| |
| <script type="text/javascript"> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function test() |
| { |
| document.body.offsetTop; |
| document.getElementById("targeta").innerHTML = "PASS"; |
| document.getElementById("targetb").firstChild.data = "PASS"; |
| document.getElementById("targetc").replaceChild(document.createTextNode("PASS"), document.getElementById("targetc").firstChild); |
| document.getElementById("targetd").textContent = "PASS"; |
| } |
| </script> |
| |
| </head> |
| <body onload="test()"> |
| <p> |
| The style resolution has an optimization to detect if a selector has certain pseudo element. The optimization should only happen if the selector completely match with the exception of the pseudo element. |
| </p> |
| <p>This test pass if all the lines read "PASS".</p> |
| <hr> |
| <p id="targeta">didn’t run</p> |
| <p id="targetb">didn’t run</p> |
| <p id="targetc">didn’t run</p> |
| <p id="targetd">didn’t run</p> |
| </body> |
| </html> |
