eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-04-27 18:17:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

Tests/LibWeb: Import some CSSOM WPT tests

Browse Source
This commit is contained in:
Aliaksandr Kalenik
2024-11-12 21:53:44 +02:00
committed by Andreas Kling
parent 13b7c26e9f
commit d0646236ca
Notes: github-actions[bot] 2024-11-13 10:08:08 +00:00 
Author: https://github.com/kalenikaliaksandr
Commit: https://github.com/LadybirdBrowser/ladybird/commit/d0646236ca6
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2305
52 changed files with 2005 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementsFromPoint-simple.html Normal file
View File

@@ -0,0 +1,131 @@
<!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>