mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 14:47:44 +00:00
LibWeb: Support appearance: none
for <progress>
elements
This disables this system progress bar, and instead creates one out of pseudo elements, that can be selected and styled with the ::-webkit-progress-bar/value selectors.
This commit is contained in:
parent
d7d34d88e5
commit
57c6792458
3 changed files with 53 additions and 7 deletions
|
@ -1,6 +1,7 @@
|
|||
/*
|
||||
* Copyright (c) 2018-2022, Andreas Kling <kling@serenityos.org>
|
||||
* Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
|
||||
* Copyright (c) 2022, MacDue <macdue@dueutil.tech>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
@ -12,10 +13,12 @@
|
|||
#include <LibWeb/DOM/ParentNode.h>
|
||||
#include <LibWeb/DOM/ShadowRoot.h>
|
||||
#include <LibWeb/Dump.h>
|
||||
#include <LibWeb/HTML/HTMLProgressElement.h>
|
||||
#include <LibWeb/Layout/InitialContainingBlock.h>
|
||||
#include <LibWeb/Layout/ListItemBox.h>
|
||||
#include <LibWeb/Layout/ListItemMarkerBox.h>
|
||||
#include <LibWeb/Layout/Node.h>
|
||||
#include <LibWeb/Layout/Progress.h>
|
||||
#include <LibWeb/Layout/TableBox.h>
|
||||
#include <LibWeb/Layout/TableCellBox.h>
|
||||
#include <LibWeb/Layout/TableRowBox.h>
|
||||
|
@ -253,6 +256,22 @@ void TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder::Context&
|
|||
element.set_pseudo_element_node({}, CSS::Selector::PseudoElement::Marker, list_item_marker);
|
||||
layout_node->append_child(move(list_item_marker));
|
||||
}
|
||||
|
||||
if (is<HTML::HTMLProgressElement>(dom_node)) {
|
||||
auto& progress = static_cast<HTML::HTMLProgressElement&>(dom_node);
|
||||
if (!progress.using_system_appearance()) {
|
||||
auto bar_style = style_computer.compute_style(progress, CSS::Selector::PseudoElement::ProgressBar);
|
||||
auto value_style = style_computer.compute_style(progress, CSS::Selector::PseudoElement::ProgressValue);
|
||||
auto position = progress.position();
|
||||
value_style->set_property(CSS::PropertyID::Width, CSS::PercentageStyleValue::create(CSS::Percentage(position >= 0 ? round_to<int>(100 * position) : 0)));
|
||||
auto progress_bar = adopt_ref(*new Layout::BlockContainer(document, nullptr, bar_style));
|
||||
auto progress_value = adopt_ref(*new Layout::BlockContainer(document, nullptr, value_style));
|
||||
progress_bar->append_child(*progress_value);
|
||||
layout_node->append_child(*progress_bar);
|
||||
progress.set_pseudo_element_node({}, CSS::Selector::PseudoElement::ProgressBar, progress_bar);
|
||||
progress.set_pseudo_element_node({}, CSS::Selector::PseudoElement::ProgressValue, progress_value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RefPtr<Node> TreeBuilder::build(DOM::Node& dom_node)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue