wpt/css/css-shapes/spec-examples/reference/shape-outside-006-ref.html at df37f5601136367eb95656b7680e9b7dec8564bd · web-platform-tests/wpt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
    <style type="text/css">
        #container {
          position: absolute;
          top: 70px;
          width: 250px;
          height: 105px;
          border: 1px solid black;
        }
        .bar {
            position: absolute;
            height: 20px;
            background-color: green;
        }
        #line-1 {
            top: 10px;
            left: 65px;
            width: 160px;
        }
        #line-2 {
            top: 40px;
            left: 80px;
            width: 140px;
        }
        #line-3 {
            top: 70px;
            left: 95px;
            width: 120px;
        }
        #triangle {
            position: absolute;
            top: 70px;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            clip-path: polygon(50px 0px, 100px 100px, 0px 100px);
        }
    </style>
</head>
<body>
    <p>
        The test passes if all there are three green horizontal bars to the right of the
        triangle that are all inside the rectangle and there should be no green to the left
        of the triangle. There should be no red.
    </p>
    <div id="container">
        <div id="line-1" class="bar"></div>
        <div id="line-2" class="bar"></div>
        <div id="line-3" class="bar"></div>
    </div>
    <div id="triangle"></div>
</body>
</html>