global synthetic event test

by Julien Etienne

HTML

<div id="EventWindow">
    <!-- Legacy propagation dependent emulations -->
      <div id="content1EmulatedSubject">Conent1</div>
     <div id="content2EmulatedSubject">Conent2</div>
</div>

<div id="SyntheticWindow">
  <!-- Non interferance modern event system -->
  <button>Button 1</button>
  <button>Button 2</button>
  <div id="content1">Conent1</div>
  <div id="content2">Conent2</div>
</div>

CSS

#EventWindow {
  width: 200px;
  height: 200px;
  background: lightblue;
  top: 320px;
}

#SyntheticWindow {
  width: 300px;
  height: 300px;
  background: yellow;
}
#content1{
   padding: 1rem;
   background: lime;
}
#content2{
   padding: 1rem;
   background: #FF0080;
}
#content1EmulatedSubject{
     padding: 1rem;
   background: lime;
}

#content2EmulatedSubject{
     padding: 1rem;
   background:  #FF0080;
}

JavaScript

const EventWindow = document.getElementById('EventWindow');
const SyntheticWindow = document.getElementById('SyntheticWindow');

// Make both position absolute:
SyntheticWindow.style.position = 'absolute';
EventWindow.style.position = 'absolute';

// Add event listener to synthetic window