box-decoration-break-03.xhtml

Enable keyboard shortcuts

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta charset="utf-8" />

  <title>Test of box-decoration-break with clip-path: url and filter</title>

  <style>

    .clone {

      box-decoration-break: clone;

    span {

      font: 24px sans-serif;

      line-height: 2;

      color: lime;

      background: lime;

      clip-path: url(#path);

      filter: blur(0px);

    br {

      line-height: 0;

  </style>

</head>

<body>

  <h2>Box-Decoration-Break: Clone</h2>

  <span class="clone">The<br />quick<br />orange fox</span>

  <h2>Box-Decoration-Break: Slice</h2>

  <span>The<br />quick<br />orange fox</span>

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

    <defs>

      <clipPath id="path" clipPathUnits="objectBoundingBox">

        <rect x="0" y="0" width="1" height="0.3"/>

      </clipPath>

    </defs>

  </svg>

</body>

</html>