| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Selections in hidden elements</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <link rel='stylesheet' href='../../resources/testharness.css'> |
| </head> |
| <body> |
| <style> |
| container, my-text { |
| display: block; |
| } |
| |
| .hide { |
| position:relative; |
| overflow:hidden; |
| height:0px; |
| width:10px; |
| } |
| .select { |
| height:11px; |
| width:1px; |
| padding:0px; |
| border:1px solid blue; |
| box-sizing:content-box; |
| overflow:hidden; |
| } |
| .abs { |
| position: absolute; |
| } |
| .borderBox { |
| box-sizing:border-box; |
| } |
| </style> |
| <container> |
| <textarea class=select>test text</textarea> |
| <my-text class=select>test text</my-text> |
| </container> |
| <script> |
| function checkSelectable(element, expected) |
| { |
| var selection = document.getSelection(); |
| if (element.select) |
| element.select(); |
| else |
| selection.selectAllChildren(element); |
| |
| var selectionText = selection.toString(); |
| if (expected) |
| assert_equals(selectionText, "test text"); |
| else |
| assert_equals(selectionText, ""); |
| } |
| |
| var textarea = document.querySelector("textarea"); |
| var myText = document.querySelector("my-text"); |
| |
| test(function () { |
| checkSelectable(textarea, true); |
| }, "Selecting in barely visible textarea"); |
| |
| test(function () { |
| checkSelectable(myText, true); |
| }, "Selecting in barely visible div"); |
| |
| document.querySelector("container").classList.add("hide"); |
| |
| test(function () { |
| checkSelectable(textarea, false); |
| }, "Selecting in textarea hidden by container"); |
| |
| test(function () { |
| checkSelectable(myText, false); |
| }, "Selecting in div hidden by container"); |
| |
| textarea.classList.add("abs"); |
| myText.classList.add("abs"); |
| |
| test(function () { |
| checkSelectable(textarea, true); |
| }, "Selecting in absolute positioned textarea hidden by container"); |
| |
| test(function () { |
| checkSelectable(myText, true); |
| }, "Selecting in absolute positioned div hidden by container"); |
| |
| textarea.classList.add("borderBox"); |
| myText.classList.add("borderBox"); |
| |
| test(function () { |
| checkSelectable(textarea, true); |
| }, "Selecting in absolute positioned zero content width textarea hidden by container (quirk behavior)"); |
| |
| test(function () { |
| checkSelectable(myText, false); |
| }, "Selecting in absolute positioned zero content width div hidden by container"); |
| |
| </script> |
| </body> |
| </html> |
