<aside>click anywhere to toggle containment</aside>

<div id="upside_down">
  <div class="inside"></div>
  <div class="outside">not painted</div>
  <div class="partial">not painted</div>
</div>

<main>
  <p id="desc">contain: none;</p>
  <div class="inside"></div>
  <div class="outside"></div>
  <div class="partial"></div>
</main>

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

html {
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  height: 100%;
  overflow: hidden;
}
body {
  align-items: center;
  background-color: #1d1e22;
  color: white;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  margin: 0;
  padding: 0;
}

aside {
  left: 0;
  margin: 20px 0;
  position: fixed;
  text-align: center;
  top: 50px;
  width: 100%;
}

main,
#upside_down {
  background-color: #333;
  border: 3px solid rebeccapurple;
  height: 200px;
  position: relative;
  width: 200px;
  
  div {
    border: 2px solid #269b16;
    height: 100px;
    position: absolute;
    width: 100px;
  }
  
  p {
    margin: 5px;
    text-align: center;
  }
}

#upside_down {
  opacity: 0;
  position: absolute;
  
  div {
    align-items: center;
    border-style: dotted;
    color: #fff;
    display: flex;
    font-size: 14px;
    justify-content: center;
  }
}

main.paint {
  contain: paint;
}
#upside_down.rift {
  opacity: 0.25;
}

.inside {
  left: 25%;
  top: 25%;
}
.outside {
  left: -60%;
  top: -60%;
}
.partial {
  left: 80%;
  top: 80%;
}

const main = document.querySelector('main');
const desc = document.querySelector('#desc');
const ud = document.querySelector('#upside_down');

document.body.addEventListener('click', function () {
  main.classList.toggle('paint');
  ud.classList.toggle('rift');
  
  desc.innerText = main.classList.contains('paint') ? 'contain: paint;' : 'contain: none;';
});