| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script src="resources/js-test-selection-shared.js"></script> |
| </head> |
| <body> |
| <p id="description"></p> |
| <div id="console"></div> |
| <script> |
| description("Ensure cursor placement matches IE6/IE7/FF3 when clicking above/below lines in padding.") |
| |
| document.body.style.margin = 0; |
| |
| var div = document.createElement("div"); |
| div.style.cssText = "font-family: ahem; font-size: 20px; -webkit-text-fill-color: yellow; width: 40px; height: 80px; padding: 20px; background-color: green;"; |
| div.contentEditable = true; |
| |
| var firstText = document.createTextNode("XX"); |
| var firstDiv = document.createElement("div"); |
| firstDiv.appendChild(firstText); |
| firstDiv.style.cssText = "padding-bottom: 19px; border-bottom: 1px solid pink; margin-bottom: 20px"; |
| div.appendChild(firstDiv); |
| |
| var secondText = document.createTextNode("YY"); |
| var secondDiv = document.createElement("div"); |
| secondDiv.appendChild(secondText); |
| div.appendChild(secondDiv); |
| |
| document.body.insertBefore(div, document.body.firstChild); |
| |
| function clickShouldResultInRange(x, y, node, offset) { |
| if (window.eventSender) { |
| clickAt(x, y); |
| assertSelectionAt(node, offset); |
| } else { |
| tests.push({ |
| testFunction: function() { assertRange(node, offset); }, |
| clickString: " " + x + ", " + y } |
| ) |
| } |
| } |
| |
| function printClickStringForWaitingTest() |
| { |
| if (!tests[testIndex]) |
| return; |
| debug("Waiting for click @ " + tests[testIndex].clickString); |
| } |
| |
| var testIndex = 0; |
| var tests = []; |
| function runInteractiveTests() |
| { |
| testIndex = 0; |
| printClickStringForWaitingTest(); |
| document.body.addEventListener("mouseup", function() { |
| debug("Got click @ " + event.clientX + ", " + event.clientY); |
| var test = tests[testIndex]; |
| if (test) { |
| test.testFunction(); |
| testIndex++; |
| printClickStringForWaitingTest(); |
| } |
| }, false); |
| } |
| |
| // When clicking between divs separated by margins in an editable |
| // text region, the browsers differ in behavior: |
| // FF3: vertical padding box + some sort of overhang decent? |
| // IE6/IE7: vertical padding box |
| // IE8 b2: margin box |
| // Safari 3: margin box (but cursor goes at end of line) |
| |
| // We're going to follow IE 7's behavior and use the padding box height |
| // for determining if the click below a div (in the padding/margin region) |
| |
| // The rules for clicking above or below the text are different on Windows and Mac. |
| function editingTest(editingBehavior) |
| { |
| if (window.internals) |
| internals.settings.setEditingBehavior(editingBehavior); |
| |
| var expectMacStyleSelection = editingBehavior == "mac"; |
| |
| clickShouldResultInRange(10, 10, firstText, 0); |
| clickShouldResultInRange(40, 10, firstText, expectMacStyleSelection ? 0 : 1); |
| clickShouldResultInRange(70, 10, firstText, expectMacStyleSelection ? 0 : 2); |
| |
| clickShouldResultInRange(10, 30, firstText, 0); |
| clickShouldResultInRange(70, 30, firstText, 2); |
| |
| clickShouldResultInRange(10, 50, firstText, expectMacStyleSelection ? 2 : 0); |
| clickShouldResultInRange(40, 50, firstText, expectMacStyleSelection ? 2 : 1); |
| clickShouldResultInRange(70, 50, firstText, 2); |
| |
| clickShouldResultInRange(10, 70, secondText, 0); |
| clickShouldResultInRange(40, 70, secondText, expectMacStyleSelection ? 0 : 1); |
| clickShouldResultInRange(70, 70, secondText, expectMacStyleSelection ? 0 : 2); |
| |
| clickShouldResultInRange(10, 110, secondText, expectMacStyleSelection ? 2 : 0); |
| clickShouldResultInRange(40, 110, secondText, expectMacStyleSelection ? 2 : 1); |
| clickShouldResultInRange(70, 110, secondText, 2); |
| } |
| |
| editingTest("mac"); |
| editingTest("win"); |
| |
| // Clean up after ourselves if we're not being run in the browser |
| if (window.eventSender) { |
| document.body.removeChild(div); |
| } else { |
| runInteractiveTests(); |
| } |
| |
| var successfullyParsed = true; |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
