Bug 1516963 - Make grid, flex, etc. be a selection target themselves if they contain no selectable children. r=emilio

Exclude replaced frame likes image frames otherwise
editor/libeditor/tests/test_abs_positioner_positioning_elements.html
will break.

Differential Revision: https://phabricator.services.mozilla.com/D26049

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Ting-Yu Lin 2019-04-05 00:04:32 +00:00
Родитель 655cd99db5
Коммит a331856c45
16 изменённых файлов: 339 добавлений и 4 удалений

Просмотреть файл

@ -0,0 +1,16 @@
<!DOCTYPE HTML>
<html>
<title>Bug 1516963 Reference: Test AccessibleCaret doesn't show when clicking on an empty grid container.</title>
<style>
#container {
display: grid;
border: 1px solid blue;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<body>
<div id="container"></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,30 @@
<!DOCTYPE HTML>
<html class="reftest-wait">
<title>Bug 1516963: Test AccessibleCaret doesn't show when clicking on an empty grid container.</title>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style>
#container {
display: grid;
border: 1px solid blue;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<script>
document.addEventListener("selectionchange", () => {
ok(window.getSelection().isCollapsed, "The selection should be collapsed!");
});
function click() {
let container = document.getElementById("container");
synthesizeMouseAtCenter(container, {});
setTimeout(() => { document.documentElement.removeAttribute("class"); });
}
</script>
<body onload="SimpleTest.waitForFocus(click);">
<div id="container"></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,16 @@
<!DOCTYPE HTML>
<html>
<title>Bug 1516963 Reference: Test AccessibleCaret doesn't show when clicking on an empty flex container.</title>
<style>
#container {
display: flex;
border: 1px solid blue;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<body>
<div id="container"></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,30 @@
<!DOCTYPE HTML>
<html class="reftest-wait">
<title>Bug 1516963: Test AccessibleCaret doesn't show when clicking on an empty flex container.</title>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style>
#container {
display: flex;
border: 1px solid blue;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<script>
document.addEventListener("selectionchange", () => {
ok(window.getSelection().isCollapsed, "The selection should be collapsed!");
});
function click() {
let container = document.getElementById("container");
synthesizeMouseAtCenter(container, {});
setTimeout(() => { document.documentElement.removeAttribute("class"); });
}
</script>
<body onload="SimpleTest.waitForFocus(click);">
<div id="container"></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,20 @@
<!DOCTYPE HTML>
<html>
<title>Bug 1516963 Reference: Test AccessibleCaret doesn't show when clicking on a grid container.</title>
<style>
#container {
display: grid;
border: 1px solid blue;
width: 100px;
height: 100px;
background-color: yellow;
}
button {
height: 40px;
width: 60px;
}
</style>
<body>
<div id="container"><button>Grid</button></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,34 @@
<!DOCTYPE HTML>
<html class="reftest-wait">
<title>Bug 1516963: Test AccessibleCaret doesn't show when clicking on a grid container.</title>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style>
#container {
display: grid;
border: 1px solid blue;
width: 100px;
height: 100px;
background-color: yellow;
}
button {
height: 40px;
width: 60px;
}
</style>
<script>
document.addEventListener("selectionchange", () => {
ok(window.getSelection().isCollapsed, "The selection should be collapsed!");
});
function click() {
let container = document.getElementById("container");
synthesizeMouseAtCenter(container, {});
setTimeout(() => { document.documentElement.removeAttribute("class"); });
}
</script>
<body onload="SimpleTest.waitForFocus(click);">
<div id="container"><button>Grid</button></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,20 @@
<!DOCTYPE HTML>
<html>
<title>Bug 1516963 Reference: Test AccessibleCaret doesn't show when clicking on a flex container.</title>
<style>
#container {
display: flex;
border: 1px solid blue;
width: 100px;
height: 100px;
background-color: yellow;
}
button {
height: 40px;
width: 60px;
}
</style>
<body>
<div id="container"><button>Flex</button></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,34 @@
<!DOCTYPE HTML>
<html class="reftest-wait">
<title>Bug 1516963: Test AccessibleCaret doesn't show when clicking on a flex container.</title>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style>
#container {
display: flex;
border: 1px solid blue;
width: 100px;
height: 100px;
background-color: yellow;
}
button {
height: 40px;
width: 60px;
}
</style>
<script>
document.addEventListener("selectionchange", () => {
ok(window.getSelection().isCollapsed, "The selection should be collapsed!");
});
function click() {
let container = document.getElementById("container");
synthesizeMouseAtCenter(container, {});
setTimeout(() => { document.documentElement.removeAttribute("class"); });
}
</script>
<body onload="SimpleTest.waitForFocus(click);">
<div id="container"><button>Flex</button></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,16 @@
<!DOCTYPE HTML>
<html>
<title>Bug 1516963 Reference: Test AccessibleCaret doesn't show when clicking on an empty table container.</title>
<style>
#container {
display: table;
border: 1px solid blue;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<body>
<div id="container"></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,30 @@
<!DOCTYPE HTML>
<html class="reftest-wait">
<title>Bug 1516963: Test AccessibleCaret doesn't show when clicking on an empty table container.</title>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style>
#container {
display: table;
border: 1px solid blue;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<script>
document.addEventListener("selectionchange", () => {
ok(window.getSelection().isCollapsed, "The selection should be collapsed!");
});
function click() {
let container = document.getElementById("container");
synthesizeMouseAtCenter(container, {});
setTimeout(() => { document.documentElement.removeAttribute("class"); });
}
</script>
<body onload="SimpleTest.waitForFocus(click);">
<div id="container"></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,20 @@
<!DOCTYPE HTML>
<html>
<title>Bug 1516963 Reference: Test AccessibleCaret doesn't show when clicking on a table container.</title>
<style>
#container {
display: table;
border: 1px solid blue;
width: 100px;
height: 100px;
background-color: yellow;
}
button {
height: 40px;
width: 60px;
}
</style>
<body>
<div id="container"><button>Table</button></div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,34 @@
<!DOCTYPE HTML>
<html class="reftest-wait">
<title>Bug 1516963: Test AccessibleCaret doesn't show when clicking on a table container.</title>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style>
#container {
display: table;
border: 1px solid blue;
width: 100px;
height: 100px;
background-color: yellow;
}
button {
height: 40px;
width: 60px;
}
</style>
<script>
document.addEventListener("selectionchange", () => {
ok(window.getSelection().isCollapsed, "The selection should be collapsed!");
});
function click() {
let container = document.getElementById("container");
synthesizeMouseAtCenter(container, {});
setTimeout(() => { document.documentElement.removeAttribute("class"); });
}
</script>
<body onload="SimpleTest.waitForFocus(click);">
<div id="container"><button>Table</button></div>
</body>
</html>

Просмотреть файл

@ -333,6 +333,18 @@ support-files =
bug1510942-1-ref.html
bug1510942-2.html
bug1510942-2-ref.html
bug1516963-1.html
bug1516963-1-ref.html
bug1516963-2.html
bug1516963-2-ref.html
bug1516963-3.html
bug1516963-3-ref.html
bug1516963-4.html
bug1516963-4-ref.html
bug1516963-5.html
bug1516963-5-ref.html
bug1516963-6.html
bug1516963-6-ref.html
bug1524266-1.html
bug1524266-1-ref.html
bug1524266-2.html

Просмотреть файл

@ -111,6 +111,16 @@ var tests = [
[ 'bug613807-1.html' , 'bug613807-1-ref.html' ] ,
[ 'bug1082486-1.html', 'bug1082486-1-ref.html'] ,
[ 'bug1082486-2.html', 'bug1082486-2-ref.html'] ,
// The following test cases uses mouse events. We need to make
// AccessibleCaret unhide for them.
function() {SpecialPowers.pushPrefEnv({'set': [['layout.accessiblecaret.hide_carets_for_mouse_input', false]]}, nextTest);} ,
[ 'bug1516963-1.html', 'bug1516963-1-ref.html'] ,
[ 'bug1516963-2.html', 'bug1516963-2-ref.html'] ,
[ 'bug1516963-3.html', 'bug1516963-3-ref.html'] ,
[ 'bug1516963-4.html', 'bug1516963-4-ref.html'] ,
[ 'bug1516963-5.html', 'bug1516963-5-ref.html'] ,
[ 'bug1516963-6.html', 'bug1516963-6-ref.html'] ,
function() {SpecialPowers.pushPrefEnv({'clear': [['layout.accessiblecaret.hide_carets_for_mouse_input']]}, nextTest);} ,
// The following test cases are all involving with one sending
// synthesizeKey(), the other without. They fail when accessiblecaret
// is enabled. Test them with the preference off.

Просмотреть файл

@ -5034,9 +5034,7 @@ static FrameTarget GetSelectionClosestFrame(nsIFrame* aFrame,
if (!target.IsNull()) return target;
}
nsIFrame* kid = aFrame->PrincipalChildList().FirstChild();
if (kid) {
if (nsIFrame* kid = aFrame->PrincipalChildList().FirstChild()) {
// Go through all the child frames to find the closest one
nsIFrame::FrameWithDistance closest = {nullptr, nscoord_MAX, nscoord_MAX};
for (; kid; kid = kid->GetNextSibling()) {
@ -5050,7 +5048,12 @@ static FrameTarget GetSelectionClosestFrame(nsIFrame* aFrame,
return GetSelectionClosestFrameForChild(closest.mFrame, aPoint, aFlags);
}
}
return FrameTarget(aFrame, false, false);
// Use frame edge for grid, flex and tables, but not replaced frames like
// images.
bool useFrameEdge = !aFrame->StyleDisplay()->IsInlineInsideStyle() &&
!aFrame->IsFrameOfType(nsIFrame::eReplaced);
return FrameTarget(aFrame, useFrameEdge, false);
}
static nsIFrame::ContentOffsets OffsetsForSingleFrame(nsIFrame* aFrame,

Просмотреть файл

@ -2017,6 +2017,16 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleDisplay {
// (But please audit all callers before changing.)
}
bool IsInlineInsideStyle() const {
return mozilla::StyleDisplay::Inline == mDisplay ||
mozilla::StyleDisplay::Ruby == mDisplay ||
mozilla::StyleDisplay::RubyBase == mDisplay ||
mozilla::StyleDisplay::RubyBaseContainer == mDisplay ||
mozilla::StyleDisplay::RubyText == mDisplay ||
mozilla::StyleDisplay::RubyTextContainer == mDisplay ||
mozilla::StyleDisplay::Contents == mDisplay;
}
bool IsBlockOutsideStyle() const {
return mozilla::StyleDisplay::Block == mDisplay ||
mozilla::StyleDisplay::Flex == mDisplay ||