ellipsis-text.html | Explore in Territory

<html>
<html>
<head>
<script src="../resources/js-test.js"></script>
</head>
<body id="body">
 
text
<div id="text-ellipsis" tabindex="0" style="width:50px; text-overflow:ellipsis; overflow:hidden; white-space: nowrap;" class="name">My Writing Nook for iPad. More text, more text, more text.</div>
<div id="text-noellipsis" tabindex="0" style="width:50px; white-space: nowrap;" class="name">My Writing Nook for iPad. More text, more text, more text.</div>
text

    <p id="description"></p>
    <div id="console"></div>
     
    <script>
        if (window.accessibilityController) {
            description("This test makes sure that the bounds of text that overflows with ellipsis is correct (shortened to the ellipsis that is).");

            // The width of the ellipsis text should be short.
            document.getElementById("text-ellipsis").focus();
            var textContainer = accessibilityController.focusedElement;
            var textNode = textContainer.childrenCount ? textContainer.childAtIndex(0) : textContainer;
            var clippedWidth = textNode.width;

            // The width of non-ellipsis'd text should be longer.
            document.getElementById("text-noellipsis").focus();
            textContainer = accessibilityController.focusedElement;
            textNode = textContainer.childrenCount ? textContainer.childAtIndex(0) : textContainer;
            var fullWidth = textNode.width;

            shouldBeTrue("clippedWidth < fullWidth");
        }
    </script>

</body>
</html>
chromium/third_party/blink/web_tests/accessibility/ellipsis-text.html
