RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 10:48:11 +00:00
Code Issues Activity Actions

LibWeb: Add support for viewport-relative length units (#3433)

Browse source 
We can now use vh, vw, vmax and vmin as length units in CSS.
This commit is contained in:
Jakob-Niklas See 2020-09-08 20:39:09 +02:00 • committed by GitHub
parent d467a0ffef
commit dcc2c8a125
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

23
Libraries/LibWeb/CSS/Length.cpp
View file

@ -27,6 +27,7 @@
#include <LibWeb/CSS/Length.h>
#include <LibWeb/DOM/Document.h>
#include <LibWeb/HTML/HTMLHtmlElement.h>
#include <LibWeb/Page/Frame.h>
namespace Web::CSS {
@ -39,6 +40,20 @@ float Length::relative_length_to_px(const LayoutNode& layout_node) const
return m_value * layout_node.font_size();
case Type::Rem:
return m_value * layout_node.document().document_element()->layout_node()->font_size();
case Type::Vw:
return layout_node.document().frame()->viewport_rect().width() * (m_value / 100);
case Type::Vh:
return layout_node.document().frame()->viewport_rect().height() * (m_value / 100);
case Type::Vmin: {
auto viewport = layout_node.document().frame()->viewport_rect();
return min(viewport.width(), viewport.height()) * (m_value / 100);
}
case Type::Vmax: {
auto viewport = layout_node.document().frame()->viewport_rect();
return max(viewport.width(), viewport.height()) * (m_value / 100);
}
default:
ASSERT_NOT_REACHED();
}
@ -63,6 +78,14 @@ const char* Length::unit_name() const
return "%";
case Type::Undefined:
return "undefined";
case Type::Vh:
return "vh";
case Type::Vw:
return "vw";
case Type::Vmax:
return "vmax";
case Type::Vmin:
return "vmin";
}
ASSERT_NOT_REACHED();
}