third_party/WebKit/LayoutTests/accessibility/ellipsis-text.html

   1 <html>
   2 <html>
   3 <head>
   4 <script src="../resources/js-test.js"></script>
   5 </head>
   6 <body id="body">
   7
   8 text
   9 <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>
  10 <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>
  11 text
  12
  13     <p id="description"></p>
  14     <div id="console"></div>
  15
  16     <script>
  17         if (window.accessibilityController) {
  18             description("This test makes sure that the bounds of text that overflows with ellipsis is correct (shortened to the ellipsis that is).");
  19
  20             // The width of the ellipsis text should be short.
  21             document.getElementById("text-ellipsis").focus();
  22             var textContainer = accessibilityController.focusedElement;
  23             var textNode = textContainer.childrenCount ? textContainer.childAtIndex(0) : textContainer;
  24             var clippedWidth = textNode.width;
  25
  26             // The width of non-ellipsis'd text should be longer.
  27             document.getElementById("text-noellipsis").focus();
  28             textContainer = accessibilityController.focusedElement;
  29             textNode = textContainer.childrenCount ? textContainer.childAtIndex(0) : textContainer;
  30             var fullWidth = textNode.width;
  31
  32             shouldBeTrue("clippedWidth < fullWidth");
  33         }
  34     </script>
  35
  36 </body>
  37 </html>