Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-pseudo/grammar-spelling-errors-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>CSS Pseudo-Elements Test: ::spelling-error overlay drawn over the ::grammar-error overlay</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="match" href="reference/grammar-spelling-errors-001-ref.html">
<meta name="assert" content="In this test, we postulate that the word 'dificultly' represents both a grammar error and a spelling error. In such editorial scenario, then the pseudo-element ::spelling-error's background color (yellow) is supposed to be drawn over the pseudo-element ::grammar-error's background color (red). The color should remain green as the pseudo-element ::spelling-error's 'color' is unspecified.">
<style>
div
{
font-size: 300%;
}
div::spelling-error
{
background-color: yellow;
}
div::grammar-error
{
background-color: red;
color: green;
}
</style>
<script type="text/javascript">
function startTest()
{
document.getElementById("target").focus();
}
</script>
<body onload="startTest();">
<p>PREREQUISITE: User agent needs to have an enabled and capable grammar error module and an enabled and capable spelling error module. If it does not, then this test does not apply to such user agent.
<p>This test also requires that the targeted editable text element must receive system focus.
<p>Test passes if each glyph of "dificultly" is green and if the background of "dificultly" is yellow.
<div contenteditable="true" id="target">This is dificultly.</div>