mirror of
https://github.com/servo/servo.git
synced 2025-07-10 08:53:41 +01:00
76 lines
2.3 KiB
HTML
76 lines
2.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<meta charset=utf-8>
|
|
<title>Element Timing: background image affecting multiple elements</title>
|
|
<body>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
.my_div {
|
|
background-image: url('resources/square100.png');
|
|
}
|
|
#div1 {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
#div2 {
|
|
width: 200px;
|
|
height: 100px;
|
|
}
|
|
</style>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="resources/element-timing-helpers.js"></script>
|
|
<script>
|
|
async_test(function (t) {
|
|
let beforeRender = performance.now();
|
|
let numObservedElements = 0;
|
|
let observedDiv1 = false;
|
|
let observedDiv2 = false;
|
|
const index = window.location.href.lastIndexOf('/');
|
|
const pathname = window.location.href.substring(0, index) +
|
|
'/resources/square100.png';
|
|
const observer = new PerformanceObserver(
|
|
t.step_func(function(entryList) {
|
|
entryList.getEntries().forEach(entry => {
|
|
numObservedElements++;
|
|
if (entry.id == 'div1') {
|
|
observedDiv1 = true;
|
|
checkElement(entry, pathname, 'et1', 'div1', beforeRender,
|
|
document.getElementById('div1'));
|
|
// Div is in the top left corner.
|
|
checkRect(entry, [0, 100, 0, 100]);
|
|
checkNaturalSize(entry, 100, 100);
|
|
}
|
|
else if (entry.id == 'div2') {
|
|
observedDiv2 = true;
|
|
checkElement(entry, pathname, 'et2', 'div2', beforeRender,
|
|
document.getElementById('div2'));
|
|
// Div is below div1, on the left.
|
|
checkRect(entry, [0, 200, 100, 200]);
|
|
checkNaturalSize(entry, 100, 100);
|
|
}
|
|
else {
|
|
assert_unreached("Should not observe other elements!");
|
|
}
|
|
if (numObservedElements === 2) {
|
|
assert_true(observedDiv1);
|
|
assert_true(observedDiv2);
|
|
t.done();
|
|
}
|
|
});
|
|
})
|
|
);
|
|
observer.observe({entryTypes: ['element']});
|
|
}, 'Background image affecting various elements is observed.');
|
|
</script>
|
|
<div id="div1" class="my_div" elementtiming="et1">
|
|
<img width=50 height=50 src='resources/circle.svg'/>
|
|
</div>
|
|
<div width=200 height=100 id="div2" class="my_div" elementtiming="et2">
|
|
Sample text inside div.
|
|
</div>
|
|
<div id="div3"/>
|
|
I am a div that should not be observed!
|
|
</div>
|
|
</body>
|