Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added test for :hover and javascript events on the visual overflow of…
… a region. [CSS Regions] Content in a region's visible overflow does not trigger :hover state, nor JavaScript events https://bugs.webkit.org/show_bug.cgi?id=112010 Reviewed by Antti Koivisto. * fast/regions/hover-and-js-in-visual-overflow-expected.html: Added. * fast/regions/hover-and-js-in-visual-overflow.html: Added. Canonical link: https://commits.webkit.org/142894@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@159640 268f45cc-cd09-0410-ab3c-d52691b4dbfc
- Loading branch information
Showing
3 changed files
with
174 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
68 changes: 68 additions & 0 deletions
68
LayoutTests/fast/regions/hover-and-js-in-visual-overflow-expected.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Mouse selection in visible overflow of a region</title> | ||
| <style> | ||
| body, p, ol { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| input { | ||
| width: 100px; | ||
| } | ||
| #content { | ||
| font-family: monospace; | ||
| font-size: 20px; | ||
| line-height: 1em; | ||
| } | ||
| .spacer { | ||
| width: 100%; | ||
| height: 80px; | ||
| display: block; | ||
| } | ||
| .highlite { | ||
| background-color: green; | ||
| color: white; | ||
| } | ||
| #region { | ||
| border: 2px solid black; | ||
| background-color: lightgray; | ||
| width: 100px; | ||
| height: 100px; | ||
| } | ||
| #parent { | ||
| float: left; | ||
| height: 200px; | ||
| } | ||
| #region p { | ||
| background-color: red; | ||
| width: 100%; | ||
| height: 50%; | ||
| } | ||
| #result { | ||
| color: green; | ||
| font-weight: bold; | ||
| } | ||
| ol { | ||
| list-style:none; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="parent"> | ||
| <div id="region"> | ||
| <div id="content"><span class="spacer"></span>This text has <span class="highlite">overflow</span></div> | ||
| </div> | ||
| </div> | ||
| <!-- <span class="highlite">test</span> --> | ||
| <ol> | ||
| <li>You should not see any red before or during this test.</li> | ||
| <li>Move the mouse over the blue word (<em>overflow</em>) outside the gray square.</li> | ||
| <li>The word should become white on a green background.</li> | ||
| <li>You should see the word "PASS" displayed below, in green.</li> | ||
| </ol> | ||
|
|
||
| <div id="result">PASS</div> | ||
| </body> | ||
| </html> |
94 changes: 94 additions & 0 deletions
94
LayoutTests/fast/regions/hover-and-js-in-visual-overflow.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Mouse selection in visible overflow of a region</title> | ||
| <style> | ||
| body, p, ol { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| input { | ||
| width: 100px; | ||
| } | ||
| #content { | ||
| font-family: monospace; | ||
| font-size: 20px; | ||
| line-height: 1em; | ||
| -webkit-flow-into: f; | ||
| } | ||
| .spacer { | ||
| width: 100%; | ||
| height: 80px; | ||
| display: block; | ||
| } | ||
| .highlite { | ||
| color: deepskyblue; | ||
| } | ||
| .highlite:hover { | ||
| background-color: green; | ||
| color: white; | ||
| } | ||
| #region { | ||
| border: 2px solid black; | ||
| background-color: lightgray; | ||
| width: 100px; | ||
| height: 100px; | ||
| -webkit-flow-from: f; | ||
| } | ||
| #parent { | ||
| float: left; | ||
| height: 200px; | ||
| } | ||
| #region p { | ||
| background-color: red; | ||
| width: 100%; | ||
| height: 50%; | ||
| } | ||
| #result { | ||
| color: green; | ||
| font-weight: bold; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <script type="text/javascript"> | ||
| if (window.testRunner) | ||
| testRunner.waitUntilDone(); | ||
|
|
||
| function beginTest() { | ||
| if (window.eventSender) { | ||
| var obj = document.querySelector(".highlite"); | ||
|
|
||
| // move mouse on the hover test object | ||
| eventSender.mouseMoveTo(obj.offsetLeft + 5, obj.offsetTop + 5); | ||
| eventSender.mouseDown(0); | ||
|
|
||
| testRunner.notifyDone(); | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <body onload="beginTest()"> | ||
| <div id="parent"> | ||
| <div id="region"> | ||
| <p></p> | ||
| </div> | ||
| </div> | ||
| <ol> | ||
| <li>You should not see any red before or during this test.</li> | ||
| <li>Move the mouse over the blue word (<em>overflow</em>) outside the gray square.</li> | ||
| <li>The word should become white on a green background.</li> | ||
| <li>You should see the word "PASS" displayed below, in green.</li> | ||
| </ol> | ||
| <div id="content"><span class="spacer"></span>This text has <span class="highlite">overflow</span></div> | ||
| <div id="result"> </div> | ||
| <script> | ||
| var word = document.querySelector(".highlite"); | ||
| word.addEventListener("mouseover", function(evt) | ||
| { | ||
| document.getElementById("result").innerHTML = "PASS"; | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |