131 lines
3.8 KiB
HTML
131 lines
3.8 KiB
HTML
<!DOCTYPE HTML>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="resources/elementsFromPoint.js"></script>
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body {
|
|
height: 500px;
|
|
}
|
|
#simpleDiv {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: rgba(0,0,255,0.5);
|
|
}
|
|
#divWithPseudo {
|
|
position: absolute;
|
|
left: 50px;
|
|
top: 50px;
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: rgba(255,0,0,0.5);
|
|
}
|
|
#divWithPseudo::before {
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 20px;
|
|
width: 100px;
|
|
height: 100px;
|
|
content: "::before";
|
|
background-color: rgba(255,0,0,0.5);
|
|
z-index: 9999;
|
|
}
|
|
#divBetweenPseudo {
|
|
position: absolute;
|
|
left: 100px;
|
|
top: 100px;
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: rgba(0,255,0,0.5);
|
|
}
|
|
#withMargin {
|
|
margin-top: -15px;
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: rgba(0,0,0,0.5);
|
|
}
|
|
#inlineSpan {
|
|
float: right;
|
|
background-color: yellow;
|
|
width: 100px;
|
|
height: 1em;
|
|
}
|
|
#noPointerEvents {
|
|
position: absolute;
|
|
left: 50px;
|
|
top: 50px;
|
|
width: 100px;
|
|
height: 300px;
|
|
background-color: rgba(0,0,0,0.1);
|
|
pointer-events: none;
|
|
}
|
|
#threeD {
|
|
position: absolute;
|
|
transform: translate3d(-100px, -100px, 10px);
|
|
left: 140px;
|
|
top: 140px;
|
|
width: 200px;
|
|
height: 50px;
|
|
background-color: rgba(255,255,255,0.5);
|
|
}
|
|
</style>
|
|
<div id="simpleDiv"></div>
|
|
<div id="divWithPseudo"></div>
|
|
<div id="divBetweenPseudo"></div>
|
|
<div id="withMargin"><span id="inlineSpan"></span></div>
|
|
<div id="noPointerEvents"></div>
|
|
<div id="threeD"></div>
|
|
<script>
|
|
var body = document.body;
|
|
var html = document.documentElement;
|
|
test(function() {
|
|
checkElementsFromPointFourCorners('document', 'simpleDiv',
|
|
[simpleDiv, body, html],
|
|
[simpleDiv, body, html],
|
|
[withMargin, simpleDiv, body, html],
|
|
[divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html]);
|
|
}, "elementsFromPoint for each corner of a simple div");
|
|
|
|
test(function() {
|
|
checkElementsFromPointFourCorners('document', 'divWithPseudo',
|
|
[threeD, divWithPseudo, simpleDiv, body, html],
|
|
[threeD, divWithPseudo, simpleDiv, body, html],
|
|
[divWithPseudo, simpleDiv, body, html],
|
|
[divWithPseudo, divBetweenPseudo, divWithPseudo, simpleDiv, body, html]);
|
|
}, "elementsFromPoint for each corner of a div that has a pseudo-element");
|
|
|
|
test(function() {
|
|
checkElementsFromPointFourCorners('document', 'divBetweenPseudo',
|
|
[divWithPseudo, divBetweenPseudo, divWithPseudo, simpleDiv, body, html],
|
|
[divBetweenPseudo, simpleDiv, body, html],
|
|
[divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html],
|
|
[divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html]);
|
|
}, "elementsFromPoint for each corner of a div that is between another div and its pseudo-element");
|
|
|
|
test(function() {
|
|
checkElementsFromPointFourCorners('document', 'withMargin',
|
|
[withMargin, simpleDiv, body, html],
|
|
[divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html],
|
|
[withMargin, body, html],
|
|
[withMargin, body, html]);
|
|
}, "elementsFromPoint for each corner of a div that has a margin");
|
|
|
|
test(function() {
|
|
checkElementsFromPointFourCorners('document', 'noPointerEvents',
|
|
[threeD, divWithPseudo, simpleDiv, body, html],
|
|
[threeD, divWithPseudo, simpleDiv, body, html],
|
|
[withMargin, body, html],
|
|
[withMargin, body, html]);
|
|
}, "elementsFromPoint for each corner of a div with pointer-events:none");
|
|
|
|
test(function() {
|
|
checkElementsFromPointFourCorners('document', 'threeD',
|
|
[threeD, simpleDiv, body, html],
|
|
[threeD, body, html],
|
|
[threeD, simpleDiv, body, html],
|
|
[threeD, body, html]);
|
|
}, "elementsFromPoint for each corner of a div with a 3d transform");
|
|
</script>
|