electron/spec/fixtures/pages/overlay.html
Jeremy Rose db7c92fd57
test: drop now-empty remote runner (#35343)
* test: drop the now-empty remote runner from CI

* move fixtures to spec-main

* remove remote runner

* fix stuff

* remove global-paths hack

* move ts-smoke to spec/

* fix test after merge

* rename spec-main to spec

* no need to ignore spec/node_modules twice

* simplify spec-runner a little

* no need to hash pj/yl twice

* undo lint change to verify-mksnapshot.py

* excessive ..

* update electron_woa_testing.yml

* don't search for test-results-remote.xml

it is never produced now
2022-08-16 15:23:13 -04:00

84 lines
2.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
:root {
--fallback-title-bar-height: 40px;
}
.draggable {
app-region: drag;
/* Pre-fix app-region during standardization process */
-webkit-app-region: drag;
}
.nonDraggable {
app-region: no-drag;
/* Pre-fix app-region during standardization process */
-webkit-app-region: no-drag;
}
#titleBarContainer {
position: absolute;
top: env(titlebar-area-y, 0);
height: env(titlebar-area-height, var(--fallback-title-bar-height));
width: 100%;
}
#titleBar {
position: absolute;
top: 0;
display: flex;
user-select: none;
height: 100%;
left: env(titlebar-area-x, 0);
width: env(titlebar-area-width, 100%);
}
#mainContent {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: env(titlebar-area-height, var(--fallback-title-bar-height));
overflow-y: scroll;
}
</style>
</head>
<body>
<script>
const {ipcRenderer} = require('electron');
navigator.windowControlsOverlay.ongeometrychange = function() {
const {x, y, width, height} = navigator.windowControlsOverlay.getTitlebarAreaRect();
ipcRenderer.send('geometrychange', {x, y, width, height});
};
</script>
<div id="titleBarContainer">
<div id="titleBar" class=" draggable">
<span class="draggable">Title goes here</span>
<input class="nonDraggable" type="text" placeholder="Search"></input>
</div>
</div>
<div id="mainContent"><!-- The rest of the webpage --></div>
<script>
function getCssOverlayProperties() {
const cssOverlayProps = {};
const titleBarContainer = document.getElementById('titleBarContainer');
const titleBar = document.getElementById('titleBar');
cssOverlayProps.y = titleBarContainer.computedStyleMap().get('top').value;
cssOverlayProps.height = titleBarContainer.computedStyleMap().get('height').value;
cssOverlayProps.x = titleBar.computedStyleMap().get('left').value;
cssOverlayProps.width = titleBar.computedStyleMap().get('width').value;
return cssOverlayProps;
}
function getJSOverlayProperties() {
const {x, y, width, height} = navigator.windowControlsOverlay.getTitlebarAreaRect();
return {x, y, width, height};
}
</script>
</body>
</html>