mirror of
https://github.com/servo/servo.git
synced 2025-06-08 00:23:30 +00:00
Add support for position:sticky
This leverages the position:sticky support in WebRender to bring basic support for position:sticky in Servo. There are still some issues with nested sticky flows as well as a few other corner cases. Tests are imported from WPT and can be removed once we update to the latest version.
This commit is contained in:
Martin Robinson
parent
4725a05bfb
commit
bc455c8a1f
84 changed files with 5729 additions and 50 deletions
|
|
@ -34,7 +34,8 @@ use style_traits::cursor::Cursor;
|
|||
use text::TextRun;
|
||||
use text::glyph::ByteIndex;
|
||||
use webrender_api::{self, ClipAndScrollInfo, ClipId, ColorF, GradientStop, LocalClip};
|
||||
use webrender_api::{MixBlendMode, ScrollPolicy, ScrollSensitivity, TransformStyle};
|
||||
use webrender_api::{MixBlendMode, ScrollPolicy, ScrollSensitivity, StickyFrameInfo};
|
||||
use webrender_api::TransformStyle;
|
||||
|
||||
pub use style::dom::OpaqueNode;
|
||||
|
||||
|
|
@ -559,6 +560,7 @@ impl fmt::Debug for StackingContext {
|
|||
#[derive(Clone, Debug, Deserialize, HeapSizeOf, Serialize)]
|
||||
pub enum ScrollRootType {
|
||||
ScrollFrame(ScrollSensitivity),
|
||||
StickyFrame(StickyFrameInfo),
|
||||
Clip,
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,9 +29,9 @@
|
|||
|
||||
use app_units::{Au, MAX_AU};
|
||||
use context::LayoutContext;
|
||||
use display_list_builder::{BorderPaintingMode, DisplayListBuildState};
|
||||
use display_list_builder::BlockFlowDisplayListBuilding;
|
||||
use euclid::{Point2D, Size2D, Rect};
|
||||
use display_list_builder::{BlockFlowDisplayListBuilding, BorderPaintingMode};
|
||||
use display_list_builder::{DisplayListBuildState, EstablishContainingBlock};
|
||||
use euclid::{Point2D, Rect, SideOffsets2D, Size2D};
|
||||
use floats::{ClearType, FloatKind, Floats, PlacementInfo};
|
||||
use flow::{self, BaseFlow, EarlyAbsolutePositionInfo, Flow, FlowClass, ForceNonfloatedFlag};
|
||||
use flow::{BLOCK_POSITION_IS_STATIC, CLEARS_LEFT, CLEARS_RIGHT};
|
||||
|
|
@ -54,7 +54,7 @@ use std::sync::Arc;
|
|||
use style::computed_values::{border_collapse, box_sizing, display, float, overflow_x};
|
||||
use style::computed_values::{position, text_align};
|
||||
use style::context::SharedStyleContext;
|
||||
use style::logical_geometry::{LogicalPoint, LogicalRect, LogicalSize, WritingMode};
|
||||
use style::logical_geometry::{LogicalMargin, LogicalPoint, LogicalRect, LogicalSize, WritingMode};
|
||||
use style::properties::ComputedValues;
|
||||
use style::servo::restyle_damage::{BUBBLE_ISIZES, REFLOW, REFLOW_OUT_OF_FLOW};
|
||||
use style::values::computed::{LengthOrPercentageOrNone, LengthOrPercentage};
|
||||
|
|
@ -643,7 +643,7 @@ impl BlockFlow {
|
|||
&mut self.fragment
|
||||
}
|
||||
|
||||
pub fn stacking_relative_position(&self, coor: CoordinateSystem) -> Rect<Au> {
|
||||
pub fn stacking_relative_border_box(&self, coor: CoordinateSystem) -> Rect<Au> {
|
||||
return self.fragment.stacking_relative_border_box(
|
||||
&self.base.stacking_relative_position,
|
||||
&self.base.early_absolute_position_info.relative_containing_block_size,
|
||||
|
|
@ -1787,6 +1787,20 @@ impl BlockFlow {
|
|||
self.flags.contains(HAS_SCROLLING_OVERFLOW)
|
||||
}
|
||||
|
||||
// Return offset from original position because of `position: sticky`.
|
||||
pub fn sticky_position(&self) -> SideOffsets2D<MaybeAuto> {
|
||||
let containing_block_size = &self.base.early_absolute_position_info
|
||||
.relative_containing_block_size;
|
||||
let writing_mode = self.base.early_absolute_position_info.relative_containing_block_mode;
|
||||
let offsets = self.fragment.style().logical_position();
|
||||
let as_margins = LogicalMargin::new(writing_mode,
|
||||
MaybeAuto::from_style(offsets.block_start, containing_block_size.inline),
|
||||
MaybeAuto::from_style(offsets.inline_end, containing_block_size.inline),
|
||||
MaybeAuto::from_style(offsets.block_end, containing_block_size.inline),
|
||||
MaybeAuto::from_style(offsets.inline_start, containing_block_size.inline));
|
||||
as_margins.to_physical(writing_mode)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
impl Flow for BlockFlow {
|
||||
|
|
@ -2134,7 +2148,7 @@ impl Flow for BlockFlow {
|
|||
}
|
||||
|
||||
fn collect_stacking_contexts(&mut self, state: &mut DisplayListBuildState) {
|
||||
self.collect_stacking_contexts_for_block(state);
|
||||
self.collect_stacking_contexts_for_block(state, EstablishContainingBlock::Yes);
|
||||
}
|
||||
|
||||
fn build_display_list(&mut self, state: &mut DisplayListBuildState) {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@ use app_units::{AU_PER_PX, Au};
|
|||
use block::{BlockFlow, BlockStackingContextType};
|
||||
use canvas_traits::canvas::{CanvasMsg, FromLayoutMsg};
|
||||
use context::LayoutContext;
|
||||
use euclid::{Transform3D, Point2D, Vector2D, Rect, SideOffsets2D, Size2D, TypedSize2D};
|
||||
use euclid::{Point2D, Rect, SideOffsets2D, Size2D, Transform3D, TypedSize2D};
|
||||
use euclid::Vector2D;
|
||||
use flex::FlexFlow;
|
||||
use flow::{BaseFlow, Flow, IS_ABSOLUTELY_POSITIONED};
|
||||
use flow_ref::FlowRef;
|
||||
|
|
@ -72,7 +73,8 @@ use style_traits::ToCss;
|
|||
use style_traits::cursor::Cursor;
|
||||
use table_cell::CollapsedBordersForCell;
|
||||
use webrender_api::{ClipAndScrollInfo, ClipId, ColorF, ComplexClipRegion, GradientStop, LineStyle};
|
||||
use webrender_api::{LocalClip, RepeatMode, ScrollPolicy, ScrollSensitivity};
|
||||
use webrender_api::{LocalClip, RepeatMode, ScrollPolicy, ScrollSensitivity, StickyFrameInfo};
|
||||
use webrender_api::StickySideConstraint;
|
||||
use webrender_helpers::{ToBorderRadius, ToMixBlendMode, ToRectF, ToTransformStyle};
|
||||
|
||||
trait ResolvePercentage {
|
||||
|
|
@ -101,11 +103,11 @@ fn convert_repeat_mode(from: RepeatKeyword) -> RepeatMode {
|
|||
}
|
||||
}
|
||||
|
||||
fn establishes_containing_block_for_absolute(positioning: position::T) -> bool {
|
||||
match positioning {
|
||||
position::T::absolute | position::T::relative | position::T::fixed => true,
|
||||
_ => false,
|
||||
}
|
||||
fn establishes_containing_block_for_absolute(can_establish_containing_block: EstablishContainingBlock,
|
||||
positioning: position::T)
|
||||
-> bool {
|
||||
can_establish_containing_block == EstablishContainingBlock::Yes &&
|
||||
position::T::static_ != positioning
|
||||
}
|
||||
|
||||
trait RgbColor {
|
||||
|
|
@ -192,6 +194,9 @@ pub struct DisplayListBuildState<'a> {
|
|||
/// A stack of clips used to cull display list entries that are outside the
|
||||
/// rendered region, but only collected at containing block boundaries.
|
||||
pub containing_block_clip_stack: Vec<Rect<Au>>,
|
||||
|
||||
/// The flow parent's content box, used to calculate sticky constraints.
|
||||
parent_stacking_relative_content_box: Rect<Au>,
|
||||
}
|
||||
|
||||
impl<'a> DisplayListBuildState<'a> {
|
||||
|
|
@ -211,6 +216,7 @@ impl<'a> DisplayListBuildState<'a> {
|
|||
iframe_sizes: Vec::new(),
|
||||
clip_stack: Vec::new(),
|
||||
containing_block_clip_stack: Vec::new(),
|
||||
parent_stacking_relative_content_box: Rect::zero(),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2254,8 +2260,16 @@ impl FragmentDisplayListBuilding for Fragment {
|
|||
}
|
||||
}
|
||||
|
||||
#[derive(Clone, Copy, PartialEq)]
|
||||
pub enum EstablishContainingBlock {
|
||||
Yes,
|
||||
No,
|
||||
}
|
||||
|
||||
pub trait BlockFlowDisplayListBuilding {
|
||||
fn collect_stacking_contexts_for_block(&mut self, state: &mut DisplayListBuildState);
|
||||
fn collect_stacking_contexts_for_block(&mut self,
|
||||
state: &mut DisplayListBuildState,
|
||||
can_establish_containing_block: EstablishContainingBlock);
|
||||
|
||||
fn transform_clip_to_coordinate_space(&mut self,
|
||||
state: &mut DisplayListBuildState,
|
||||
|
|
@ -2263,8 +2277,12 @@ pub trait BlockFlowDisplayListBuilding {
|
|||
fn setup_clipping_for_block(&mut self,
|
||||
state: &mut DisplayListBuildState,
|
||||
preserved_state: &mut PreservedDisplayListState,
|
||||
stacking_context_type: BlockStackingContextType)
|
||||
stacking_context_type: BlockStackingContextType,
|
||||
can_establish_containing_block: EstablishContainingBlock)
|
||||
-> ClipAndScrollInfo;
|
||||
fn setup_scroll_root_for_position(&mut self,
|
||||
state: &mut DisplayListBuildState,
|
||||
border_box: &Rect<Au>);
|
||||
fn setup_scroll_root_for_overflow(&mut self,
|
||||
state: &mut DisplayListBuildState,
|
||||
border_box: &Rect<Au>);
|
||||
|
|
@ -2297,6 +2315,7 @@ pub struct PreservedDisplayListState {
|
|||
containing_block_clip_and_scroll_info: ClipAndScrollInfo,
|
||||
clips_pushed: usize,
|
||||
containing_block_clips_pushed: usize,
|
||||
stacking_relative_content_box: Rect<Au>,
|
||||
}
|
||||
|
||||
impl PreservedDisplayListState {
|
||||
|
|
@ -2308,6 +2327,7 @@ impl PreservedDisplayListState {
|
|||
containing_block_clip_and_scroll_info: state.containing_block_clip_and_scroll_info,
|
||||
clips_pushed: 0,
|
||||
containing_block_clips_pushed: 0,
|
||||
stacking_relative_content_box: state.parent_stacking_relative_content_box,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2322,6 +2342,7 @@ impl PreservedDisplayListState {
|
|||
state.current_real_stacking_context_id = self.real_stacking_context_id;
|
||||
state.current_clip_and_scroll_info = self.clip_and_scroll_info;
|
||||
state.containing_block_clip_and_scroll_info = self.containing_block_clip_and_scroll_info;
|
||||
state.parent_stacking_relative_content_box = self.stacking_relative_content_box;
|
||||
|
||||
let truncate_length = state.clip_stack.len() - self.clips_pushed;
|
||||
state.clip_stack.truncate(truncate_length);
|
||||
|
|
@ -2359,7 +2380,7 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
|
|||
if state.clip_stack.is_empty() {
|
||||
return;
|
||||
}
|
||||
let border_box = self.stacking_relative_position(CoordinateSystem::Parent);
|
||||
let border_box = self.stacking_relative_border_box(CoordinateSystem::Parent);
|
||||
let transform = match self.fragment.transform_matrix(&border_box) {
|
||||
Some(transform) => transform,
|
||||
None => return,
|
||||
|
|
@ -2412,7 +2433,9 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
|
|||
}
|
||||
}
|
||||
|
||||
fn collect_stacking_contexts_for_block(&mut self, state: &mut DisplayListBuildState) {
|
||||
fn collect_stacking_contexts_for_block(&mut self,
|
||||
state: &mut DisplayListBuildState,
|
||||
can_establish_containing_block: EstablishContainingBlock) {
|
||||
let mut preserved_state = PreservedDisplayListState::new(state);
|
||||
|
||||
let block_stacking_context_type = self.block_stacking_context_type();
|
||||
|
|
@ -2432,8 +2455,13 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
|
|||
// stored in state.current_clip_and_scroll_info. If we create a stacking context,
|
||||
// we don't want it to be contained by its own scroll root.
|
||||
let containing_clip_and_scroll_info =
|
||||
self.setup_clipping_for_block(state, &mut preserved_state, block_stacking_context_type);
|
||||
if establishes_containing_block_for_absolute(self.positioning()) {
|
||||
self.setup_clipping_for_block(state,
|
||||
&mut preserved_state,
|
||||
block_stacking_context_type,
|
||||
can_establish_containing_block);
|
||||
|
||||
if establishes_containing_block_for_absolute(can_establish_containing_block,
|
||||
self.positioning()) {
|
||||
state.containing_block_clip_and_scroll_info = state.current_clip_and_scroll_info;
|
||||
}
|
||||
|
||||
|
|
@ -2459,7 +2487,8 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
|
|||
fn setup_clipping_for_block(&mut self,
|
||||
state: &mut DisplayListBuildState,
|
||||
preserved_state: &mut PreservedDisplayListState,
|
||||
stacking_context_type: BlockStackingContextType)
|
||||
stacking_context_type: BlockStackingContextType,
|
||||
can_establish_containing_block: EstablishContainingBlock)
|
||||
-> ClipAndScrollInfo {
|
||||
// If this block is absolutely positioned, we should be clipped and positioned by
|
||||
// the scroll root of our nearest ancestor that establishes a containing block.
|
||||
|
|
@ -2477,26 +2506,33 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
|
|||
};
|
||||
self.base.clip_and_scroll_info = Some(containing_clip_and_scroll_info);
|
||||
|
||||
let coordinate_system = if self.fragment.establishes_stacking_context() {
|
||||
CoordinateSystem::Own
|
||||
let stacking_relative_border_box = if self.fragment.establishes_stacking_context() {
|
||||
self.stacking_relative_border_box(CoordinateSystem::Own)
|
||||
} else {
|
||||
CoordinateSystem::Parent
|
||||
self.stacking_relative_border_box(CoordinateSystem::Parent)
|
||||
};
|
||||
|
||||
let stacking_relative_border_box = self.fragment.stacking_relative_border_box(
|
||||
&self.base.stacking_relative_position,
|
||||
&self.base.early_absolute_position_info.relative_containing_block_size,
|
||||
self.base.early_absolute_position_info.relative_containing_block_mode,
|
||||
coordinate_system);
|
||||
|
||||
if stacking_context_type == BlockStackingContextType::StackingContext {
|
||||
self.transform_clip_to_coordinate_space(state, preserved_state);
|
||||
}
|
||||
|
||||
self.setup_scroll_root_for_position(state, &stacking_relative_border_box);
|
||||
self.setup_scroll_root_for_overflow(state, &stacking_relative_border_box);
|
||||
self.setup_scroll_root_for_css_clip(state, preserved_state, &stacking_relative_border_box);
|
||||
self.base.clip = state.clip_stack.last().cloned().unwrap_or_else(max_rect);
|
||||
|
||||
// We keep track of our position so that any stickily positioned elements can
|
||||
// properly determine the extent of their movement relative to scrolling containers.
|
||||
if can_establish_containing_block == EstablishContainingBlock::Yes {
|
||||
let border_box = if self.fragment.establishes_stacking_context() {
|
||||
stacking_relative_border_box
|
||||
} else {
|
||||
self.stacking_relative_border_box(CoordinateSystem::Own)
|
||||
};
|
||||
state.parent_stacking_relative_content_box =
|
||||
self.fragment.stacking_relative_content_box(&border_box)
|
||||
}
|
||||
|
||||
match self.positioning() {
|
||||
position::T::absolute | position::T::relative | position::T::fixed =>
|
||||
state.containing_block_clip_and_scroll_info = state.current_clip_and_scroll_info,
|
||||
|
|
@ -2506,6 +2542,72 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
|
|||
containing_clip_and_scroll_info
|
||||
}
|
||||
|
||||
fn setup_scroll_root_for_position(&mut self,
|
||||
state: &mut DisplayListBuildState,
|
||||
border_box: &Rect<Au>) {
|
||||
if self.positioning() != position::T::sticky {
|
||||
return;
|
||||
}
|
||||
|
||||
let sticky_position = self.sticky_position();
|
||||
if sticky_position.left == MaybeAuto::Auto && sticky_position.right == MaybeAuto::Auto &&
|
||||
sticky_position.top == MaybeAuto::Auto && sticky_position.bottom == MaybeAuto::Auto {
|
||||
return;
|
||||
}
|
||||
|
||||
// Since position: sticky elements always establish a stacking context, we will
|
||||
// have previously calculated our border box in our own coordinate system. In
|
||||
// order to properly calculate max offsets we need to compare our size and
|
||||
// position in our parent's coordinate system.
|
||||
let border_box_in_parent = self.stacking_relative_border_box(CoordinateSystem::Parent);
|
||||
let margins = self.fragment.margin.to_physical(
|
||||
self.base.early_absolute_position_info.relative_containing_block_mode);
|
||||
|
||||
// Position:sticky elements are always restricted based on the size and position of
|
||||
// their containing block, which for sticky items is like relative and statically
|
||||
// positioned items: just the parent block.
|
||||
let constraint_rect = state.parent_stacking_relative_content_box;
|
||||
|
||||
let to_max_offset = |constraint_edge: Au, moving_edge: Au| -> f32 {
|
||||
(constraint_edge - moving_edge).to_f32_px()
|
||||
};
|
||||
|
||||
let to_sticky_info = |margin: MaybeAuto, max_offset: f32| -> Option<StickySideConstraint> {
|
||||
match margin {
|
||||
MaybeAuto::Auto => None,
|
||||
MaybeAuto::Specified(value) =>
|
||||
Some(StickySideConstraint { margin: value.to_f32_px(), max_offset }),
|
||||
}
|
||||
};
|
||||
|
||||
let sticky_frame_info = StickyFrameInfo::new(
|
||||
to_sticky_info(sticky_position.top,
|
||||
to_max_offset(constraint_rect.max_y(), border_box_in_parent.max_y())),
|
||||
to_sticky_info(sticky_position.right,
|
||||
to_max_offset(constraint_rect.min_x(), border_box_in_parent.min_x() - margins.left)),
|
||||
to_sticky_info(sticky_position.bottom,
|
||||
to_max_offset(constraint_rect.min_y(), border_box_in_parent.min_y() - margins.top)),
|
||||
to_sticky_info(sticky_position.left,
|
||||
to_max_offset(constraint_rect.max_x(), border_box_in_parent.max_x())));
|
||||
|
||||
let new_scroll_root_id = ClipId::new(self.fragment.unique_id(IdType::OverflowClip),
|
||||
state.layout_context.id.to_webrender());
|
||||
let parent_id = self.clip_and_scroll_info(state.layout_context.id).scroll_node_id;
|
||||
state.add_scroll_root(
|
||||
ScrollRoot {
|
||||
id: new_scroll_root_id,
|
||||
parent_id: parent_id,
|
||||
clip: ClippingRegion::from_rect(border_box),
|
||||
content_rect: Rect::zero(),
|
||||
root_type: ScrollRootType::StickyFrame(sticky_frame_info),
|
||||
},
|
||||
);
|
||||
|
||||
let new_clip_and_scroll_info = ClipAndScrollInfo::simple(new_scroll_root_id);
|
||||
self.base.clip_and_scroll_info = Some(new_clip_and_scroll_info);
|
||||
state.current_clip_and_scroll_info = new_clip_and_scroll_info;
|
||||
}
|
||||
|
||||
fn setup_scroll_root_for_overflow(&mut self,
|
||||
state: &mut DisplayListBuildState,
|
||||
border_box: &Rect<Au>) {
|
||||
|
|
@ -2737,7 +2839,8 @@ impl InlineFlowDisplayListBuilding for InlineFlow {
|
|||
|
||||
for fragment in self.fragments.fragments.iter_mut() {
|
||||
let previous_cb_clip_scroll_info = state.containing_block_clip_and_scroll_info;
|
||||
if establishes_containing_block_for_absolute(fragment.style.get_box().position) {
|
||||
if establishes_containing_block_for_absolute(EstablishContainingBlock::Yes,
|
||||
fragment.style.get_box().position) {
|
||||
state.containing_block_clip_and_scroll_info = state.current_clip_and_scroll_info;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2521,8 +2521,9 @@ impl Fragment {
|
|||
return true
|
||||
}
|
||||
|
||||
// Fixed position blocks always create stacking contexts.
|
||||
if self.style.get_box().position == position::T::fixed {
|
||||
// Fixed position and sticky position always create stacking contexts.
|
||||
if self.style().get_box().position == position::T::fixed ||
|
||||
self.style().get_box().position == position::T::sticky {
|
||||
return true
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -598,6 +598,7 @@ impl FragmentBorderBoxIterator for ParentOffsetBorderBoxIterator {
|
|||
(true, _, _) |
|
||||
(false, computed_values::position::T::static_, &SpecificFragmentInfo::Table) |
|
||||
(false, computed_values::position::T::static_, &SpecificFragmentInfo::TableCell) |
|
||||
(false, computed_values::position::T::sticky, _) |
|
||||
(false, computed_values::position::T::absolute, _) |
|
||||
(false, computed_values::position::T::relative, _) |
|
||||
(false, computed_values::position::T::fixed, _) => true,
|
||||
|
|
@ -766,7 +767,7 @@ where
|
|||
|
||||
let positioned = match style.get_box().position {
|
||||
position::computed_value::T::relative |
|
||||
/*position::computed_value::T::sticky |*/
|
||||
position::computed_value::T::sticky |
|
||||
position::computed_value::T::fixed |
|
||||
position::computed_value::T::absolute => true,
|
||||
_ => false
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ pub fn iterate_through_flow_tree_fragment_border_boxes(root: &mut Flow, iterator
|
|||
flow::base(kid).stacking_relative_position +
|
||||
stacking_context_position.to_vector();
|
||||
let relative_position = kid.as_block()
|
||||
.stacking_relative_position(CoordinateSystem::Own);
|
||||
.stacking_relative_border_box(CoordinateSystem::Own);
|
||||
if let Some(matrix) = kid.as_block()
|
||||
.fragment
|
||||
.transform_matrix(&relative_position) {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@ use app_units::Au;
|
|||
use block::{BlockFlow, CandidateBSizeIterator, ISizeAndMarginsComputer};
|
||||
use block::{ISizeConstraintInput, ISizeConstraintSolution};
|
||||
use context::LayoutContext;
|
||||
use display_list_builder::{BlockFlowDisplayListBuilding, BorderPaintingMode, DisplayListBuildState};
|
||||
use display_list_builder::{BlockFlowDisplayListBuilding, BorderPaintingMode};
|
||||
use display_list_builder::{DisplayListBuildState, EstablishContainingBlock};
|
||||
use euclid::Point2D;
|
||||
use flow;
|
||||
use flow::{BaseFlow, EarlyAbsolutePositionInfo, Flow, FlowClass, ImmutableFlowUtils, OpaqueFlow};
|
||||
|
|
@ -503,7 +504,7 @@ impl Flow for TableFlow {
|
|||
}
|
||||
|
||||
fn collect_stacking_contexts(&mut self, state: &mut DisplayListBuildState) {
|
||||
self.block_flow.collect_stacking_contexts(state);
|
||||
self.block_flow.collect_stacking_contexts_for_block(state, EstablishContainingBlock::Yes);
|
||||
}
|
||||
|
||||
fn repair_style(&mut self, new_style: &::ServoArc<ComputedValues>) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
use app_units::Au;
|
||||
use block::BlockFlow;
|
||||
use context::LayoutContext;
|
||||
use display_list_builder::DisplayListBuildState;
|
||||
use display_list_builder::{BlockFlowDisplayListBuilding, DisplayListBuildState};
|
||||
use display_list_builder::EstablishContainingBlock;
|
||||
use euclid::Point2D;
|
||||
use flow::{Flow, FlowClass, OpaqueFlow};
|
||||
use fragment::{Fragment, FragmentBorderBoxIterator, Overflow};
|
||||
|
|
@ -80,7 +81,7 @@ impl Flow for TableCaptionFlow {
|
|||
}
|
||||
|
||||
fn collect_stacking_contexts(&mut self, state: &mut DisplayListBuildState) {
|
||||
self.block_flow.collect_stacking_contexts(state);
|
||||
self.block_flow.collect_stacking_contexts_for_block(state, EstablishContainingBlock::No);
|
||||
}
|
||||
|
||||
fn repair_style(&mut self, new_style: &::ServoArc<ComputedValues>) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
use app_units::Au;
|
||||
use block::{BlockFlow, ISizeAndMarginsComputer, MarginsMayCollapseFlag};
|
||||
use context::LayoutContext;
|
||||
use display_list_builder::{BlockFlowDisplayListBuilding, BorderPaintingMode, DisplayListBuildState};
|
||||
use display_list_builder::{BlockFlowDisplayListBuilding, BorderPaintingMode};
|
||||
use display_list_builder::{DisplayListBuildState, EstablishContainingBlock};
|
||||
use euclid::{Point2D, Rect, SideOffsets2D, Size2D};
|
||||
use flow::{self, Flow, FlowClass, IS_ABSOLUTELY_POSITIONED, OpaqueFlow};
|
||||
use fragment::{Fragment, FragmentBorderBoxIterator, Overflow};
|
||||
|
|
@ -260,7 +261,7 @@ impl Flow for TableCellFlow {
|
|||
}
|
||||
|
||||
fn collect_stacking_contexts(&mut self, state: &mut DisplayListBuildState) {
|
||||
self.block_flow.collect_stacking_contexts(state);
|
||||
self.block_flow.collect_stacking_contexts_for_block(state, EstablishContainingBlock::No);
|
||||
}
|
||||
|
||||
fn repair_style(&mut self, new_style: &::ServoArc<ComputedValues>) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
use app_units::Au;
|
||||
use block::{BlockFlow, ISizeAndMarginsComputer};
|
||||
use context::LayoutContext;
|
||||
use display_list_builder::{BlockFlowDisplayListBuilding, BorderPaintingMode, DisplayListBuildState};
|
||||
use display_list_builder::{BlockFlowDisplayListBuilding, BorderPaintingMode};
|
||||
use display_list_builder::{DisplayListBuildState, EstablishContainingBlock};
|
||||
use euclid::Point2D;
|
||||
use flow::{self, EarlyAbsolutePositionInfo, Flow, FlowClass, ImmutableFlowUtils, OpaqueFlow};
|
||||
use flow_list::MutFlowListIterator;
|
||||
|
|
@ -478,7 +479,7 @@ impl Flow for TableRowFlow {
|
|||
}
|
||||
|
||||
fn collect_stacking_contexts(&mut self, state: &mut DisplayListBuildState) {
|
||||
self.block_flow.collect_stacking_contexts(state);
|
||||
self.block_flow.collect_stacking_contexts_for_block(state, EstablishContainingBlock::No);
|
||||
}
|
||||
|
||||
fn repair_style(&mut self, new_style: &::ServoArc<ComputedValues>) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
use app_units::Au;
|
||||
use block::{BlockFlow, ISizeAndMarginsComputer};
|
||||
use context::LayoutContext;
|
||||
use display_list_builder::DisplayListBuildState;
|
||||
use display_list_builder::{BlockFlowDisplayListBuilding, DisplayListBuildState};
|
||||
use display_list_builder::EstablishContainingBlock;
|
||||
use euclid::Point2D;
|
||||
use flow::{Flow, FlowClass, OpaqueFlow};
|
||||
use fragment::{Fragment, FragmentBorderBoxIterator, Overflow};
|
||||
|
|
@ -183,7 +184,7 @@ impl Flow for TableRowGroupFlow {
|
|||
}
|
||||
|
||||
fn collect_stacking_contexts(&mut self, state: &mut DisplayListBuildState) {
|
||||
self.block_flow.collect_stacking_contexts(state);
|
||||
self.block_flow.collect_stacking_contexts_for_block(state, EstablishContainingBlock::No);
|
||||
}
|
||||
|
||||
fn repair_style(&mut self, new_style: &::ServoArc<ComputedValues>) {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@ use app_units::Au;
|
|||
use block::{AbsoluteNonReplaced, BlockFlow, FloatNonReplaced, ISizeAndMarginsComputer, ISizeConstraintInput};
|
||||
use block::{ISizeConstraintSolution, MarginsMayCollapseFlag};
|
||||
use context::LayoutContext;
|
||||
use display_list_builder::DisplayListBuildState;
|
||||
use display_list_builder::{BlockFlowDisplayListBuilding, DisplayListBuildState};
|
||||
use display_list_builder::EstablishContainingBlock;
|
||||
use euclid::Point2D;
|
||||
use floats::FloatKind;
|
||||
use flow::{Flow, FlowClass, ImmutableFlowUtils, INLINE_POSITION_IS_STATIC, OpaqueFlow};
|
||||
|
|
@ -463,7 +464,7 @@ impl Flow for TableWrapperFlow {
|
|||
}
|
||||
|
||||
fn collect_stacking_contexts(&mut self, state: &mut DisplayListBuildState) {
|
||||
self.block_flow.collect_stacking_contexts(state);
|
||||
self.block_flow.collect_stacking_contexts_for_block(state, EstablishContainingBlock::No);
|
||||
}
|
||||
|
||||
fn repair_style(&mut self, new_style: &::ServoArc<ComputedValues>) {
|
||||
|
|
|
|||
|
|
@ -493,10 +493,11 @@ impl WebRenderDisplayItemConverter for DisplayItem {
|
|||
builder.push_clip_id(item.scroll_root.parent_id);
|
||||
|
||||
let our_id = item.scroll_root.id;
|
||||
let item_rect = item.scroll_root.clip.main.to_rectf();
|
||||
let webrender_id = match item.scroll_root.root_type {
|
||||
ScrollRootType::Clip => {
|
||||
builder.define_clip(Some(our_id),
|
||||
item.scroll_root.clip.main.to_rectf(),
|
||||
item_rect,
|
||||
item.scroll_root.clip.get_complex_clips(),
|
||||
None)
|
||||
}
|
||||
|
|
@ -508,6 +509,9 @@ impl WebRenderDisplayItemConverter for DisplayItem {
|
|||
None,
|
||||
scroll_sensitivity)
|
||||
}
|
||||
ScrollRootType::StickyFrame(sticky_frame_info) => {
|
||||
builder.define_sticky_frame(Some(our_id), item_rect, sticky_frame_info)
|
||||
}
|
||||
};
|
||||
debug_assert!(our_id == webrender_id);
|
||||
|
||||
|
|
|
|||
|
|
@ -204,8 +204,7 @@ ${helpers.single_keyword("-moz-top-layer", "none top",
|
|||
products="gecko", animation_value_type="none", internal=True,
|
||||
spec="Internal (not web-exposed)")}
|
||||
|
||||
${helpers.single_keyword("position", "static absolute relative fixed",
|
||||
extra_gecko_values="sticky",
|
||||
${helpers.single_keyword("position", "static absolute relative fixed sticky",
|
||||
animation_value_type="discrete",
|
||||
flags="CREATES_STACKING_CONTEXT ABSPOS_CB",
|
||||
spec="https://drafts.csswg.org/css-position/#position-property")}
|
||||
|
|
|
|||
|
|
@ -1403,6 +1403,318 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-bottom.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-bottom.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-bottom-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-flexbox.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-flexbox.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-flexbox-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-grid.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-grid.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-grid-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-inflow-position.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-inflow-position.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-inflow-position-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-inline.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-inline.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-inline-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-left.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-left.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-left-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-margins.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-margins.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-margins-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-bottom.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-bottom.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-bottom-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-inline.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-inline.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-inline-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-left.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-left.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-left-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-right.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-right.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-right-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-table.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-table.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-table-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-top.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-top.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-top-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-overflow-padding.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-overflow-padding.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-overflow-padding-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-right.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-right.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-right-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-stacking-context.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-stacking-context.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-stacking-context-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-tfoot-bottom.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-tfoot-bottom.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-tfoot-bottom-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-th-bottom.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-th-bottom.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-th-bottom-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-th-left.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-th-left.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-th-left-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-th-right.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-th-right.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-th-right-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-th-top.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-th-top.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-th-top-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-thead-top.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-thead-top.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-thead-top-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-tr-bottom.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-tr-bottom.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-tr-bottom-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-tr-top.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-tr-top.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-tr-top-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-top.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-top.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-top-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-writing-modes.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-writing-modes.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-writing-modes-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/data_img_a.html": [
|
||||
[
|
||||
"/_mozilla/css/data_img_a.html",
|
||||
|
|
@ -8101,6 +8413,136 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-bottom-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-flexbox-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-grid-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-inflow-position-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-inline-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-left-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-margins-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-bottom-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-inline-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-left-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-right-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-table-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-top-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-overflow-padding-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-right-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-stacking-context-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-tfoot-bottom-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-th-bottom-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-th-left-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-th-right-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-th-top-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-thead-top-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-tr-bottom-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-tr-top-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-top-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-writing-modes-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css/ahem.css": [
|
||||
[
|
||||
{}
|
||||
|
|
@ -13518,6 +13960,30 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-get-bounding-client-rect.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-get-bounding-client-rect.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-input-box-gets-focused-after-scroll.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-input-box-gets-focused-after-scroll.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-offset-top-left.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-offset-top-left.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-position-3/position-sticky-parsing.html": [
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-parsing.html",
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/empty-keyframes.html": [
|
||||
[
|
||||
"/_mozilla/css/empty-keyframes.html",
|
||||
|
|
@ -22967,6 +23433,230 @@
|
|||
"768744b9db67d625e4ba3ae1809a967648440503",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-bottom-ref.html": [
|
||||
"726d6e927d84669e9355701ccd948349d377e6fd",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-bottom.html": [
|
||||
"2a908e60a635dbf765987c0f93d0f33c8ea85de6",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-flexbox-ref.html": [
|
||||
"f8dedb4a637ea3f4bf79eb621f52a8c4622f8c75",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-flexbox.html": [
|
||||
"efb055a7efb5ee3aabd28e369d0bdc9ae98bd33d",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-get-bounding-client-rect.html": [
|
||||
"5b9a1a29084f46228749c1b2b1a664be3ce02c43",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-position-3/position-sticky-grid-ref.html": [
|
||||
"9748c25d3db9b5ec2753ff53ceb0b82db9453cdc",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-grid.html": [
|
||||
"a06a40f39b4a748c111dc01281261c5451204f95",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-inflow-position-ref.html": [
|
||||
"bcce2ded8073a7b5b3477bcf90157cb0e77c2b40",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-inflow-position.html": [
|
||||
"c8e2bcdddf9e8ee93f9306d88b96c3bf1f1bfaf6",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-inline-ref.html": [
|
||||
"9458cab53d2065e4893d127ee0097bbd53c6b898",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-inline.html": [
|
||||
"9fe0b3407310fbe1ee8b1614db0801bdf93b38be",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-input-box-gets-focused-after-scroll.html": [
|
||||
"6580451dddfd6f8865925326c170f630f343fbcd",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-position-3/position-sticky-left-ref.html": [
|
||||
"9de7a8ba6019395d729b32e514cc3bd9fee25d2b",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-left.html": [
|
||||
"5151bca08dff652ea728cb8bccbb6b7c6d364dd8",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-margins-ref.html": [
|
||||
"0cdb788c913f47a121114ac5b8e6a140bb08c1ff",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-margins.html": [
|
||||
"72fb6ae7d97bf2448ebd68ccf110edd6bae2c92f",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-bottom-ref.html": [
|
||||
"59a8e46358a8a5bf8638a2d1982c63becef5bc77",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-bottom.html": [
|
||||
"3604a921be04927dd19b805b7c9abaed6d0e7c72",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-inline-ref.html": [
|
||||
"8fb9378e91a20b71ef886b9aac0147b25d00a9a3",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-inline.html": [
|
||||
"50be9f2fb6ab9295081f6f13705be4853e48fdde",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-left-ref.html": [
|
||||
"52804c5589c3035818cd653c1801a70645a9fe99",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-left.html": [
|
||||
"c32881097147e285b6ee66e6239af4808d780c83",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-right-ref.html": [
|
||||
"5703ad6457deca332232e510dc479c39b7020d24",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-right.html": [
|
||||
"39683624316599779b0efcb347010b92694e02a6",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-table-ref.html": [
|
||||
"7b8956bc720e2e25e7ff0bc5889812c26837ab58",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-table.html": [
|
||||
"87a80629bcfcace28d4f13bce99325d55d317574",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-top-ref.html": [
|
||||
"66ea8b8c72023089d52e6ebdf5bfff5d56259bfc",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-nested-top.html": [
|
||||
"88e35164b6ede3adf9727989cf59ff9956bdbae7",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-offset-top-left.html": [
|
||||
"a25b64d016644c272ea92b6129a59eefb21d2fa0",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-position-3/position-sticky-overflow-padding-ref.html": [
|
||||
"b3d81934cc90e70dff6bc5cd7789594a8fcd7ecf",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-overflow-padding.html": [
|
||||
"588502dc7eb4a7f88f78dd1b2cdc857861c89f77",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-parsing.html": [
|
||||
"224bc984bc6eb4a55931461cf7e51f7b04d219f4",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-position-3/position-sticky-right-ref.html": [
|
||||
"9a4a11b22cb0ea13f38a7dded8469f4848550ed4",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-right.html": [
|
||||
"f79c0e3e99085e483652950b141fe15c3c4d01d8",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-stacking-context-ref.html": [
|
||||
"dd6e5d4734c924c1ad08d14db986fb89d7cb03f6",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-stacking-context.html": [
|
||||
"ac1e643ac9f03d0fe415c3f52a4db7c407dd3537",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-tfoot-bottom-ref.html": [
|
||||
"b902bec7e12fd6d9cad02c61f332a44f5818f8ee",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-tfoot-bottom.html": [
|
||||
"4caf24ad5f783119598d52b40425ae3433b61da6",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-th-bottom-ref.html": [
|
||||
"14d74f652a67cad449bd7ef75ed18bd906ba3bf0",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-th-bottom.html": [
|
||||
"84df11e668ada7f89586b2b82774f3f43e07457c",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-th-left-ref.html": [
|
||||
"a9057263cf68862de453cf857961ece6003eb589",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-th-left.html": [
|
||||
"e58662697cbf38f24c38562417864ffa38a312ee",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-th-right-ref.html": [
|
||||
"8d42e0ff2920782dbfbd060b23817e75125dfb5e",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-th-right.html": [
|
||||
"6ea7a6d2e456022d3ebfb91869f751013e27991d",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-th-top-ref.html": [
|
||||
"b30c817f263e6e7b695508983952a46eb32494f9",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-th-top.html": [
|
||||
"ce4a56682101dc24c9170d3d265fc6a021b5b7ab",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-thead-top-ref.html": [
|
||||
"a2b03215ddc3aed6bc81ed678f6339d72132d4df",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-thead-top.html": [
|
||||
"2c3d4dd8028d7d79f74aa1460c57f10d087a45f0",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-tr-bottom-ref.html": [
|
||||
"77fcc16040cff06c53f18cfe96296f495b752c18",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-tr-bottom.html": [
|
||||
"f66365f4ceed9072bf25b98ecc36e49c89625b8b",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-tr-top-ref.html": [
|
||||
"8a54752c532080b652ae5ffb384b34ad2c8d8cb4",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-table-tr-top.html": [
|
||||
"7a030d17358067b78c879bf17171b60d1dc3acd9",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-top-ref.html": [
|
||||
"e5a05c21494a2e2923d1ed37050ec75db7ab55cd",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-top.html": [
|
||||
"30c0c00c6313a747b51c8b6d4f1301056af56560",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-position-3/position-sticky-writing-modes-ref.html": [
|
||||
"407a1831479ccca61f6f7b268abcbf97f667f0bf",
|
||||
"support"
|
||||
],
|
||||
"css/css-position-3/position-sticky-writing-modes.html": [
|
||||
"b6d16a38b73d4c107e587194818a542fee9d0716",
|
||||
"reftest"
|
||||
],
|
||||
"css/css/ahem.css": [
|
||||
"16a4dd68da41156fbdd139b4a56547f94ad4dbe7",
|
||||
"support"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
[position-sticky-get-bounding-client-rect.html]
|
||||
type: testharness
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
[sticky positioned element should be observable by getBoundingClientRect.]
|
||||
bug: https://github.com/servo/servo/issues/18378
|
||||
expected: FAIL
|
||||
|
||||
[getBoundingClientRect should be correct for sticky after script insertion]
|
||||
bug: https://github.com/servo/servo/issues/18378
|
||||
expected: FAIL
|
||||
|
||||
[getBoundingClientRect should be correct for sticky after script-caused layout]
|
||||
bug: https://github.com/servo/servo/issues/18378
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
[position-sticky-grid.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18379
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
[position-sticky-inline.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18379
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
[position-sticky-nested-bottom.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18377
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
[position-sticky-nested-inline.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18377
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
[position-sticky-nested-left.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18377
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
[position-sticky-nested-right.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18377
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
[position-sticky-nested-table.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18377
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
[position-sticky-nested-top.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18377
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
[position-sticky-offset-top-left.html]
|
||||
type: testharness
|
||||
[offsetTop/offsetLeft should be correct for sticky after script insertion]
|
||||
bug: https://github.com/servo/servo/issues/18378
|
||||
expected: FAIL
|
||||
|
||||
[offsetTop/offsetLeft should be correct for sticky after script-caused layout]
|
||||
bug: https://github.com/servo/servo/issues/18378
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
[position-sticky-overflow-padding.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18379
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
[position-sticky-parsing.html]
|
||||
type: testharness
|
||||
[The value of sticky for the position property should be parsed correctly]
|
||||
bug: https://github.com/servo/servo/issues/18378
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
[position-sticky-writing-modes.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18379
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky elements should respect the top constraint</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background-color: green;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 100;
|
||||
document.getElementById('scroller2').scrollTop = 175;
|
||||
document.getElementById('scroller3').scrollTop = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator box" style="top: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator box" style="top: 250px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator box" style="top: 300px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky elements should respect the bottom constraint</title>
|
||||
<link rel="match" href="position-sticky-bottom-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that position:sticky elements obey their bottom anchor after scrolling" />
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.filler {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
background-color: green;
|
||||
position: sticky;
|
||||
bottom: 25px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 100;
|
||||
document.getElementById('scroller2').scrollTop = 175;
|
||||
document.getElementById('scroller3').scrollTop = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator box" style="top: 200px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="filler"></div>
|
||||
<div class="sticky box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator box" style="top: 250px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="filler"></div>
|
||||
<div class="sticky box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator box" style="top: 300px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="filler"></div>
|
||||
<div class="sticky box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky elements should work correctly with flexbox</title>
|
||||
|
||||
<style>
|
||||
.scroller {
|
||||
overflow: scroll;
|
||||
width: 350px;
|
||||
height: 100px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
width: 600px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
height: 85px;
|
||||
width: 100px;
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollLeft = 50;
|
||||
document.getElementById('scroller2').scrollLeft = 150;
|
||||
document.getElementById('scroller3').scrollLeft = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="flex-container">
|
||||
<div class="flex-item"></div>
|
||||
<div class="green flex-item"></div>
|
||||
<div class="green flex-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="flex-container">
|
||||
<div class="flex-item"></div>
|
||||
<div class="flex-item"></div>
|
||||
<div class="green flex-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="flex-container">
|
||||
<div class="flex-item"></div>
|
||||
<div class="flex-item"></div>
|
||||
<div class="green flex-item"></div>
|
||||
<div class="green flex-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>You should see three green boxes of varying size above. There should be no red.</p>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky elements should work correctly with flexbox</title>
|
||||
<link rel="match" href="position-sticky-flexbox-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that position:sticky elements interoperate correctly with flexbox" />
|
||||
|
||||
<style>
|
||||
.scroller {
|
||||
overflow: scroll;
|
||||
width: 350px;
|
||||
height: 100px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
width: 600px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
width: 100px;
|
||||
height: 85px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 85px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollLeft = 50;
|
||||
document.getElementById('scroller2').scrollLeft = 150;
|
||||
document.getElementById('scroller3').scrollLeft = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="flex-container">
|
||||
<div class="indicator" style="left: 100px;"></div>
|
||||
<div class="flex-item"></div>
|
||||
<div class="sticky green flex-item"></div>
|
||||
<div class="green flex-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="flex-container">
|
||||
<div class="indicator" style="left: 200px;"></div>
|
||||
<div class="flex-item"></div>
|
||||
<div class="sticky green flex-item"></div>
|
||||
<div class="green flex-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="flex-container">
|
||||
<div class="indicator" style="left: 300px;"></div>
|
||||
<div class="flex-item"></div>
|
||||
<div class="sticky green flex-item"></div>
|
||||
<div class="green flex-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>You should see three green boxes of varying size above. There should be no red.</p>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Sticky positioned element should be observable by getBoundingClientRect.</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that sticky positioned element
|
||||
should be observable by getBoundingClientRect." />
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
overflow: scroll;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller1" class="container">
|
||||
<div id="sticky1" class="sticky box"></div>
|
||||
<div class="spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(() => {
|
||||
var sticky = document.getElementById('sticky1');
|
||||
assert_equals(sticky.getBoundingClientRect().top, 50);
|
||||
document.getElementById('scroller1').scrollTop = 100;
|
||||
assert_equals(sticky.getBoundingClientRect().top, 50);
|
||||
sticky.style.position = 'relative';
|
||||
assert_equals(sticky.getBoundingClientRect().top, -50);
|
||||
sticky.style.position = 'sticky';
|
||||
assert_equals(sticky.getBoundingClientRect().top, 50);
|
||||
}, 'sticky positioned element should be observable by getBoundingClientRect.');
|
||||
</script>
|
||||
|
||||
<div id="scroller2" class="container">
|
||||
<div class="spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(() => {
|
||||
var scroller = document.getElementById('scroller2');
|
||||
scroller.scrollTop = 100;
|
||||
scroller.scrollLeft = 75;
|
||||
|
||||
var sticky = document.createElement('div');
|
||||
sticky.className = 'sticky box';
|
||||
scroller.insertBefore(sticky, scroller.querySelector('.spacer'));
|
||||
|
||||
var sticky_bounds = sticky.getBoundingClientRect();
|
||||
var scroller_bounds = scroller.getBoundingClientRect();
|
||||
assert_equals(sticky_bounds.top, scroller_bounds.top + 50);
|
||||
assert_equals(sticky_bounds.left, scroller_bounds.left + 20);
|
||||
}, 'getBoundingClientRect should be correct for sticky after script insertion');
|
||||
</script>
|
||||
|
||||
<div id="scroller3" class="container">
|
||||
<div id="sticky3" class="sticky box"></div>
|
||||
<div class="spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(() => {
|
||||
var scroller = document.getElementById('scroller3');
|
||||
var sticky = document.getElementById('sticky3');
|
||||
scroller.scrollTop = 100;
|
||||
scroller.scrollLeft = 75;
|
||||
|
||||
var div = document.createElement('div');
|
||||
div.style.height = '65px';
|
||||
scroller.insertBefore(div, sticky);
|
||||
|
||||
var sticky_bounds = sticky.getBoundingClientRect();
|
||||
var scroller_bounds = scroller.getBoundingClientRect();
|
||||
assert_equals(sticky_bounds.top, scroller_bounds.top + 50);
|
||||
assert_equals(sticky_bounds.left, scroller_bounds.left + 20);
|
||||
}, 'getBoundingClientRect should be correct for sticky after script-caused layout');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky elements should work correctly with grid layout</title>
|
||||
|
||||
<style>
|
||||
.scroller {
|
||||
position: relative;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 25% 25% 25% 25%;
|
||||
grid-template-rows: 100%;
|
||||
width: 400px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.padding {
|
||||
height: 1px;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollLeft = 0;
|
||||
document.getElementById('scroller2').scrollLeft = 150;
|
||||
document.getElementById('scroller3').scrollLeft = 300;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="grid-container">
|
||||
<div class="grid-item" style="grid-column: 1;"></div>
|
||||
<div class="green grid-item" style="grid-column: 2;"></div>
|
||||
<div class="green grid-item" style="grid-column: 3;"></div>
|
||||
</div>
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="grid-container">
|
||||
<div class="grid-item" style="grid-column: 1;"></div>
|
||||
<div class="grid-item" style="grid-column: 2;"></div>
|
||||
<div class="green grid-item" style="grid-column: 3;"></div>
|
||||
</div>
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="grid-container">
|
||||
<div class="grid-item" style="grid-column: 1;"></div>
|
||||
<div class="grid-item" style="grid-column: 2;"></div>
|
||||
<div class="grid-item" style="grid-column: 3;"></div>
|
||||
<div class="green grid-item" style="grid-column: 4;"></div>
|
||||
</div>
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
|
||||
<p>You should see three green boxes of varying size above. There should be no red.</p>
|
||||
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky elements should work correctly with grid layout</title>
|
||||
<link rel="match" href="position-sticky-grid-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that position:sticky elements interoperate correctly with grid" />
|
||||
|
||||
<style>
|
||||
.scroller {
|
||||
position: relative;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 25% 25% 25% 25%;
|
||||
grid-template-rows: 100%;
|
||||
width: 400px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.padding {
|
||||
height: 1px;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollLeft = 0;
|
||||
document.getElementById('scroller2').scrollLeft = 150;
|
||||
document.getElementById('scroller3').scrollLeft = 300;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="grid-container">
|
||||
<div class="indicator" style="left: 100px;"></div>
|
||||
<div class="grid-item" style="grid-column: 1;"></div>
|
||||
<div class="sticky green grid-item" style="grid-column: 2;"></div>
|
||||
<div class="green grid-item" style="grid-column: 3;"></div>
|
||||
</div>
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="grid-container">
|
||||
<div class="indicator" style="left: 200px;"></div>
|
||||
<div class="grid-item" style="grid-column: 1;"></div>
|
||||
<div class="sticky green grid-item" style="grid-column: 2;"></div>
|
||||
<div class="green grid-item" style="grid-column: 3;"></div>
|
||||
</div>
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="grid-container">
|
||||
<div class="indicator" style="left: 300px;"></div>
|
||||
<div class="grid-item" style="grid-column: 1;"></div>
|
||||
<div class="sticky green grid-item" style="grid-column: 2;"></div>
|
||||
<div class="green grid-item" style="grid-column: 3;"></div>
|
||||
</div>
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
|
||||
<p>You should see three green boxes of varying size above. There should be no red.</p>
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky elements should not affect the flow position of other elements</title>
|
||||
|
||||
<style>
|
||||
.scroller {
|
||||
height: 200px;
|
||||
width: 100px;
|
||||
overflow-y: scroll;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.box {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.before {
|
||||
background-color: fuchsia;
|
||||
}
|
||||
|
||||
.after {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.padding {
|
||||
height: 450px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="scroller">
|
||||
<div class="before box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="after box"></div>
|
||||
<div class="sticky box"></div>
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
|
||||
<div>You should see a fuchsia box, a one-box gap, an orange box, and then a green box above.</div>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky elements should not affect the flow position of other elements</title>
|
||||
<link rel="match" href="position-sticky-inflow-position-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that position:sticky elements do not affect the flow position of other elements" />
|
||||
|
||||
<style>
|
||||
.scroller {
|
||||
height: 200px;
|
||||
width: 100px;
|
||||
overflow-y: scroll;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
background-color: green;
|
||||
position: sticky;
|
||||
top: 150px;
|
||||
}
|
||||
|
||||
.box {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.before {
|
||||
background-color: fuchsia;
|
||||
}
|
||||
|
||||
.after {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.padding {
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="scroller">
|
||||
<div class="before box"></div>
|
||||
<div class="sticky box"></div>
|
||||
<div class="after box"></div>
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
|
||||
<div>You should see a fuchsia box, a one-box gap, an orange box, and then a green box above.</div>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky should work for inline elements</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator inline" style="top: 150px;">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator inline" style="top: 175px;">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator inline" style="top: 275px;">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green rectangles above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky should work for inline elements</title>
|
||||
<link rel="match" href="position-sticky-inline-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that position:sticky works for inline elements" />
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.innerpadding {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator inline" style="top: 150px;">XXX</div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="sticky inline">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator inline" style="top: 175px;">XXX</div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="sticky inline">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator inline" style="top: 275px;">XXX</div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="sticky inline">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green rectangles above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Focusing on visible sticky input box should not scroll the page.</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that focusing on visible sticky
|
||||
positioned input box should not scroll the page." />
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
height: 2000px;
|
||||
}
|
||||
|
||||
input {
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<input type="text" id="input"/>
|
||||
|
||||
<script>
|
||||
test(() => {
|
||||
var input = document.getElementById('input');
|
||||
window.scrollTo(0, 100);
|
||||
input.focus();
|
||||
assert_equals(window.scrollY, 100);
|
||||
}, 'Focusing on visible sticky input box should not scroll the page.');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky elements should respect the left constraint</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 100%;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background-color: green;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollLeft = 50;
|
||||
document.getElementById('scroller2').scrollLeft = 125;
|
||||
document.getElementById('scroller3').scrollLeft = 200;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator box" style="left: 150px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator box" style="left: 175px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator box" style="left: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky elements should respect the left constraint</title>
|
||||
<link rel="match" href="position-sticky-left-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that position:sticky elements obey their left anchor after scrolling" />
|
||||
|
||||
<style>
|
||||
.group {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 100%;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.innerpadding {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
background-color: green;
|
||||
position: sticky;
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollLeft = 50;
|
||||
document.getElementById('scroller2').scrollLeft = 125;
|
||||
document.getElementById('scroller3').scrollLeft = 200;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator box" style="left: 150px;"></div>
|
||||
<div class="contents">
|
||||
<!-- As these elements are inline, they are whitespace sensitive. -->
|
||||
<div class="prepadding"></div><div class="container"><div class="innerpadding"></div><div class="sticky box"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator box" style="left: 175px;"></div>
|
||||
<div class="contents">
|
||||
<!-- As these elements are inline, they are whitespace sensitive. -->
|
||||
<div class="prepadding"></div><div class="container"><div class="innerpadding"></div><div class="sticky box"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator box" style="left: 200px;"></div>
|
||||
<div class="contents">
|
||||
<!-- As these elements are inline, they are whitespace sensitive. -->
|
||||
<div class="prepadding"></div><div class="container"><div class="innerpadding"></div><div class="sticky box"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky elements should properly interact with margins</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
width: 150px;
|
||||
height: 300px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: relative;
|
||||
background-color: green;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.padding {
|
||||
height: 385px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 0;
|
||||
document.getElementById('scroller2').scrollTop = 60;
|
||||
document.getElementById('scroller3').scrollTop = 120;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator box" style="top: 0;"></div>
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator box" style="top: 50px;"></div>
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator box" style="top: 85px;"></div>
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky elements should properly interact with margins</title>
|
||||
<link rel="match" href="position-sticky-margins-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="position:sticky elements should ignore margins when sticking, but consider them when making sure sticky elements do not escape their containing block" />
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 300px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.holder {
|
||||
width: 130px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
background-color: green;
|
||||
top: 5px;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
left: 15px;
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.padding {
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 0;
|
||||
document.getElementById('scroller2').scrollTop = 60;
|
||||
document.getElementById('scroller3').scrollTop = 120;
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Before sticking, the margin should be obeyed. -->
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator box" style="top: 15px;"></div>
|
||||
<div class="holder">
|
||||
<div class="sticky box"></div>
|
||||
</div>
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Whilst stuck, the margin is irrelevant. -->
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator box" style="top: 65px;"></div>
|
||||
<div class="holder">
|
||||
<div class="sticky box"></div>
|
||||
</div>
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The margin does count when making sure the sticky element does not escape
|
||||
its containing block. -->
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator box" style="top: 100px;"></div>
|
||||
<div class="holder">
|
||||
<div class="sticky box"></div>
|
||||
</div>
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for nested bottom-constrained position:sticky elements should render correctly</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.outerIndicator {
|
||||
background-color: green;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.innerIndicator {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 75;
|
||||
document.getElementById('scroller2').scrollTop = 175;
|
||||
document.getElementById('scroller3').scrollTop = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="outerIndicator" style="top: 200px;"></div>
|
||||
<div class="innerIndicator" style="top: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="outerIndicator" style="top: 250px;"></div>
|
||||
<div class="innerIndicator" style="top: 290px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="outerIndicator" style="top: 300px;"></div>
|
||||
<div class="innerIndicator" style="top: 350px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green and three blue boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Nested bottom-constrained position:sticky elements should render correctly</title>
|
||||
<link rel="match" href="position-sticky-nested-bottom-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that nested position:sticky elements with a bottom constraint render correctly" />
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.filler {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.outerIndicator {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.innerIndicator {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.outerSticky {
|
||||
background-color: green;
|
||||
position: sticky;
|
||||
bottom: 25px;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.innerFiller {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.innerSticky {
|
||||
background-color: blue;
|
||||
position: sticky;
|
||||
bottom: 35px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 75;
|
||||
document.getElementById('scroller2').scrollTop = 175;
|
||||
document.getElementById('scroller3').scrollTop = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="outerIndicator" style="top: 200px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="filler"></div>
|
||||
<div class="outerSticky">
|
||||
<div class="innerIndicator" style="top: 0;"></div>
|
||||
<div class="innerFiller"></div>
|
||||
<div class="innerSticky"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="outerIndicator" style="top: 250px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="filler"></div>
|
||||
<div class="outerSticky">
|
||||
<div class="innerIndicator" style="top: 40px;"></div>
|
||||
<div class="innerFiller"></div>
|
||||
<div class="innerSticky"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="outerIndicator" style="top: 300px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="filler"></div>
|
||||
<div class="outerSticky">
|
||||
<div class="innerIndicator" style="top: 50px;"></div>
|
||||
<div class="innerFiller"></div>
|
||||
<div class="innerSticky"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green and three blue boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for nested inline position:sticky elements should render correctly</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.outerIndicator {
|
||||
color: green;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.innerIndicator {
|
||||
color: blue;
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 225;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="outerIndicator" style="top: 150px;">X</div>
|
||||
<div class="innerIndicator" style="top: 150px;">XX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="outerIndicator" style="top: 175px;">X</div>
|
||||
<div class="innerIndicator" style="top: 185px;">XX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="outerIndicator" style="top: 275px;">X</div>
|
||||
<div class="innerIndicator" style="top: 275px;">XX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green and three blue rectangles above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Nested inline position:sticky elements should render correctly</title>
|
||||
<link rel="match" href="position-sticky-nested-inline-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that nested inline position:sticky elements render correctly" />
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.innerpadding {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.outerIndicator {
|
||||
color: red;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.innerIndicator {
|
||||
color: red;
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
.outerSticky {
|
||||
display: inline;
|
||||
color: green;
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.innerSticky {
|
||||
display: inline;
|
||||
color: blue;
|
||||
position: sticky;
|
||||
top: 60px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 225;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="outerIndicator" style="top: 150px;">X</div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="outerSticky">X<div class="innerIndicator" style="top: 0;">XX</div><div class="innerSticky">XX</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="outerIndicator" style="top: 175px;">X</div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="outerSticky">X<div class="innerIndicator" style="top: 10px;">XX</div><div class="innerSticky">XX</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="outerIndicator" style="top: 200px;">X</div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="outerSticky">X<div class="innerIndicator" style="top: 0;">XX</div><div class="innerSticky">XX</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green and three blue rectangles above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for nested left-constrained position:sticky elements should render correctly</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 100%;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.outerIndicator {
|
||||
background-color: green;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.innerIndicator {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollLeft = 50;
|
||||
document.getElementById('scroller2').scrollLeft = 125;
|
||||
document.getElementById('scroller3').scrollLeft = 225;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="outerIndicator" style="left: 150px;"></div>
|
||||
<div class="innerIndicator" style="left: 150px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="outerIndicator" style="left: 175px;"></div>
|
||||
<div class="innerIndicator" style="left: 185px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="outerIndicator" style="left: 200px;"></div>
|
||||
<div class="innerIndicator" style="left: 250px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green and three blue boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Nested left-constrained position:sticky elements should render correctly</title>
|
||||
<link rel="match" href="position-sticky-nested-left-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that nested position:sticky elements with a left constraint render correctly" />
|
||||
|
||||
<style>
|
||||
.group {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 100%;
|
||||
width: 500px;
|
||||
/* Allow nice formatting of inline divs. Fonts are not used in this test. */
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.innerpadding {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.outerIndicator {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.innerIndicator {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.outerSticky {
|
||||
background-color: green;
|
||||
position: sticky;
|
||||
left: 50px;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.innerSticky {
|
||||
background-color: blue;
|
||||
position: sticky;
|
||||
left: 60px;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollLeft = 50;
|
||||
document.getElementById('scroller2').scrollLeft = 125;
|
||||
document.getElementById('scroller3').scrollLeft = 225;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="outerIndicator" style="left: 150px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="outerSticky">
|
||||
<div class="innerIndicator" style="left: 0;"></div>
|
||||
<div class="innerSticky"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="outerIndicator" style="left: 175px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding">
|
||||
</div><div class="outerSticky">
|
||||
<div class="innerIndicator" style="left: 10px;"></div>
|
||||
<div class="innerSticky"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="outerIndicator" style="left: 200px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="outerSticky">
|
||||
<div class="innerIndicator" style="left: 50px;"></div>
|
||||
<div class="innerSticky"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green and three blue boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky elements should respect the right constraint</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 100%;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.outerIndicator {
|
||||
background-color: green;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.innerIndicator {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollLeft = 75;
|
||||
document.getElementById('scroller2').scrollLeft = 175;
|
||||
document.getElementById('scroller3').scrollLeft = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="outerIndicator" style="left: 200px;"></div>
|
||||
<div class="innerIndicator" style="left: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="outerIndicator" style="left: 250px;"></div>
|
||||
<div class="innerIndicator" style="left: 290px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="outerIndicator" style="left: 300px;"></div>
|
||||
<div class="innerIndicator" style="left: 350px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green and three blue boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Nested right-constrained position:sticky elements should render correctly</title>
|
||||
<link rel="match" href="position-sticky-nested-right-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that nested position:sticky elements with a right constraint render correctly" />
|
||||
|
||||
<style>
|
||||
.group {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 100%;
|
||||
width: 500px;
|
||||
/* Allow nice formatting of inline divs. Fonts are not used in this test. */
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.filler {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.outerIndicator {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.innerIndicator {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.outerSticky {
|
||||
background-color: green;
|
||||
position: sticky;
|
||||
right: 25px;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.innerFiller {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.innerSticky {
|
||||
background-color: blue;
|
||||
position: sticky;
|
||||
right: 35px;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollLeft = 75;
|
||||
document.getElementById('scroller2').scrollLeft = 175;
|
||||
document.getElementById('scroller3').scrollLeft = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="outerIndicator" style="left: 200px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="filler"></div>
|
||||
<div class="outerSticky">
|
||||
<div class="innerIndicator" style="left: 0;"></div>
|
||||
<div class="innerFiller"></div>
|
||||
<div class="innerSticky"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="outerIndicator" style="left: 250px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="filler"></div>
|
||||
<div class="outerSticky">
|
||||
<div class="innerIndicator" style="left: 40px;"></div>
|
||||
<div class="innerFiller"></div>
|
||||
<div class="innerSticky"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="outerIndicator" style="left: 300px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="filler"></div>
|
||||
<div class="outerSticky">
|
||||
<div class="innerIndicator" style="left: 50px;"></div>
|
||||
<div class="innerFiller"></div>
|
||||
<div class="innerSticky"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green and three blue boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for nested position:sticky table elements should render correctly</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator" style="top: 150px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator" style="top: 250px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green rectangles above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Nested position:sticky table elements should render correctly</title>
|
||||
<link rel="match" href="position-sticky-nested-table-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that nested position:sticky table elements render correctly" />
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td, th {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
background: green;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 25px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background-color: red;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<thead class="sticky">
|
||||
<tr class="sticky">
|
||||
<th class="sticky"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td></td></tr>
|
||||
<tr><td></td></tr>
|
||||
<tr><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator" style="top: 150px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<thead class="sticky">
|
||||
<tr class="sticky">
|
||||
<th class="sticky"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td></td></tr>
|
||||
<tr><td></td></tr>
|
||||
<tr><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator" style="top: 250px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<thead class="sticky">
|
||||
<tr class="sticky">
|
||||
<th class="sticky"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td></td></tr>
|
||||
<tr><td></td></tr>
|
||||
<tr><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green rectangles above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for nested top-constrained position:sticky elements should render correctly</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.bigBox {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.smallBox {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 225;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="green indicator bigBox" style="top: 150px;"></div>
|
||||
<div class="blue indicator smallBox" style="top: 150px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="green indicator bigBox" style="top: 175px;"></div>
|
||||
<div class="blue indicator smallBox" style="top: 185px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="green indicator bigBox" style="top: 200px;"></div>
|
||||
<div class="blue indicator smallBox" style="top: 250px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green and three blue boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Nested top-constrainted position:sticky elements should render correctly</title>
|
||||
<link rel="match" href="position-sticky-nested-top-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that nested position:sticky elements with a top constraint render correctly" />
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.innerpadding {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.outerIndicator {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.innerIndicator {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.outerSticky {
|
||||
background-color: green;
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.innerSticky {
|
||||
background-color: blue;
|
||||
position: sticky;
|
||||
top: 60px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 225;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="outerIndicator" style="top: 150px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="outerSticky">
|
||||
<div class="innerIndicator" style="top: 0;"></div>
|
||||
<div class="innerSticky"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="outerIndicator" style="top: 175px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="outerSticky">
|
||||
<div class="innerIndicator" style="top: 10px;"></div>
|
||||
<div class="innerSticky"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="outerIndicator" style="top: 200px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="outerSticky">
|
||||
<div class="innerIndicator" style="top: 50px;"></div>
|
||||
<div class="innerSticky"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green and three blue boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Sticky positioned element should be observable by offsetTop and offsetLeft</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that a sticky positioned element
|
||||
should be observable by offsetTop/offsetLeft." />
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative; /* Required for offsetTop/offsetLeft tests. */
|
||||
overflow: scroll;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller1" class="container">
|
||||
<div class="spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(() => {
|
||||
var scroller = document.getElementById('scroller1');
|
||||
scroller.scrollTop = 100;
|
||||
scroller.scrollLeft = 75;
|
||||
|
||||
var sticky = document.createElement('div');
|
||||
sticky.className = 'sticky box';
|
||||
scroller.insertBefore(sticky, scroller.querySelector('.spacer'));
|
||||
|
||||
assert_equals(sticky.offsetTop, scroller.scrollTop + 50);
|
||||
assert_equals(sticky.offsetLeft, scroller.scrollLeft + 20);
|
||||
}, 'offsetTop/offsetLeft should be correct for sticky after script insertion');
|
||||
</script>
|
||||
|
||||
<div id="scroller2" class="container">
|
||||
<div id="sticky2" class="sticky box"></div>
|
||||
<div class="spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(function() {
|
||||
var scroller = document.getElementById('scroller2');
|
||||
var sticky = document.getElementById('sticky2');
|
||||
scroller.scrollTop = 100;
|
||||
scroller.scrollLeft = 75;
|
||||
|
||||
var div = document.createElement('div');
|
||||
div.style.height = '65px';
|
||||
scroller.insertBefore(div, sticky);
|
||||
|
||||
assert_equals(sticky.offsetTop, scroller.scrollTop + 50);
|
||||
assert_equals(sticky.offsetLeft, scroller.scrollLeft + 20);
|
||||
}, 'offsetTop/offsetLeft should be correct for sticky after script-caused layout');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky elements should respect padding on their ancestor overflow element</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
padding: 20px 0;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background-color: green;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 175;
|
||||
document.getElementById('scroller3').scrollTop = 220;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator box" style="top: 170px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator box" style="top: 195px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator box" style="top: 220px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky elements should respect padding on their ancestor overflow element</title>
|
||||
<link rel="match" href="position-sticky-overflow-padding-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that position:sticky elements respect padding on their ancestor overflow element" />
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
/* The target sticky position should be offset by this padding. */
|
||||
padding: 20px 0;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.innerpadding {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
background-color: green;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 175;
|
||||
document.getElementById('scroller3').scrollTop = 220;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator box" style="top: 170px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="sticky box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator box" style="top: 195px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="sticky box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator box" style="top: 220px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="sticky box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Position value 'sticky' should be a valid value</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#position-property" />
|
||||
<meta name="assert" content="This test checks that setting position to 'sticky'
|
||||
should be allowed." />
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<!-- We need something to create elements in. -->
|
||||
<body></body>
|
||||
|
||||
<script>
|
||||
// Sticky is valid for all elements except table-column-group and table-column.
|
||||
const VALID_STICKY_DISPLAY_TYPES = [
|
||||
'block',
|
||||
'inline',
|
||||
'run-in',
|
||||
'flow',
|
||||
'flow-root',
|
||||
'table',
|
||||
'flex',
|
||||
'grid',
|
||||
'ruby',
|
||||
'subgrid',
|
||||
'list-item',
|
||||
'table-row-group',
|
||||
'table-header-group',
|
||||
'table-footer-group',
|
||||
'table-row',
|
||||
'table-cell',
|
||||
'table-caption',
|
||||
'ruby-base',
|
||||
'ruby-text',
|
||||
'ruby-base-container',
|
||||
'ruby-text-container',
|
||||
'contents',
|
||||
'none',
|
||||
];
|
||||
|
||||
const INVALID_STICKY_DISPLAY_TYPES = [
|
||||
'table-column-group',
|
||||
'table-column',
|
||||
];
|
||||
|
||||
test(() => {
|
||||
for (displayValue of VALID_STICKY_DISPLAY_TYPES) {
|
||||
let div = document.createElement('div');
|
||||
let style = `position: sticky; display: ${displayValue};`;
|
||||
div.setAttribute('style', style);
|
||||
document.body.appendChild(div);
|
||||
|
||||
// We only check display values that the browser under test recognizes.
|
||||
if (div.style.display == displayValue) {
|
||||
assert_equals(getComputedStyle(div).position, 'sticky',
|
||||
`Expected sticky to be valid for display: ${displayValue}`);
|
||||
}
|
||||
document.body.removeChild(div);
|
||||
}
|
||||
|
||||
for (displayValue of INVALID_STICKY_DISPLAY_TYPES) {
|
||||
let div = document.createElement('div');
|
||||
let style = `position: sticky; display: ${displayValue};`;
|
||||
div.setAttribute('style', style);
|
||||
document.body.appendChild(div);
|
||||
|
||||
assert_not_equals(getComputedStyle(div).position, 'sticky',
|
||||
`Expected sticky to be invalid for display: ${displayValue}`);
|
||||
document.body.removeChild(div);
|
||||
}
|
||||
}, 'The value of sticky for the position property should be parsed correctly');
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky elements should respect the right constraint</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 100%;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background-color: green;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollLeft = 100;
|
||||
document.getElementById('scroller2').scrollLeft = 175;
|
||||
document.getElementById('scroller3').scrollLeft = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator box" style="left: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator box" style="left: 250px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator box" style="left: 300px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky elements should respect the right constraint</title>
|
||||
<link rel="match" href="position-sticky-right-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that position:sticky elements obey their right anchor after scrolling" />
|
||||
|
||||
<style>
|
||||
.group {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 100%;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.filler {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
background-color: green;
|
||||
position: sticky;
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollLeft = 100;
|
||||
document.getElementById('scroller2').scrollLeft = 175;
|
||||
document.getElementById('scroller3').scrollLeft = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator box" style="left: 200px;"></div>
|
||||
<div class="contents">
|
||||
<!-- As these elements are inline, they are whitespace sensitive. -->
|
||||
<div class="prepadding"></div><div class="container"><div class="filler"></div><div class="sticky box"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator box" style="left: 250px;"></div>
|
||||
<div class="contents">
|
||||
<!-- As these elements are inline, they are whitespace sensitive. -->
|
||||
<div class="prepadding"></div><div class="container"><div class="filler"></div><div class="sticky box"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator box" style="left: 300px;"></div>
|
||||
<div class="contents">
|
||||
<!-- As these elements are inline, they are whitespace sensitive. -->
|
||||
<div class="prepadding"></div><div class="container"><div class="filler"></div><div class="sticky box"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position: sticky should create a stacking context</title>
|
||||
|
||||
<style>
|
||||
.indicator {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="indicator box"></div>
|
||||
|
||||
<div>You should see a single green box above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position: sticky should create a stacking context</title>
|
||||
<link rel="match" href="position-sticky-stacking-context-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="position:sticky elements should create a stacking context" />
|
||||
|
||||
<style>
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: green;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.child {
|
||||
position: relative;
|
||||
background-color: red;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="indicator box"></div>
|
||||
<div class="sticky box">
|
||||
<!-- Because sticky forms a stacking context, this child remains on bottom
|
||||
even though it has a higher z-index than the indicator box. -->
|
||||
<div class="child box"></div>
|
||||
</div>
|
||||
|
||||
<div>You should see a single green box above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky bottom constraint should behave correctly for <tfoot> elements</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: green;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 0;
|
||||
document.getElementById('scroller2').scrollTop = 75;
|
||||
document.getElementById('scroller3').scrollTop = 200;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator" style="top: 150px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator" style="top: 250px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky bottom constraint should behave correctly for <tfoot> elements</title>
|
||||
<link rel="match" href="position-sticky-table-tfoot-bottom-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that the position:sticky bottom constraint behaves correctly for <tfoot> elements" />
|
||||
|
||||
<style>
|
||||
table {
|
||||
border-collapse:collapse;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td > div, th > div {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.postpadding {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
bottom: 25px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 0;
|
||||
document.getElementById('scroller2').scrollTop = 75;
|
||||
document.getElementById('scroller3').scrollTop = 200;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
</tbody>
|
||||
<tfoot class="sticky">
|
||||
<tr><th><div></div></th></tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator" style="top: 150px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
</tbody>
|
||||
<tfoot class="sticky">
|
||||
<tr><th><div></div></th></tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator" style="top: 250px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
</tbody>
|
||||
<tfoot class="sticky">
|
||||
<tr><th><div></div></th></tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky bottom constraint should behave correctly for <th> elements</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: green;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 0;
|
||||
document.getElementById('scroller2').scrollTop = 75;
|
||||
document.getElementById('scroller3').scrollTop = 200;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator" style="top: 150px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator" style="top: 250px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky bottom constraint should behave correctly for <th> elements</title>
|
||||
<link rel="match" href="position-sticky-table-th-bottom-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that the position:sticky bottom constraint behaves correctly for <th> elements" />
|
||||
|
||||
<style>
|
||||
table {
|
||||
border-collapse:collapse;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td > div, th > div {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.postpadding {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
bottom: 25px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 0;
|
||||
document.getElementById('scroller2').scrollTop = 75;
|
||||
document.getElementById('scroller3').scrollTop = 200;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th class="sticky"><div></div></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator" style="top: 150px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th class="sticky"><div></div></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator" style="top: 250px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th class="sticky"><div></div></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky left constraint should behave correctly for <th> elements</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 10px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: green;
|
||||
top: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollLeft = 50;
|
||||
document.getElementById('scroller2').scrollLeft = 125;
|
||||
document.getElementById('scroller3').scrollLeft = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="left: 100px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator" style="left: 150px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator" style="left: 250px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky left constraint should behave correctly for <th> elements</title>
|
||||
<link rel="match" href="position-sticky-table-th-left-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that the position:sticky left constraint behaves correctly for <th> elements" />
|
||||
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td > div, th > div {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.group {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.postpadding {
|
||||
height: 10px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
top: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
left: 25px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollLeft = 50;
|
||||
document.getElementById('scroller2').scrollLeft = 125;
|
||||
document.getElementById('scroller3').scrollLeft = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="left: 100px;"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="sticky"><div></div></th>
|
||||
<td><div></div></td>
|
||||
<td><div></div></td>
|
||||
<td><div></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator" style="left: 150px;"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="sticky"><div></div></th>
|
||||
<td><div></div></td>
|
||||
<td><div></div></td>
|
||||
<td><div></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator" style="left: 250px;"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="sticky"><div></div></th>
|
||||
<td><div></div></td>
|
||||
<td><div></div></td>
|
||||
<td><div></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky right constraint should behave correctly for <th> elements</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 10px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: green;
|
||||
top: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollLeft = 0;
|
||||
document.getElementById('scroller2').scrollLeft = 75;
|
||||
document.getElementById('scroller3').scrollLeft = 200;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="left: 150px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator" style="left: 200px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator" style="left: 300px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky right constraint should behave correctly for <th> elements</title>
|
||||
<link rel="match" href="position-sticky-table-th-right-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that the position:sticky right constraint behaves correctly for <th> elements" />
|
||||
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-left: 150px;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td > div, th > div {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.group {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.postpadding {
|
||||
height: 10px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
top: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
right: 25px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollLeft = 0;
|
||||
document.getElementById('scroller2').scrollLeft = 75;
|
||||
document.getElementById('scroller3').scrollLeft = 200;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="left: 150px;"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div></div></td>
|
||||
<td><div></div></td>
|
||||
<td><div></div></td>
|
||||
<th class="sticky"><div></div></th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator" style="left: 200px;"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div></div></td>
|
||||
<td><div></div></td>
|
||||
<td><div></div></td>
|
||||
<th class="sticky"><div></div></th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator" style="left: 300px;"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div></div></td>
|
||||
<td><div></div></td>
|
||||
<td><div></div></td>
|
||||
<th class="sticky"><div></div></th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky top constraint should behave correctly for <th> elements</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: green;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator" style="top: 150px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator" style="top: 250px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky top constraint should behave correctly for <th> elements</title>
|
||||
<link rel="match" href="position-sticky-table-th-top-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that the position:sticky top constraint behaves correctly for <th> elements" />
|
||||
|
||||
<style>
|
||||
table {
|
||||
border-collapse:collapse;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td > div, th > div {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.postpadding {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 25px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sticky"><div></div></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator" style="top: 150px;"></div>
|
||||
<div class="prepadding" style="background: pink;"></div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sticky"><div></div></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator" style="top: 250px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sticky"><div></div></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky top constraint should behave correctly for <thead> elements</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: green;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator" style="top: 150px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator" style="top: 250px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky top constraint should behave correctly for <thead> elements</title>
|
||||
<link rel="match" href="position-sticky-table-thead-top-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that the position:sticky top constraint behaves correctly for <thead> elements" />
|
||||
|
||||
<style>
|
||||
table {
|
||||
border-collapse:collapse;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td > div, th > div {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.postpadding {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 25px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<thead class="sticky">
|
||||
<tr><th><div></div></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator" style="top: 150px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<thead class="sticky">
|
||||
<tr><th><div></div></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator" style="top: 250px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<thead class="sticky">
|
||||
<tr><th><div></div></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky bottom constraint should behave correctly for <tr> elements</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: green;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 0;
|
||||
document.getElementById('scroller2').scrollTop = 75;
|
||||
document.getElementById('scroller3').scrollTop = 200;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator" style="top: 150px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator" style="top: 250px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky bottom constraint should behave correctly for <tr> elements</title>
|
||||
<link rel="match" href="position-sticky-table-tr-bottom-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that the position:sticky bottom constraint behaves correctly for <tr> elements" />
|
||||
|
||||
<style>
|
||||
table {
|
||||
border-collapse:collapse;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td > div {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.postpadding {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
bottom: 25px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 0;
|
||||
document.getElementById('scroller2').scrollTop = 75;
|
||||
document.getElementById('scroller3').scrollTop = 200;
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- .sticky element pushed as far up as possible to table edge -->
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr class="sticky"><td><div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- .sticky element stuck to bottom of .scroller -->
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator" style="top: 150px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr class="sticky"><td><div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- .sticky element unstuck -->
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator" style="top: 250px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr class="sticky"><td><div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky top constraint should behave correctly for <tr> elements</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: green;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator" style="top: 150px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator" style="top: 250px;"></div>
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky top constraint should behave correctly for <tr> elements</title>
|
||||
<link rel="match" href="position-sticky-table-tr-top-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that the position:sticky top constraint behaves correctly for <tr> elements" />
|
||||
|
||||
<style>
|
||||
table {
|
||||
border-collapse:collapse;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td > div {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.postpadding {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 25px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- .sticky element not yet stuck -->
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr class="sticky"><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- .sticky element stuck to top of .scroller -->
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator" style="top: 150px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr class="sticky"><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- .sticky element pushed as down as possible to table edge -->
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator" style="top: 250px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr class="sticky"><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
<tr><td><div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky elements should respect the top constraint</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background-color: green;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 200;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator box" style="top: 150px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator box" style="top: 175px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator box" style="top: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky elements should respect the top constraint</title>
|
||||
<link rel="match" href="position-sticky-top-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that position:sticky elements obey their top anchor after scrolling" />
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.innerpadding {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
background-color: green;
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 200;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator box" style="top: 150px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="sticky box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="indicator box" style="top: 175px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="sticky box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="indicator box" style="top: 200px;"></div>
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
<div class="container">
|
||||
<div class="innerpadding"></div>
|
||||
<div class="sticky box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky constraints are independent of writing mode</title>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 130px;
|
||||
height: 200px;
|
||||
overflow: scroll;
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 500px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
display: inline;
|
||||
color: green;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller1').scrollLeft = 20;
|
||||
document.getElementById('scroller2').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollLeft = 60;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller" style="writing-mode: vertical-lr;">
|
||||
<div class="contents">
|
||||
<div class="indicator" style="left: 40px; top: 100px;">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller" style="writing-mode: vertical-rl;">
|
||||
<div class="contents">
|
||||
<div class="indicator" style="right: 45px; top: 100px;">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see two green blocks above. No red should be visible.</div>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky constraints are independent of writing mode</title>
|
||||
<link rel="match" href="position-sticky-writing-modes-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that position:sticky constraints are independent of the writing mode" />
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 130px;
|
||||
height: 200px;
|
||||
overflow: scroll;
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 500px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
display: inline;
|
||||
color: green;
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller1').scrollLeft = 20;
|
||||
document.getElementById('scroller2').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollLeft = 60;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller" style="writing-mode: vertical-lr;">
|
||||
<div class="indicator" style="left: 40px; top: 100px;">XXX</div>
|
||||
<div class="contents">
|
||||
<div class="sticky" style="left: 20px;">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller" style="writing-mode: vertical-rl;">
|
||||
<div class="contents">
|
||||
<div class="indicator" style="left: 45px; top: 100px;">XXX</div>
|
||||
<div class="sticky" style="right: 20px;">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see two green blocks above. No red should be visible.</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue