Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 04:30:10 +01:00
Code Issues Projects Releases Packages Wiki Activity

Auto merge of #11781 - sjmelia:8719_support_for_css_active, r=Manishearth

Browse source 
Issue 8719: Add basic support for :active selector

<!-- Please describe your changes on the following line: -->
Added toggling of active state for element and parents on mousedown/mouseup. Active state is removed when mouseout. (hover)

- As with my other PR i'm struggling a bit with the automated testing. I've added a manual test case and found quirks-mode/active-and-hover-manual.html which - aside from also being a manual test, is functional in Firefox but does not render correctly in Servo.
- Not implemented: In Firefox, behaviour differs with a <!DOCTYPE HTML> and an anchor does not lose it's activation on mouseout; whereas a button does.

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes fix #8719  (github issue number if applicable).

<!-- Either: -->
- [ ] There are tests for these changes OR
- [ ] These changes do not require tests because _____

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="35" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/11781)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2016-07-08 05:06:57 -07:00 • committed by GitHub
commit 5afdf7fb5c
5 changed files with 63 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

22
components/script/dom/activation.rs
View file

@ -10,6 +10,9 @@ use dom::event::{Event, EventBubbles, EventCancelable};
use dom::eventtarget::EventTarget;
use dom::mouseevent::MouseEvent;
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
pub trait Activatable {
@ -29,6 +32,25 @@ pub trait Activatable {
// https://html.spec.whatwg.org/multipage/#implicit-submission
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

16
components/script/dom/document.rs
View file

@ -735,9 +735,22 @@ impl Document {
// https://w3c.github.io/uievents/#trusted-events
event.set_trusted(true);
// https://html.spec.whatwg.org/multipage/#run-authentic-click-activation-steps
let activatable = el.as_maybe_activatable();
match mouse_event_type {
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();
event.fire(target);
},
@ -904,6 +917,7 @@ impl Document {
.inclusive_ancestors()
.filter_map(Root::downcast::<Element>) {
element.set_hover_state(false);
element.set_active_state(false);
}
}

7
components/script/dom/element.rs
View file

@ -2522,8 +2522,13 @@ impl Element {
self.state.get().contains(IN_ACTIVE_STATE)
}
/// https://html.spec.whatwg.org/multipage/#concept-selector-active
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 {

2
components/script/dom/window.rs
View file

@ -128,6 +128,7 @@ pub enum ReflowReason {
FramedContentChanged,
IFrameLoadEvent,
MissingExplicitReflow,
ElementStateChanged,
}
pub type ScrollPoint = Point2D<Au>;
@ -1753,6 +1754,7 @@ fn debug_reflow_events(id: PipelineId, goal: &ReflowGoal, query_type: &ReflowQue
ReflowReason::FramedContentChanged => "\tFramedContentChanged",
ReflowReason::IFrameLoadEvent => "\tIFrameLoadEvent",
ReflowReason::MissingExplicitReflow => "\tMissingExplicitReflow",
ReflowReason::ElementStateChanged => "\tElementStateChanged",
});
println!("{}", debug_msg);

18
tests/html/active_selector.html Normal file
View 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>