Skip to content

Commit

Permalink
Add scrollWidth/Height to element interface
Browse files Browse the repository at this point in the history
Add the scrollWidth and scrollHeight extensions to the element
interface.
  • Loading branch information
dlrobertson committed Mar 11, 2016
1 parent 5fbed88 commit 16d2778
Show file tree
Hide file tree
Showing 10 changed files with 234 additions and 39 deletions.
13 changes: 12 additions & 1 deletion components/layout/layout_thread.rs
Expand Up @@ -43,7 +43,7 @@ use profile_traits::mem::{self, Report, ReportKind, ReportsChan};
use profile_traits::time::{TimerMetadataFrameType, TimerMetadataReflowType};
use profile_traits::time::{self, TimerMetadata, profile};
use query::{LayoutRPCImpl, process_content_box_request, process_content_boxes_request};
use query::{process_node_geometry_request, process_offset_parent_query};
use query::{process_node_geometry_request, process_node_scroll_area_request, process_offset_parent_query};
use query::{process_resolved_style_request, process_margin_style_query};
use script::dom::node::OpaqueStyleAndLayoutData;
use script::layout_interface::{LayoutRPC, OffsetParentResponse, MarginStyleResponse};
Expand Down Expand Up @@ -117,6 +117,9 @@ pub struct LayoutThreadData {
/// A queued response for the node at a given point
pub hit_test_response: (Option<DisplayItemMetadata>, bool),

/// A queued response for the scroll {top, left, width, height} of a node in pixels.
pub scroll_area_response: Rect<i32>,

/// A queued response for the resolved style property of an element.
pub resolved_style_response: Option<String>,

Expand Down Expand Up @@ -462,6 +465,7 @@ impl LayoutThread {
content_boxes_response: Vec::new(),
client_rect_response: Rect::zero(),
hit_test_response: (None, false),
scroll_area_response: Rect::zero(),
resolved_style_response: None,
offset_parent_response: OffsetParentResponse::empty(),
margin_style_response: MarginStyleResponse::empty(),
Expand Down Expand Up @@ -989,6 +993,9 @@ impl LayoutThread {
ReflowQueryType::NodeGeometryQuery(_) => {
rw_data.client_rect_response = Rect::zero();
},
ReflowQueryType::NodeScrollGeometryQuery(_) => {
rw_data.scroll_area_response = Rect::zero();
},
ReflowQueryType::ResolvedStyleQuery(_, _, _) => {
rw_data.resolved_style_response = None;
},
Expand Down Expand Up @@ -1144,6 +1151,10 @@ impl LayoutThread {
let node = unsafe { ServoLayoutNode::new(&node) };
rw_data.client_rect_response = process_node_geometry_request(node, &mut root_flow);
},
ReflowQueryType::NodeScrollGeometryQuery(node) => {
let node = unsafe { ServoLayoutNode::new(&node) };
rw_data.scroll_area_response = process_node_scroll_area_request(node, &mut root_flow);
},
ReflowQueryType::ResolvedStyleQuery(node, ref pseudo, ref property) => {
let node = unsafe { ServoLayoutNode::new(&node) };
rw_data.resolved_style_response =
Expand Down
129 changes: 128 additions & 1 deletion components/layout/query.rs
Expand Up @@ -8,6 +8,7 @@ use app_units::Au;
use construct::ConstructionResult;
use euclid::point::Point2D;
use euclid::rect::Rect;
use euclid::size::Size2D;
use flow;
use flow_ref::FlowRef;
use fragment::{Fragment, FragmentBorderBoxIterator, SpecificFragmentInfo};
Expand All @@ -20,11 +21,12 @@ use script::layout_interface::{HitTestResponse, LayoutRPC, OffsetParentResponse}
use script::layout_interface::{ResolvedStyleResponse, ScriptLayoutChan, MarginStyleResponse};
use script_traits::LayoutMsg as ConstellationMsg;
use sequential;
use std::cmp::{min, max};
use std::ops::Deref;
use std::sync::{Arc, Mutex};
use string_cache::Atom;
use style::computed_values;
use style::logical_geometry::WritingMode;
use style::logical_geometry::{WritingMode, BlockFlowDirection, InlineBaseDirection};
use style::properties::longhands::{display, position};
use style::properties::style_structs;
use style::selector_impl::PseudoElement;
Expand All @@ -34,6 +36,18 @@ use wrapper::{LayoutNode, ThreadSafeLayoutNode};

pub struct LayoutRPCImpl(pub Arc<Mutex<LayoutThreadData>>);

// https://drafts.csswg.org/cssom-view/#overflow-directions
fn overflow_direction(writing_mode: &WritingMode) -> OverflowDirection {
match (writing_mode.block_flow_direction(), writing_mode.inline_base_direction()) {
(BlockFlowDirection::TopToBottom, InlineBaseDirection::LeftToRight) |
(BlockFlowDirection::LeftToRight, InlineBaseDirection::LeftToRight) => OverflowDirection::RightAndDown,
(BlockFlowDirection::TopToBottom, InlineBaseDirection::RightToLeft) |
(BlockFlowDirection::RightToLeft, InlineBaseDirection::LeftToRight) => OverflowDirection::LeftAndDown,
(BlockFlowDirection::RightToLeft, InlineBaseDirection::RightToLeft) => OverflowDirection::LeftAndUp,
(BlockFlowDirection::LeftToRight, InlineBaseDirection::RightToLeft) => OverflowDirection::RightAndUp
}
}

impl LayoutRPC for LayoutRPCImpl {

// The neat thing here is that in order to answer the following two queries we only
Expand Down Expand Up @@ -78,6 +92,12 @@ impl LayoutRPC for LayoutRPCImpl {
}
}

fn node_scroll_area(&self) -> NodeGeometryResponse {
NodeGeometryResponse {
client_rect: self.0.lock().unwrap().scroll_area_response
}
}

/// Retrieves the resolved value for a CSS style property.
fn resolved_style(&self) -> ResolvedStyleResponse {
let &LayoutRPCImpl(ref rw_data) = self;
Expand Down Expand Up @@ -174,6 +194,14 @@ enum PositionProperty {
Height,
}

#[derive(Debug)]
enum OverflowDirection {
RightAndDown,
LeftAndDown,
LeftAndUp,
RightAndUp,
}

struct PositionRetrievingFragmentBorderBoxIterator {
node_address: OpaqueNode,
result: Option<Au>,
Expand Down Expand Up @@ -291,6 +319,28 @@ impl FragmentLocatingFragmentIterator {
}
}

struct UnioningFragmentScrollAreaIterator {
node_address: OpaqueNode,
union_rect: Rect<i32>,
origin_rect: Rect<i32>,
level: Option<i32>,
is_child: bool,
overflow_direction: OverflowDirection
}

impl UnioningFragmentScrollAreaIterator {
fn new(node_address: OpaqueNode) -> UnioningFragmentScrollAreaIterator {
UnioningFragmentScrollAreaIterator {
node_address: node_address,
union_rect: Rect::zero(),
origin_rect: Rect::zero(),
level: None,
is_child: false,
overflow_direction: OverflowDirection::RightAndDown
}
}
}

struct ParentBorderBoxInfo {
node_address: OpaqueNode,
border_box: Rect<Au>,
Expand Down Expand Up @@ -336,6 +386,53 @@ impl FragmentBorderBoxIterator for FragmentLocatingFragmentIterator {
}
}

// https://drafts.csswg.org/cssom-view/#scrolling-area
impl FragmentBorderBoxIterator for UnioningFragmentScrollAreaIterator {
fn process(&mut self, fragment: &Fragment, level: i32, border_box: &Rect<Au>) {
// In cases in which smaller child elements contain less padding than the parent
// the a union of the two elements padding rectangles could result in an unwanted
// increase in size. To work around this, we store the original elements padding
// rectangle as `origin_rect` and the union of all child elements padding and
// margin rectangles as `union_rect`.
let style_structs::Border {
border_top_width: top_border,
border_right_width: right_border,
border_bottom_width: bottom_border,
border_left_width: left_border,
..
} = *fragment.style.get_border();
let right_padding = (border_box.size.width - right_border - left_border).to_px();
let bottom_padding = (border_box.size.height - bottom_border - top_border).to_px();
let top_padding = top_border.to_px();
let left_padding = left_border.to_px();
match self.level {
Some(start_level) if level <= start_level => { self.is_child = false; }
Some(_) => {
let padding = Rect::new(Point2D::new(left_padding, top_padding),
Size2D::new(right_padding, bottom_padding));
let top_margin = fragment.margin.top(fragment.style.writing_mode).to_px();
let left_margin = fragment.margin.left(fragment.style.writing_mode).to_px();
let bottom_margin = fragment.margin.bottom(fragment.style.writing_mode).to_px();
let right_margin = fragment.margin.right(fragment.style.writing_mode).to_px();
let margin = Rect::new(Point2D::new(left_margin, top_margin),
Size2D::new(right_margin, bottom_margin));
self.union_rect = self.union_rect.union(&margin).union(&padding);
}
None => {
self.level = Some(level);
self.is_child = true;
self.overflow_direction = overflow_direction(&fragment.style.writing_mode);
self.origin_rect = Rect::new(Point2D::new(top_padding, left_padding),
Size2D::new(right_padding, bottom_padding));
},
};
}

fn should_process(&mut self, fragment: &Fragment) -> bool {
fragment.contains_node(self.node_address) || self.is_child
}
}

// https://drafts.csswg.org/cssom-view/#extensions-to-the-htmlelement-interface
impl FragmentBorderBoxIterator for ParentOffsetBorderBoxIterator {
fn process(&mut self, fragment: &Fragment, level: i32, border_box: &Rect<Au>) {
Expand Down Expand Up @@ -400,6 +497,36 @@ pub fn process_node_geometry_request<'ln, N: LayoutNode<'ln>>(requested_node: N,
iterator.client_rect
}

pub fn process_node_scroll_area_request<'ln, N: LayoutNode<'ln>>(requested_node: N, layout_root: &mut FlowRef)
-> Rect<i32> {
let mut iterator = UnioningFragmentScrollAreaIterator::new(requested_node.opaque());
sequential::iterate_through_flow_tree_fragment_border_boxes(layout_root, &mut iterator);
match iterator.overflow_direction {
OverflowDirection::RightAndDown => {
let right = max(iterator.union_rect.size.width, iterator.origin_rect.size.width);
let bottom = max(iterator.union_rect.size.height, iterator.origin_rect.size.height);
Rect::new(iterator.origin_rect.origin, Size2D::new(right, bottom))
},
OverflowDirection::LeftAndDown => {
let bottom = max(iterator.union_rect.size.height, iterator.origin_rect.size.height);
let left = max(iterator.union_rect.origin.x, iterator.origin_rect.origin.x);
Rect::new(Point2D::new(left, iterator.origin_rect.origin.y),
Size2D::new(iterator.origin_rect.size.width, bottom))
},
OverflowDirection::LeftAndUp => {
let top = min(iterator.union_rect.origin.y, iterator.origin_rect.origin.y);
let left = min(iterator.union_rect.origin.x, iterator.origin_rect.origin.x);
Rect::new(Point2D::new(left, top), iterator.origin_rect.size)
},
OverflowDirection::RightAndUp => {
let top = min(iterator.union_rect.origin.y, iterator.origin_rect.origin.y);
let right = max(iterator.union_rect.size.width, iterator.origin_rect.size.width);
Rect::new(Point2D::new(iterator.origin_rect.origin.x, top),
Size2D::new(right, iterator.origin_rect.size.height))
}
}
}

/// Return the resolved value of property for a given (pseudo)element.
/// https://drafts.csswg.org/cssom/#resolved-value
pub fn process_resolved_style_request<'ln, N: LayoutNode<'ln>>(
Expand Down
10 changes: 10 additions & 0 deletions components/script/dom/element.rs
Expand Up @@ -1421,6 +1421,16 @@ impl ElementMethods for Element {
rect.size.height.to_f64_px())
}

// https://drafts.csswg.org/cssom-view/#dom-element-scrollwidth
fn ScrollWidth(&self) -> i32 {
self.upcast::<Node>().get_scroll_area().size.width
}

// https://drafts.csswg.org/cssom-view/#dom-element-scrollheight
fn ScrollHeight(&self) -> i32 {
self.upcast::<Node>().get_scroll_area().size.height
}

// https://drafts.csswg.org/cssom-view/#dom-element-clienttop
fn ClientTop(&self) -> i32 {
self.upcast::<Node>().get_client_rect().origin.y
Expand Down
41 changes: 41 additions & 0 deletions components/script/dom/node.rs
Expand Up @@ -18,6 +18,7 @@ use dom::bindings::codegen::Bindings::NamedNodeMapBinding::NamedNodeMapMethods;
use dom::bindings::codegen::Bindings::NodeBinding::{NodeConstants, NodeMethods};
use dom::bindings::codegen::Bindings::NodeListBinding::NodeListMethods;
use dom::bindings::codegen::Bindings::ProcessingInstructionBinding::ProcessingInstructionMethods;
use dom::bindings::codegen::Bindings::WindowBinding::WindowMethods;
use dom::bindings::codegen::UnionTypes::NodeOrString;
use dom::bindings::conversions::{self, DerivedFrom};
use dom::bindings::error::{Error, ErrorResult, Fallible};
Expand All @@ -37,6 +38,7 @@ use dom::documentfragment::DocumentFragment;
use dom::documenttype::DocumentType;
use dom::element::{Element, ElementCreator};
use dom::eventtarget::EventTarget;
use dom::htmlbodyelement::HTMLBodyElement;
use dom::htmlcollection::HTMLCollection;
use dom::htmlelement::HTMLElement;
use dom::nodelist::NodeList;
Expand All @@ -45,8 +47,11 @@ use dom::range::WeakRangeVec;
use dom::text::Text;
use dom::virtualmethods::{VirtualMethods, vtable_for};
use dom::window::Window;
use euclid::point::Point2D;
use euclid::rect::Rect;
use euclid::size::Size2D;
use heapsize::{HeapSizeOf, heap_size_of};
use html5ever::tree_builder::QuirksMode;
use js::jsapi::{JSContext, JSObject, JSRuntime};
use layout_interface::{LayoutChan, Msg};
use libc::{self, c_void, uintptr_t};
Expand Down Expand Up @@ -577,6 +582,42 @@ impl Node {
window_from_node(self).client_rect_query(self.to_trusted_node_address())
}

// https://drafts.csswg.org/cssom-view/#dom-element-scrollwidth
// https://drafts.csswg.org/cssom-view/#dom-element-scrollheight
// https://drafts.csswg.org/cssom-view/#dom-element-scrolltop
// https://drafts.csswg.org/cssom-view/#dom-element-scrollleft
pub fn get_scroll_area(&self) -> Rect<i32> {
// Step 1
let document = self.owner_doc();
// Step 3
let window = document.window();

let html_element = document.GetDocumentElement();

let is_body_element = html_element.r().and_then(|root| {
let node = root.upcast::<Node>();
node.children().find(|child| { child.is::<HTMLBodyElement>() }).map(|node| {
*node.r() == *self
})
}).unwrap_or(false);

let scroll_area = window.scroll_area_query(self.to_trusted_node_address());

match (document != window.Document(), is_body_element, document.quirks_mode(),
html_element.r() == self.downcast::<Element>()) {
// Step 2 && Step 5
(true, _, _, _) | (_, false, QuirksMode::Quirks, true) => Rect::zero(),
// Step 6 && Step 7
(false, false, _, true) | (false, true, QuirksMode::Quirks, _) => {
Rect::new(Point2D::new(window.ScrollX(), window.ScrollY()),
Size2D::new(max(window.InnerWidth(), scroll_area.size.width),
max(window.InnerHeight(), scroll_area.size.height)))
},
// Step 9
_ => scroll_area
}
}

// https://dom.spec.whatwg.org/#dom-childnode-before
pub fn before(&self, nodes: Vec<NodeOrString>) -> ErrorResult {
// Step 1.
Expand Down
3 changes: 3 additions & 0 deletions components/script/dom/webidls/Element.webidl
Expand Up @@ -77,6 +77,9 @@ partial interface Element {
DOMRectList getClientRects();
DOMRect getBoundingClientRect();

readonly attribute long scrollWidth;
readonly attribute long scrollHeight;

readonly attribute long clientTop;
readonly attribute long clientLeft;
readonly attribute long clientWidth;
Expand Down
8 changes: 8 additions & 0 deletions components/script/dom/window.rs
Expand Up @@ -1106,6 +1106,13 @@ impl Window {
self.layout_rpc.hit_test().node_address
}

pub fn scroll_area_query(&self, node: TrustedNodeAddress) -> Rect<i32> {
self.reflow(ReflowGoal::ForScriptQuery,
ReflowQueryType::NodeScrollGeometryQuery(node),
ReflowReason::Query);
self.layout_rpc.node_scroll_area().client_rect
}

pub fn resolved_style_query(&self,
element: TrustedNodeAddress,
pseudo: Option<PseudoElement>,
Expand Down Expand Up @@ -1459,6 +1466,7 @@ fn debug_reflow_events(id: PipelineId, goal: &ReflowGoal, query_type: &ReflowQue
ReflowQueryType::ContentBoxesQuery(_n) => "\tContentBoxesQuery",
ReflowQueryType::HitTestQuery(_n, _o) => "\tHitTestQuery",
ReflowQueryType::NodeGeometryQuery(_n) => "\tNodeGeometryQuery",
ReflowQueryType::NodeScrollGeometryQuery(_n) => "\tNodeScrollGeometryQuery",
ReflowQueryType::ResolvedStyleQuery(_, _, _) => "\tResolvedStyleQuery",
ReflowQueryType::OffsetParentQuery(_n) => "\tOffsetParentQuery",
ReflowQueryType::MarginStyleQuery(_n) => "\tMarginStyleQuery",
Expand Down
3 changes: 3 additions & 0 deletions components/script/layout_interface.rs
Expand Up @@ -104,6 +104,8 @@ pub trait LayoutRPC {
fn content_boxes(&self) -> ContentBoxesResponse;
/// Requests the geometry of this node. Used by APIs such as `clientTop`.
fn node_geometry(&self) -> NodeGeometryResponse;
/// Requests the scroll geometry of this node. Used by APIs such as `scrollTop`.
fn node_scroll_area(&self) -> NodeGeometryResponse;
/// Requests the node containing the point of interest
fn hit_test(&self) -> HitTestResponse;
/// Query layout for the resolved value of a given CSS property
Expand Down Expand Up @@ -165,6 +167,7 @@ pub enum ReflowQueryType {
ContentBoxesQuery(TrustedNodeAddress),
HitTestQuery(Point2D<f32>, bool),
NodeGeometryQuery(TrustedNodeAddress),
NodeScrollGeometryQuery(TrustedNodeAddress),
ResolvedStyleQuery(TrustedNodeAddress, Option<PseudoElement>, Atom),
OffsetParentQuery(TrustedNodeAddress),
MarginStyleQuery(TrustedNodeAddress),
Expand Down

0 comments on commit 16d2778

Please sign in to comment.