mirror of
https://github.com/servo/servo.git
synced 2025-07-23 15:23:42 +01:00
Issue 8719: Add basic support for :active selector
This commit is contained in:
parent
80cb0cf821
commit
421c354d44
5 changed files with 63 additions and 2 deletions
|
@ -10,6 +10,9 @@ use dom::event::{Event, EventBubbles, EventCancelable};
|
||||||
use dom::eventtarget::EventTarget;
|
use dom::eventtarget::EventTarget;
|
||||||
use dom::mouseevent::MouseEvent;
|
use dom::mouseevent::MouseEvent;
|
||||||
use dom::node::window_from_node;
|
use dom::node::window_from_node;
|
||||||
|
use dom::window::ReflowReason;
|
||||||
|
use script_layout_interface::message::ReflowQueryType;
|
||||||
|
use style::context::ReflowGoal;
|
||||||
|
|
||||||
/// Trait for elements with defined activation behavior
|
/// Trait for elements with defined activation behavior
|
||||||
pub trait Activatable {
|
pub trait Activatable {
|
||||||
|
@ -29,6 +32,25 @@ pub trait Activatable {
|
||||||
|
|
||||||
// https://html.spec.whatwg.org/multipage/#implicit-submission
|
// https://html.spec.whatwg.org/multipage/#implicit-submission
|
||||||
fn implicit_submission(&self, ctrlKey: bool, shiftKey: bool, altKey: bool, metaKey: bool);
|
fn implicit_submission(&self, ctrlKey: bool, shiftKey: bool, altKey: bool, metaKey: bool);
|
||||||
|
|
||||||
|
// https://html.spec.whatwg.org/multipage/#concept-selector-active
|
||||||
|
fn enter_formal_activation_state(&self) {
|
||||||
|
self.as_element().set_active_state(true);
|
||||||
|
|
||||||
|
let win = window_from_node(self.as_element());
|
||||||
|
win.reflow(ReflowGoal::ForDisplay,
|
||||||
|
ReflowQueryType::NoQuery,
|
||||||
|
ReflowReason::ElementStateChanged);
|
||||||
|
}
|
||||||
|
|
||||||
|
fn exit_formal_activation_state(&self) {
|
||||||
|
self.as_element().set_active_state(false);
|
||||||
|
|
||||||
|
let win = window_from_node(self.as_element());
|
||||||
|
win.reflow(ReflowGoal::ForDisplay,
|
||||||
|
ReflowQueryType::NoQuery,
|
||||||
|
ReflowReason::ElementStateChanged);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Whether an activation was initiated via the click() method
|
/// Whether an activation was initiated via the click() method
|
||||||
|
|
|
@ -735,9 +735,22 @@ impl Document {
|
||||||
// https://w3c.github.io/uievents/#trusted-events
|
// https://w3c.github.io/uievents/#trusted-events
|
||||||
event.set_trusted(true);
|
event.set_trusted(true);
|
||||||
// https://html.spec.whatwg.org/multipage/#run-authentic-click-activation-steps
|
// https://html.spec.whatwg.org/multipage/#run-authentic-click-activation-steps
|
||||||
|
let activatable = el.as_maybe_activatable();
|
||||||
match mouse_event_type {
|
match mouse_event_type {
|
||||||
MouseEventType::Click => el.authentic_click_activation(event),
|
MouseEventType::Click => el.authentic_click_activation(event),
|
||||||
_ => {
|
MouseEventType::MouseDown => {
|
||||||
|
if let Some(a) = activatable {
|
||||||
|
a.enter_formal_activation_state();
|
||||||
|
}
|
||||||
|
|
||||||
|
let target = node.upcast();
|
||||||
|
event.fire(target);
|
||||||
|
},
|
||||||
|
MouseEventType::MouseUp => {
|
||||||
|
if let Some(a) = activatable {
|
||||||
|
a.exit_formal_activation_state();
|
||||||
|
}
|
||||||
|
|
||||||
let target = node.upcast();
|
let target = node.upcast();
|
||||||
event.fire(target);
|
event.fire(target);
|
||||||
},
|
},
|
||||||
|
@ -904,6 +917,7 @@ impl Document {
|
||||||
.inclusive_ancestors()
|
.inclusive_ancestors()
|
||||||
.filter_map(Root::downcast::<Element>) {
|
.filter_map(Root::downcast::<Element>) {
|
||||||
element.set_hover_state(false);
|
element.set_hover_state(false);
|
||||||
|
element.set_active_state(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -2519,8 +2519,13 @@ impl Element {
|
||||||
self.state.get().contains(IN_ACTIVE_STATE)
|
self.state.get().contains(IN_ACTIVE_STATE)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// https://html.spec.whatwg.org/multipage/#concept-selector-active
|
||||||
pub fn set_active_state(&self, value: bool) {
|
pub fn set_active_state(&self, value: bool) {
|
||||||
self.set_state(IN_ACTIVE_STATE, value)
|
self.set_state(IN_ACTIVE_STATE, value);
|
||||||
|
|
||||||
|
if let Some(parent) = self.upcast::<Node>().GetParentElement() {
|
||||||
|
parent.set_active_state(value);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn focus_state(&self) -> bool {
|
pub fn focus_state(&self) -> bool {
|
||||||
|
|
|
@ -129,6 +129,7 @@ pub enum ReflowReason {
|
||||||
FramedContentChanged,
|
FramedContentChanged,
|
||||||
IFrameLoadEvent,
|
IFrameLoadEvent,
|
||||||
MissingExplicitReflow,
|
MissingExplicitReflow,
|
||||||
|
ElementStateChanged,
|
||||||
}
|
}
|
||||||
|
|
||||||
pub type ScrollPoint = Point2D<Au>;
|
pub type ScrollPoint = Point2D<Au>;
|
||||||
|
@ -1753,6 +1754,7 @@ fn debug_reflow_events(id: PipelineId, goal: &ReflowGoal, query_type: &ReflowQue
|
||||||
ReflowReason::FramedContentChanged => "\tFramedContentChanged",
|
ReflowReason::FramedContentChanged => "\tFramedContentChanged",
|
||||||
ReflowReason::IFrameLoadEvent => "\tIFrameLoadEvent",
|
ReflowReason::IFrameLoadEvent => "\tIFrameLoadEvent",
|
||||||
ReflowReason::MissingExplicitReflow => "\tMissingExplicitReflow",
|
ReflowReason::MissingExplicitReflow => "\tMissingExplicitReflow",
|
||||||
|
ReflowReason::ElementStateChanged => "\tElementStateChanged",
|
||||||
});
|
});
|
||||||
|
|
||||||
println!("{}", debug_msg);
|
println!("{}", debug_msg);
|
||||||
|
|
18
tests/html/active_selector.html
Normal file
18
tests/html/active_selector.html
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<style>
|
||||||
|
:active {border:1px solid #A61D61; background-color:#DC2F85; color:#333232;}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<fieldset>
|
||||||
|
<a href="https://servo.org/">
|
||||||
|
Link
|
||||||
|
</a>
|
||||||
|
<button>Click Me!</button>
|
||||||
|
<button disabled>You can't activate me</button>
|
||||||
|
<a>Anchor with no href</a>
|
||||||
|
<link href="www.mozilla.com">Link</link>
|
||||||
|
<link>Link with no href</link>
|
||||||
|
</fieldset>
|
||||||
|
</body>
|
||||||
|
</html>
|
Loading…
Add table
Add a link
Reference in a new issue