pbakaus_impeccable/tests/fixtures/antipatterns/linked-url-patterns.css

@media (min-width: 1px) {
  .flag-linked-grid {
    width: 160px;
    height: 80px;
    background: linear-gradient(90deg, #d9d9d9 1px, transparent 1px), linear-gradient(180deg, #d9d9d9 1px, transparent 1px);
    background-size: 72px 72px;
  }
}

body {
  background: #111;
  color: #fff;
}

/* A valid hostless pseudo-element selector cannot be queried through the DOM
   selector API. It must remain in the corpus rather than count as unused. */
main > ::before {
  content: "Rendered pseudo-element text";
  display: block;
  width: 160px;
  animation: bounce-linked-pseudo 1s ease-in-out infinite;
}

@keyframes bounce-linked-pseudo {
  50% { transform: translateY(2px); }
}

/* A pseudo-element whose originating element is absent must remain outside
   live URL findings instead of being retained as an unresolvable selector. */
.absent > ::before {
  background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fafafa 10px, #fafafa 20px);
}

/* These selectors exist in the live DOM, but their conditions are inactive.
   URL scans must not treat their declarations as rendered page styles. */
@media (max-width: 1px) {
  .inactive-media-stripes {
    background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fafafa 10px, #fafafa 20px);
  }
}

@supports (display: imaginary-layout) {
  .inactive-supports-stripes {
    background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fafafa 10px, #fafafa 20px);
  }
}

/* The host exists, but the complete pseudo-class selector is inactive. */
.inactive-pseudo-stripes:not(.active) {
  background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fafafa 10px, #fafafa 20px);
}

.container-query-host {
  container-type: inline-size;
  width: 240px;
}

.container-query-host-active {
  width: 960px;
}

@container (width > 900px) {
  .inactive-container-stripes {
    background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fafafa 10px, #fafafa 20px);
  }

  .active-container-halo {
    width: 640px;
    height: 400px;
    background: radial-gradient(circle, rgba(80, 111, 255, 0.85), transparent 70%);
  }
}

/* Non-selector at-rules in an inactive container must not enter page-level
   pattern scans just because their CSSOM text is readable. */
@container (width > 2000px) {
  @keyframes inactive-container-gradient-text {
    from {
      background: linear-gradient(90deg, #111, #999);
      background-clip: text;
    }
    to { background: none; }
  }
}

.unused-linked-transition {
  transition: width 200ms ease;
}