diff options
| author | martinfalisse <martinmotteditfalisse@gmail.com> | 2022-08-10 19:26:19 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2022-08-14 11:22:52 +0200 |
| commit | eef0edae7a2797fb786998816415be1860a09217 (patch) | |
| tree | ad019c78d55ec774a15e8e6e8b201a90e5520558 | |
| parent | 872b6369c4c59de7a1f2d589504276819e3e4f75 (diff) | |
| download | serenity-eef0edae7a2797fb786998816415be1860a09217.zip | |
Base: Clean up Clip test page after absolutely positioned divs fix
Clean up the Clip test page after adding the logic necessary so that
absolutely positioned divs are correctly positioned.
| -rw-r--r-- | Base/res/html/misc/clip.html | 81 |
1 files changed, 43 insertions, 38 deletions
diff --git a/Base/res/html/misc/clip.html b/Base/res/html/misc/clip.html index d268da7374..fd868c18ec 100644 --- a/Base/res/html/misc/clip.html +++ b/Base/res/html/misc/clip.html @@ -2,51 +2,56 @@ <html> <head> <meta charset="UTF-8"/> - <title>CSS Clip test</title> + <title>CSS Clip Test Page</title> <style> - .box1 { - background-color: red; - height: 300px; - width: 400px; - position: absolute; - } - .box2 { - background-color: blue; - height: 300px; - width: 400px; - position: absolute; - clip: rect(auto, 150px, 8em, -5px); - color: white; - } - .box3 { - background-color: purple; - height: 300px; - width: 400px; - position: absolute; - clip: rect(0em, 0px, 0px, 0px); - top: 350px; - color: white; - } + .box { + height: 100px; + width: 100px; + position: absolute; + background-color: aquamarine; + } + + .separate-tests { + height: 125px; + border-width: 0px; + } </style> </head> <body> - <h1>Clip with rect</h1> + <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>Clip should look kind of like the American flag</h2> - <div class="box1"> - <div class="box2"> - <p>Hello this is some text</p> - <p>Hello this is some text</p> - <p>Hello this is some text</p> - <p>Hello this is some text</p> + <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 style="margin-top: 350px;">Clip should not be visible</h2> - <div class="box3"> - <p>Hello this is some text</p> - <p>Hello this is some text</p> - <p>Hello this is some text</p> - <p>Hello this is some text</p> + <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> |