| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| * { box-sizing: border-box; font-family: ahem; } |
| body { margin: 0; } |
| div { position: absolute; top: 0; left: 0; } |
| |
| .whiteText { color: white; } |
| .grayText { color: gray; } |
| .lightGrayText { color: lightgray; } |
| .darkGrayText { color: dimgray; } |
| .blackText { color: black; } |
| .dfGrayText { color: #ddd; } |
| |
| .whiteBackground { background-color: white; } |
| .grayBackground { background-color: gray; } |
| .blackBackground { background-color: black; } |
| .dfGrayBackground { background-color: #4a525a; } |
| </style> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function output(s) |
| { |
| window.log.innerText += s + "\n"; |
| } |
| |
| function runTest() |
| { |
| if (!window.internals) { |
| output("This test cannot be run outside of WebKitTestRunner."); |
| return; |
| } |
| |
| function dumpIndicatorBoundsForElement(el) |
| { |
| var indicatorOptions = { |
| "useBoundingRectAndPaintAllContentForComplexRanges": true, |
| "computeEstimatedBackgroundColor": true, |
| "respectTextColor": true, |
| }; |
| var range = internals.rangeFromLocationAndLength(el, 0, 9); |
| var indicator = window.internals.textIndicatorForRange(range, indicatorOptions); |
| var rects = indicator.textRectsInBoundingRectCoordinates; |
| |
| output(`${el.id}: ` + (rects.length == 1 ? "NOT legible" : "legible")); |
| for (var rect of rects) |
| output(` ${rect.x} ${rect.y} ${rect.width} ${rect.height}`); |
| } |
| |
| dumpIndicatorBoundsForElement(document.getElementById("whiteTextWhiteBackground")); |
| dumpIndicatorBoundsForElement(document.getElementById("whiteTextGrayBackground")); |
| dumpIndicatorBoundsForElement(document.getElementById("whiteTextBlackBackground")); |
| |
| dumpIndicatorBoundsForElement(document.getElementById("grayTextWhiteBackground")); |
| dumpIndicatorBoundsForElement(document.getElementById("grayTextGrayBackground")); |
| dumpIndicatorBoundsForElement(document.getElementById("grayTextBlackBackground")); |
| |
| dumpIndicatorBoundsForElement(document.getElementById("lightGrayTextWhiteBackground")); |
| dumpIndicatorBoundsForElement(document.getElementById("lightGrayTextGrayBackground")); |
| dumpIndicatorBoundsForElement(document.getElementById("lightGrayTextBlackBackground")); |
| |
| dumpIndicatorBoundsForElement(document.getElementById("darkGrayTextWhiteBackground")); |
| dumpIndicatorBoundsForElement(document.getElementById("darkGrayTextGrayBackground")); |
| dumpIndicatorBoundsForElement(document.getElementById("darkGrayTextBlackBackground")); |
| |
| dumpIndicatorBoundsForElement(document.getElementById("blackTextWhiteBackground")); |
| dumpIndicatorBoundsForElement(document.getElementById("blackTextGrayBackground")); |
| dumpIndicatorBoundsForElement(document.getElementById("blackTextBlackBackground")); |
| |
| dumpIndicatorBoundsForElement(document.getElementById("dfTextDfBackground")); |
| |
| // Remove the test cases so they don't show up in the dump. |
| document.getElementById("testCases").innerText = ""; |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <div id="testCases"> |
| <div class="whiteText whiteBackground" id="whiteTextWhiteBackground">test<br><br><br>test</div> |
| <div class="whiteText grayBackground" id="whiteTextGrayBackground">test<br><br><br>test</div> |
| <div class="whiteText blackBackground" id="whiteTextBlackBackground">test<br><br><br>test</div> |
| |
| <div class="grayText whiteBackground" id="grayTextWhiteBackground">test<br><br><br>test</div> |
| <div class="grayText grayBackground" id="grayTextGrayBackground">test<br><br><br>test</div> |
| <div class="grayText blackBackground" id="grayTextBlackBackground">test<br><br><br>test</div> |
| |
| <div class="lightGrayText whiteBackground" id="lightGrayTextWhiteBackground">test<br><br><br>test</div> |
| <div class="lightGrayText grayBackground" id="lightGrayTextGrayBackground">test<br><br><br>test</div> |
| <div class="lightGrayText blackBackground" id="lightGrayTextBlackBackground">test<br><br><br>test</div> |
| |
| <div class="darkGrayText whiteBackground" id="darkGrayTextWhiteBackground">test<br><br><br>test</div> |
| <div class="darkGrayText grayBackground" id="darkGrayTextGrayBackground">test<br><br><br>test</div> |
| <div class="darkGrayText blackBackground" id="darkGrayTextBlackBackground">test<br><br><br>test</div> |
| |
| <div class="blackText whiteBackground" id="blackTextWhiteBackground">test<br><br><br>test</div> |
| <div class="blackText grayBackground" id="blackTextGrayBackground">test<br><br><br>test</div> |
| <div class="blackText blackBackground" id="blackTextBlackBackground">test<br><br><br>test</div> |
| |
| <div class="dfGrayText dfGrayBackground" id="dfTextDfBackground">test<br><br><br>test</div> |
| </div> |
| <pre id="log"></pre> |
| </body> |
| </html> |
