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 /Base | |
| 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.
Diffstat (limited to 'Base')
| -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> |