| <!DOCTYPE html> <!-- webkit-test-runner [ HighlightAPIEnabled=true ] --> |
| <html> |
| <script src="../resources/js-test.js"></script> |
| <head> |
| <style> |
| :root::highlight(example-highlight1) { |
| background-color: yellow; |
| color:blue; |
| } |
| :root::highlight(example-highlight2) { |
| background-color: yellow; |
| color:blue; |
| } |
| :root::highlight(example-highlight3) { |
| background-color: yellow; |
| color:blue; |
| } |
| </style> |
| </head> |
| <body><span>One </span><span>two </span><span>three...</span> |
| |
| <script> |
| let highlight1 = new Highlight(new StaticRange({startContainer: document.body, startOffset: 1, endContainer: document.body, endOffset: 2})); |
| |
| let highlight2 = new Highlight(new StaticRange({startContainer: document.body, startOffset: 2, endContainer: document.body, endOffset: 3})); |
| highlight2.add(new StaticRange({startContainer: document.body, startOffset: 4, endContainer: document.body, endOffset: 5})); |
| |
| let highlight3 = new Highlight(new StaticRange({startContainer: document.body, startOffset: 4, endContainer: document.body, endOffset: 8})); |
| highlight3.add(new StaticRange({startContainer: document.body, startOffset: 10, endContainer: document.body, endOffset: 12})); |
| highlight3.add(new StaticRange({startContainer: document.body, startOffset: 5, endContainer: document.body, endOffset: 6})); |
| |
| |
| CSS.highlights.set("example-highlight1", highlight1); |
| CSS.highlights.set("example-highlight2", highlight2); |
| CSS.highlights.set("example-highlight3", highlight3); |
| |
| shouldBe("highlight1.size","1"); |
| shouldBe("highlight2.size","2"); |
| shouldBe("highlight3.size","3"); |
| |
| shouldBe("CSS.highlights.size","3"); |
| |
| shouldBeTrue("CSS.highlights.has(\"example-highlight1\")"); |
| shouldBeTrue("CSS.highlights.has(\"example-highlight2\")"); |
| shouldBeTrue("CSS.highlights.has(\"example-highlight3\")"); |
| |
| shouldBe("CSS.highlights.get(\"example-highlight1\").entries().next().value[0].startOffset","1"); |
| shouldBe("CSS.highlights.get(\"example-highlight1\").entries().next().value[0].endOffset","2"); |
| |
| |
| </script> |
| |
| </body> |
| </html> |
