mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Auto merge of #27385 - servo:list, r=Manishearth
Add Layout 2020 support for `display: list-item`
This commit is contained in:
commit
9864e4ce6c
23 changed files with 225 additions and 92 deletions
|
@ -93,7 +93,6 @@ pub(super) enum NonReplacedContents {
|
|||
|
||||
pub(super) enum PseudoElementContentItem {
|
||||
Text(String),
|
||||
#[allow(dead_code)]
|
||||
Replaced(ReplacedContent),
|
||||
}
|
||||
|
||||
|
@ -219,7 +218,9 @@ fn traverse_pseudo_element_contents<'dom, Node>(
|
|||
});
|
||||
let display_inline = DisplayGeneratingBox::OutsideInside {
|
||||
outside: DisplayOutside::Inline,
|
||||
inside: DisplayInside::Flow,
|
||||
inside: DisplayInside::Flow {
|
||||
is_list_item: false,
|
||||
},
|
||||
};
|
||||
// `display` is not inherited, so we get the initial value
|
||||
debug_assert!(
|
||||
|
@ -345,7 +346,6 @@ where
|
|||
vec.push(PseudoElementContentItem::Replaced(replaced_content));
|
||||
}
|
||||
},
|
||||
_ => (),
|
||||
}
|
||||
}
|
||||
vec
|
||||
|
|
|
@ -20,6 +20,7 @@ use rayon_croissant::ParallelIteratorExt;
|
|||
use servo_arc::Arc;
|
||||
use std::borrow::Cow;
|
||||
use std::convert::{TryFrom, TryInto};
|
||||
use style::properties::longhands::list_style_position::computed_value::T as ListStylePosition;
|
||||
use style::properties::ComputedValues;
|
||||
use style::selector_parser::PseudoElement;
|
||||
use style::values::specified::text::TextDecorationLine;
|
||||
|
@ -30,12 +31,18 @@ impl BlockFormattingContext {
|
|||
info: &NodeAndStyleInfo<Node>,
|
||||
contents: NonReplacedContents,
|
||||
propagated_text_decoration_line: TextDecorationLine,
|
||||
is_list_item: bool,
|
||||
) -> Self
|
||||
where
|
||||
Node: NodeExt<'dom>,
|
||||
{
|
||||
let (contents, contains_floats) =
|
||||
BlockContainer::construct(context, info, contents, propagated_text_decoration_line);
|
||||
let (contents, contains_floats) = BlockContainer::construct(
|
||||
context,
|
||||
info,
|
||||
contents,
|
||||
propagated_text_decoration_line,
|
||||
is_list_item,
|
||||
);
|
||||
let bfc = Self {
|
||||
contents,
|
||||
contains_floats: contains_floats == ContainsFloats::Yes,
|
||||
|
@ -97,7 +104,11 @@ enum BlockLevelCreator {
|
|||
/// Deferring allows using rayon’s `into_par_iter`.
|
||||
enum IntermediateBlockContainer {
|
||||
InlineFormattingContext(InlineFormattingContext),
|
||||
Deferred(NonReplacedContents, TextDecorationLine),
|
||||
Deferred {
|
||||
contents: NonReplacedContents,
|
||||
propagated_text_decoration_line: TextDecorationLine,
|
||||
is_list_item: bool,
|
||||
},
|
||||
}
|
||||
|
||||
/// A builder for a block container.
|
||||
|
@ -164,6 +175,7 @@ impl BlockContainer {
|
|||
info: &NodeAndStyleInfo<Node>,
|
||||
contents: NonReplacedContents,
|
||||
propagated_text_decoration_line: TextDecorationLine,
|
||||
is_list_item: bool,
|
||||
) -> (BlockContainer, ContainsFloats)
|
||||
where
|
||||
Node: NodeExt<'dom>,
|
||||
|
@ -180,6 +192,24 @@ impl BlockContainer {
|
|||
contains_floats: ContainsFloats::No,
|
||||
};
|
||||
|
||||
if is_list_item {
|
||||
if let Some(marker_contents) = crate::lists::make_marker(context, info) {
|
||||
let _position = info.style.clone_list_style_position();
|
||||
// FIXME: implement support for `outside` and remove this:
|
||||
let position = ListStylePosition::Inside;
|
||||
match position {
|
||||
ListStylePosition::Inside => {
|
||||
builder.handle_list_item_marker_inside(info, marker_contents)
|
||||
},
|
||||
ListStylePosition::Outside => {
|
||||
// FIXME: implement layout for this case
|
||||
// https://github.com/servo/servo/issues/27383
|
||||
// and enable `list-style-position` and the `list-style` shorthand in Stylo.
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
contents.traverse(context, info, &mut builder);
|
||||
|
||||
debug_assert!(builder.ongoing_inline_boxes_stack.is_empty());
|
||||
|
@ -384,13 +414,38 @@ where
|
|||
}
|
||||
}
|
||||
|
||||
fn handle_list_item_marker_inside(
|
||||
&mut self,
|
||||
info: &NodeAndStyleInfo<Node>,
|
||||
contents: Vec<crate::dom_traversal::PseudoElementContentItem>,
|
||||
) {
|
||||
let marker_style = self
|
||||
.context
|
||||
.shared_context()
|
||||
.stylist
|
||||
.style_for_anonymous::<Node::ConcreteElement>(
|
||||
&self.context.shared_context().guards,
|
||||
&PseudoElement::ServoText, // FIMXE: use `PseudoElement::Marker` when we add it
|
||||
&info.style,
|
||||
);
|
||||
self.handle_inline_level_element(
|
||||
&info.new_replacing_style(marker_style),
|
||||
DisplayInside::Flow {
|
||||
is_list_item: false,
|
||||
},
|
||||
Contents::OfPseudoElement(contents),
|
||||
);
|
||||
}
|
||||
|
||||
fn handle_inline_level_element(
|
||||
&mut self,
|
||||
info: &NodeAndStyleInfo<Node>,
|
||||
display_inside: DisplayInside,
|
||||
contents: Contents,
|
||||
) -> ArcRefCell<InlineLevelBox> {
|
||||
let box_ = if display_inside == DisplayInside::Flow && !contents.is_replaced() {
|
||||
let box_ = if let (DisplayInside::Flow { is_list_item }, false) =
|
||||
(display_inside, contents.is_replaced())
|
||||
{
|
||||
// We found un inline box.
|
||||
// Whatever happened before, all we need to do before recurring
|
||||
// is to remember this ongoing inline level box.
|
||||
|
@ -402,6 +457,15 @@ where
|
|||
children: vec![],
|
||||
});
|
||||
|
||||
if is_list_item {
|
||||
if let Some(marker_contents) = crate::lists::make_marker(self.context, info) {
|
||||
// Ignore `list-style-position` here:
|
||||
// “If the list item is an inline box: this value is equivalent to `inside`.”
|
||||
// https://drafts.csswg.org/css-lists/#list-style-position-outside
|
||||
self.handle_list_item_marker_inside(info, marker_contents)
|
||||
}
|
||||
}
|
||||
|
||||
// `unwrap` doesn’t panic here because `is_replaced` returned `false`.
|
||||
NonReplacedContents::try_from(contents)
|
||||
.unwrap()
|
||||
|
@ -485,9 +549,15 @@ where
|
|||
|
||||
let kind = match contents.try_into() {
|
||||
Ok(contents) => match display_inside {
|
||||
DisplayInside::Flow => BlockLevelCreator::SameFormattingContextBlock(
|
||||
IntermediateBlockContainer::Deferred(contents, propagated_text_decoration_line),
|
||||
),
|
||||
DisplayInside::Flow { is_list_item } => {
|
||||
BlockLevelCreator::SameFormattingContextBlock(
|
||||
IntermediateBlockContainer::Deferred {
|
||||
contents,
|
||||
propagated_text_decoration_line,
|
||||
is_list_item,
|
||||
},
|
||||
)
|
||||
},
|
||||
_ => BlockLevelCreator::Independent {
|
||||
display_inside,
|
||||
contents: contents.into(),
|
||||
|
@ -695,9 +765,17 @@ impl IntermediateBlockContainer {
|
|||
Node: NodeExt<'dom>,
|
||||
{
|
||||
match self {
|
||||
IntermediateBlockContainer::Deferred(contents, propagated_text_decoration_line) => {
|
||||
BlockContainer::construct(context, info, contents, propagated_text_decoration_line)
|
||||
},
|
||||
IntermediateBlockContainer::Deferred {
|
||||
contents,
|
||||
propagated_text_decoration_line,
|
||||
is_list_item,
|
||||
} => BlockContainer::construct(
|
||||
context,
|
||||
info,
|
||||
contents,
|
||||
propagated_text_decoration_line,
|
||||
is_list_item,
|
||||
),
|
||||
IntermediateBlockContainer::InlineFormattingContext(ifc) => {
|
||||
// If that inline formatting context contained any float, those
|
||||
// were already taken into account during the first phase of
|
||||
|
|
|
@ -71,13 +71,15 @@ impl IndependentFormattingContext {
|
|||
match contents.try_into() {
|
||||
Ok(non_replaced) => {
|
||||
let contents = match display_inside {
|
||||
DisplayInside::Flow | DisplayInside::FlowRoot => {
|
||||
DisplayInside::Flow { is_list_item } |
|
||||
DisplayInside::FlowRoot { is_list_item } => {
|
||||
NonReplacedFormattingContextContents::Flow(
|
||||
BlockFormattingContext::construct(
|
||||
context,
|
||||
info,
|
||||
non_replaced,
|
||||
propagated_text_decoration_line,
|
||||
is_list_item,
|
||||
),
|
||||
)
|
||||
},
|
||||
|
|
|
@ -22,6 +22,7 @@ mod fragments;
|
|||
pub mod geom;
|
||||
#[macro_use]
|
||||
pub mod layout_debug;
|
||||
mod lists;
|
||||
mod opaque_node;
|
||||
mod positioned;
|
||||
pub mod query;
|
||||
|
|
50
components/layout_2020/lists.rs
Normal file
50
components/layout_2020/lists.rs
Normal file
|
@ -0,0 +1,50 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
|
||||
|
||||
use crate::context::LayoutContext;
|
||||
use crate::dom_traversal::{NodeAndStyleInfo, NodeExt, PseudoElementContentItem};
|
||||
use crate::replaced::ReplacedContent;
|
||||
use style::properties::longhands::list_style_type::computed_value::T as ListStyleType;
|
||||
use style::properties::style_structs;
|
||||
use style::values::computed::url::UrlOrNone;
|
||||
|
||||
/// https://drafts.csswg.org/css-lists/#content-property
|
||||
pub(crate) fn make_marker<'dom, Node>(
|
||||
context: &LayoutContext,
|
||||
info: &NodeAndStyleInfo<Node>,
|
||||
) -> Option<Vec<PseudoElementContentItem>>
|
||||
where
|
||||
Node: NodeExt<'dom>,
|
||||
{
|
||||
let style = info.style.get_list();
|
||||
|
||||
// https://drafts.csswg.org/css-lists/#marker-image
|
||||
let marker_image = || match &style.list_style_image {
|
||||
UrlOrNone::Url(url) => Some(vec![
|
||||
PseudoElementContentItem::Replaced(ReplacedContent::from_image_url(
|
||||
info.node, context, url,
|
||||
)?),
|
||||
PseudoElementContentItem::Text(" ".into()),
|
||||
]),
|
||||
UrlOrNone::None => None,
|
||||
};
|
||||
marker_image().or_else(|| {
|
||||
Some(vec![PseudoElementContentItem::Text(
|
||||
marker_string(style)?.into(),
|
||||
)])
|
||||
})
|
||||
}
|
||||
|
||||
/// https://drafts.csswg.org/css-lists/#marker-string
|
||||
fn marker_string(style: &style_structs::List) -> Option<&'static str> {
|
||||
// FIXME: add support for counters and other style types
|
||||
match style.list_style_type {
|
||||
ListStyleType::None => None,
|
||||
ListStyleType::Disc => Some("• "),
|
||||
ListStyleType::Circle => Some("◦ "),
|
||||
ListStyleType::Square => Some("▪ "),
|
||||
ListStyleType::DisclosureOpen => Some("▾ "),
|
||||
ListStyleType::DisclosureClosed => Some("‣ "),
|
||||
}
|
||||
}
|
|
@ -33,7 +33,6 @@ pub(crate) enum DisplayGeneratingBox {
|
|||
OutsideInside {
|
||||
outside: DisplayOutside,
|
||||
inside: DisplayInside,
|
||||
// list_item: bool,
|
||||
},
|
||||
// Layout-internal display types go here:
|
||||
// https://drafts.csswg.org/css-display-3/#layout-specific-display
|
||||
|
@ -47,8 +46,10 @@ pub(crate) enum DisplayOutside {
|
|||
|
||||
#[derive(Clone, Copy, Eq, PartialEq)]
|
||||
pub(crate) enum DisplayInside {
|
||||
Flow,
|
||||
FlowRoot,
|
||||
// “list-items are limited to the Flow Layout display types”
|
||||
// https://drafts.csswg.org/css-display/#list-items
|
||||
Flow { is_list_item: bool },
|
||||
FlowRoot { is_list_item: bool },
|
||||
Flex,
|
||||
}
|
||||
|
||||
|
@ -444,8 +445,12 @@ impl ComputedValuesExt for ComputedValues {
|
|||
impl From<stylo::Display> for Display {
|
||||
fn from(packed: stylo::Display) -> Self {
|
||||
let inside = match packed.inside() {
|
||||
stylo::DisplayInside::Flow => DisplayInside::Flow,
|
||||
stylo::DisplayInside::FlowRoot => DisplayInside::FlowRoot,
|
||||
stylo::DisplayInside::Flow => DisplayInside::Flow {
|
||||
is_list_item: packed.is_list_item(),
|
||||
},
|
||||
stylo::DisplayInside::FlowRoot => DisplayInside::FlowRoot {
|
||||
is_list_item: packed.is_list_item(),
|
||||
},
|
||||
stylo::DisplayInside::Flex => DisplayInside::Flex,
|
||||
|
||||
// These should not be values of DisplayInside, but oh well
|
||||
|
@ -459,11 +464,7 @@ impl From<stylo::Display> for Display {
|
|||
// This should not be a value of DisplayInside, but oh well
|
||||
stylo::DisplayOutside::None => return Display::None,
|
||||
};
|
||||
Display::GeneratingBox(DisplayGeneratingBox::OutsideInside {
|
||||
outside,
|
||||
inside,
|
||||
// list_item: packed.is_list_item(),
|
||||
})
|
||||
Display::GeneratingBox(DisplayGeneratingBox::OutsideInside { outside, inside })
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue