<!DOCTYPE html>
<html>
    <head>
        <script src="../../resources/js-test-pre.js"></script>
        <style>
            :read-write {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="editable1" contenteditable>
            <div id="div_in_editable"></div>
            <input type="text" readonly id="readonly_in_editable"/>
            <input type="text" disabled id="disabled_in_editable"/>
        </div>
        <p id="editable2" contenteditable="true"></p>
        <span id="editable3" contenteditable="plaintext-only"></span>
        <h1 id="editable4" contenteditable=""></h1>
        <h2 id="non_editable" contenteditable="false"></h2>
        <svg id="svg" height="210" width="400">
          <path id="svg_path" d="M150 0 L75 200 L225 200 Z" />
        </svg>
        <svg id="svg_contenteditable" height="210" width="250" contenteditable>
          <path d="M150 0 L75 200 L225 200 Z"/>
        </svg>
        <math id="mathml" xmlns="http://www.w3.org/1998/Math/MathML">
          <mrow>
              <msup id="mathml_msup"><mi>x</mi><mn>2</mn></msup>
              <mo>=</mo><mn>0</mn>
          </mrow>
        </math>
        <script>
            function backgroundColor(identifier) { return getComputedStyle(document.getElementById(identifier)).getPropertyValue("background-color"); }
            var readWriteColor = "rgb(255, 0, 0)";

            description('Tests read-write pseudo-class properties are applied to editable elements and not to non-editable elements');

            shouldBeEqualToString("backgroundColor('editable1')", readWriteColor);
            shouldBeEqualToString("backgroundColor('editable2')", readWriteColor);
            shouldBeEqualToString("backgroundColor('editable3')", readWriteColor);
            shouldBeEqualToString("backgroundColor('editable4')", readWriteColor);
            shouldBeEqualToString("backgroundColor('div_in_editable')", readWriteColor);
            shouldNotBeEqualToString("backgroundColor('readonly_in_editable')", readWriteColor);
            shouldNotBeEqualToString("backgroundColor('disabled_in_editable')", readWriteColor);
            shouldNotBeEqualToString("backgroundColor('non_editable')", readWriteColor);
            shouldNotBeEqualToString("backgroundColor('svg')", readWriteColor);
            shouldNotBeEqualToString("backgroundColor('svg_path')", readWriteColor);
            shouldNotBeEqualToString("backgroundColor('svg_contenteditable')", readWriteColor);
            shouldNotBeEqualToString("backgroundColor('mathml')", readWriteColor);
            shouldNotBeEqualToString("backgroundColor('mathml_msup')", readWriteColor);
        </script>
        <script src="../../resources/js-test-post.js"></script>
    </body>
</html>
