minerva/Base/res/html/misc/clip.html at c745798559d6689b5641c403e5c43f68f1fc905c

ErisCyan / minerva

Find file

Newer

Older

minerva / Base / res / html / misc / clip.html

minerva on 13 Jul 1 KB Initial commit

Raw Blame History

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>CSS Clip Test Page</title>
    <style>
      .box {
        height: 100px;
        width: 100px;
        position: absolute;
        background-color: aquamarine;
      }

      .separate-tests {
        height: 125px;
        border-width: 0px;
      }
    </style>
</head>
<body>
    <h2>This is a normal rect with auto clipping</h2>
    <div class="separate-tests">
      <div class="box" style="clip: rect(auto, auto, auto, auto);"></div>
    </div>

    <h2>This is a div with the left side clipped out</h2>
    <div class="separate-tests">
      <div class="box" style="clip: rect(auto, auto, auto, 50px);"></div>
    </div>

    <h2>One can create a rect with or without commas and the clip works</h2>
    <div class="separate-tests">
      <div class="box" style="clip: rect(4em auto auto auto);"></div>
    </div>

    <h2>Text and borders are clipped too</h2>
    <div class="separate-tests">
      <div class="box" style="clip: rect(-5px auto auto 50px); border: 2px solid black;">
        Lots of text Lots of text
        Lots of text Lots of text
        Lots of text Lots of text
        Lots of text Lots of text
        Lots of text Lots of text
      </div>
    </div>

    <h2>:yakgone:</h2>
    <div class="separate-tests">
      <div class="box" style="clip: rect(0px 0px 0px 0px); border: 2px solid black;">
        Lots of text Lots of text
        Lots of text Lots of text
        Lots of text Lots of text
        Lots of text Lots of text
        Lots of text Lots of text
      </div>
    </div>
</body>