diff options
| author | Andreas Kling <kling@serenityos.org> | 2020-05-11 23:04:59 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2020-05-11 23:07:30 +0200 |
| commit | 5f9d80d8bcda00f5958dd41df49e5f2a51bddfab (patch) | |
| tree | 5afbea8b998b0ed1d96a5514859a565c3f1ba9d3 /Base | |
| parent | 8ffdcce0d0167b090382b5d7f13a1121c50e882d (diff) | |
| download | serenity-5f9d80d8bcda00f5958dd41df49e5f2a51bddfab.zip | |
LibWeb: Add basic support for CSS percentages
Many properties can now have percentage values that get resolved in
layout. The reference value (what is this a percentage *of*?) differs
per property, so I've added a helper where you provide a reference
value as an added parameter to the existing length_or_fallback().
Diffstat (limited to 'Base')
| -rw-r--r-- | Base/home/anon/www/percent-css.html | 41 | ||||
| -rw-r--r-- | Base/home/anon/www/welcome.html | 1 |
2 files changed, 42 insertions, 0 deletions
diff --git a/Base/home/anon/www/percent-css.html b/Base/home/anon/www/percent-css.html new file mode 100644 index 0000000000..85a1b93178 --- /dev/null +++ b/Base/home/anon/www/percent-css.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #hcontainer { + background-color: black; + } + .hbar { + background-color: blue; + color: white; + } + .w25 { width: 25% } + .w50 { width: 50% } + .w75 { width: 75% } + .w100 { width: 100% } + + + #vcontainer { + background-color: black; + height: 200px; + } + .vbar { + background-color: blue; + color: white; + } + .h25 { height: 25% } + </style> + </head> + <body> + <div id="hcontainer"> + <div class="hbar w25">25%</div> + <div class="hbar w50">50%</div> + <div class="hbar w75">75%</div> + <div class="hbar w100">100%</div> + </div> + <br> + <div id="vcontainer"> + <div class="vbar h25">25%</div> + </div> + </body> +</html> diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html index 2fffcb8f6c..9ee1bac2c9 100644 --- a/Base/home/anon/www/welcome.html +++ b/Base/home/anon/www/welcome.html @@ -28,6 +28,7 @@ span#ua { <p>Your user agent is: <b><span id="ua"></span></b></p> <p>Some small test pages:</p> <ul> + <li><a href="percent-css.html">CSS percentage values</a></li> <li><a href="inline-block.html">display: inline-block; test</a></li> <li><a href="canvas-path-quadratic-curve.html">canvas path quadratic curve test</a></li> <li><a href="pngsuite_siz_png.html">pngsuite odd sizes test</a></li> |