Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/box-shadow/box-shadow.html 

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <style>
        .square { margin: 10px; width: 40px; height: 40px; background-color: #ff7; }
        .shadowTL { -webkit-box-shadow: black -5px -5px 0; }
        .shadowBL { -webkit-box-shadow: black -5px 5px 0; }
        .shadowBR { -webkit-box-shadow: black 5px 5px 0; }
        .shadowTR { -webkit-box-shadow: black 5px -5px 0; }
        .shadowB { -webkit-box-shadow: black 0 0 5px; }
        .shadowFirstLine:first-line { -webkit-box-shadow: black -5px -5px 0; }
    </style>
</head>
<body>
    <div style="float: left;">
        <div class="square shadowTL"></div>
    
        <div style="position: relative; width: 60px; height: 60px;">
            <div style="position: absolute;" class="square shadowTL"></div>
        </div>
    
        <div style="position: relative; width: 60px; height: 60px;">
            <div style="position: absolute; clip: rect(-5px, 0, 0, -5px)" class="square shadowTL"></div>
        </div>

        <div class="square shadowTL" style="opacity: 0.8;"></div>
    
        <div class="square shadowTL" style="overflow: auto;"></div>
    
        <table class="square shadowTL"></table>

        <canvas class="square shadowTL"></canvas>

        <p>
            Lorem <span class="shadowTL">ipsum</span> dolor
        </p>
    
        <p class="shadowFirstLine">
            Lorem ipsum<br>
            dolor sit amet
        </p>
    </div>

    <div style="float: left; margin-left: 10px;">
        <div class="square shadowBL"></div>
    
        <div style="position: relative; width: 60px; height: 60px;">
            <div style="position: absolute;" class="square shadowBL"></div>
        </div>
    
        <div style="position: relative; width: 60px; height: 60px;">
            <div style="position: absolute; clip: rect(40px, 0, 45px, -5px)" class="square shadowBL"></div>
        </div>

        <div class="square shadowBL" style="opacity: 0.8;"></div>
    
        <div class="square shadowBL" style="overflow: auto;"></div>
    
        <table class="square shadowBL"></table>

        <canvas class="square shadowBL"></canvas>

        <p>
            Lorem <span class="shadowBL">ipsum</span> dolor
        </p>
    </div>

    <div style="float: left; margin-left: 10px;">
        <div class="square shadowBR"></div>
    
        <div style="position: relative; width: 60px; height: 60px;">
            <div style="position: absolute;" class="square shadowBR"></div>
        </div>
    
        <div style="position: relative; width: 60px; height: 60px;">
            <div style="position: absolute; clip: rect(40px, 45px, 45px, 40px)" class="square shadowBR"></div>
        </div>

        <div class="square shadowBR" style="opacity: 0.8;"></div>
    
        <div class="square shadowBR" style="overflow: auto;"></div>
    
        <table class="square shadowBR"></table>

        <canvas class="square shadowBR"></canvas>

        <p>
            Lorem <span class="shadowBR">ipsum</span> dolor
        </p>
    </div>

    <div style="float: left; margin-left: 10px;">
        <div class="square shadowTR"></div>
    
        <div style="position: relative; width: 60px; height: 60px;">
            <div style="position: absolute;" class="square shadowTR"></div>
        </div>
    
        <div style="position: relative; width: 60px; height: 60px;">
            <div style="position: absolute; clip: rect(-5px, 45px, 0, 40px)" class="square shadowTR"></div>
        </div>

        <div class="square shadowTR" style="opacity: 0.8;"></div>
    
        <div class="square shadowTR" style="overflow: auto;"></div>
    
        <table class="square shadowTR"></table>

        <canvas class="square shadowTR"></canvas>

        <p>
            Lorem <span class="shadowTR">ipsum</span> dolor
        </p>
    </div>

    <div style="float: left; margin-left: 10px;">
        <div class="square shadowB"></div>
    
        <div style="position: relative; width: 60px; height: 60px;">
            <div style="position: absolute;" class="square shadowB"></div>
        </div>
    
        <div style="position: relative; width: 60px; height: 60px;">
            <!-- space -->
        </div>

        <div class="square shadowB" style="opacity: 0.8;"></div>
    
        <div class="square shadowB" style="overflow: auto;"></div>
    
        <table class="square shadowB"></table>

        <canvas class="square shadowB"></canvas>

        <p>
            Lorem <span class="shadowB">ipsum</span> dolor
        </p>
    </div>
</body>
</html>