content-visibility-025-ref.html

Enable keyboard shortcuts

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: hidden svg (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

div {

  background: blue;

  color: white;

svg {

  border: 1px solid black;

  background: lightblue;

</style>

<div>Test passes if there are circles in the light blue box below.</div>

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">

  <g stroke-width="10" transform="translate(-30)">

      <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/>

      <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>

      <circle cx="80" cy="120" r="35" fill="#004" stroke="none"/>

      <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>

      <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/>

      <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>

      <circle cx="80" cy="260" r="35" fill="#008" stroke="none"/>

      <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>

  </g>

</svg>

<div>Lorem ipsum consectetur adipiscing elit</div>