test.css

@charset "utf-8";

.some-selector {
  padding: 20px 20vmin 20vmax 10px;
  width: .2vw;
  height: 20.3vh;
  margin-top: -2vh;
  text-shadow: 3vw 5vh 6vmin blue;
}

.calculating {
  width: calc(30vw - 20px);
}

.some-other-selector {
  margin-left: 20.3vh;
}

.ie-only-test {
  filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=1vh, OffY=1vw, Color=#000000);
}

.priority-important-test {
  height: 20.3vh !important;
}

.use_css_content_hack-test {
  content: 'viewport-units-buggyfill; width: 80vmax; height: 80vmax;';
}

@supports ( transform-origin: 5% 5% ) {
  .some-selector {
    padding: 20px 10vmin -10vmax 10px;
    width: 0.5vw;
    height: 50.3vh;
  }
  .some-other-selector {
    height: 50.3vh;
  }
}

@media only screen and (max-height: 400px), (max-width: 400px) {
  .some-selector {
    padding: 20px 10vmin -10vmax 10px;
    width: 0.5vw;
    height: 50.3vh;
  }
  .some-other-selector {
    height: 50.3vh;
  }
}

@media only screen and (max-height: 400px) {
  @media only screen and (max-width: 400px) {
    .some-deeper-selector {
      width: 20px;
      height: 60vh;
    }
  }

  @supports ( transform-origin: 5% 5% ) {
    .some-deeper-selector {
      width: 20px;
      height: 60vh;
    }
  }
}

@-webkit-keyframes fadein {
  0% {
    height: 20vh;
  }
  50% {
    width: 30px;
  }
  100% {
    height: 50vh;
  }
}

@keyframes fadein {
  0% {
    height: 20vh;
  }
  50% {
    width: 30px;
  }
  100% {
    height: 50vh;
  }
}