106 lines
4.6 KiB
HTML
106 lines
4.6 KiB
HTML
<!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> |