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

Auto merge of #27385 - servo:list, r=Manishearth

Browse source 
Add Layout 2020 support for `display: list-item`
This commit is contained in:
bors-servo 2020-07-24 21:18:16 -04:00 • committed by GitHub
commit 9864e4ce6c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 225 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/layout_2020/dom_traversal.rs
View file

@ -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

98
components/layout_2020/flow/construct.rs
View file

@ -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

4
components/layout_2020/formatting_contexts.rs
View file

@ -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,
),
)
},

1
components/layout_2020/lib.rs
View file

@ -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
View 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("‣ "),
}
}

21
components/layout_2020/style_ext.rs
View file

@ -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 })
}
}

14
components/style/properties/longhands/list.mako.rs
View file

@ -25,12 +25,14 @@ ${helpers.single_keyword(
% if engine in ["servo-2013", "servo-2020"]:
${helpers.single_keyword(
"list-style-type",
"""disc none circle square decimal disclosure-open disclosure-closed lower-alpha upper-alpha
arabic-indic bengali cambodian cjk-decimal devanagari gujarati gurmukhi kannada khmer lao
malayalam mongolian myanmar oriya persian telugu thai tibetan cjk-earthly-branch
cjk-heavenly-stem lower-greek hiragana hiragana-iroha katakana katakana-iroha""",
"disc none circle square disclosure-open disclosure-closed",
extra_servo_2013_values="""
decimal lower-alpha upper-alpha arabic-indic bengali cambodian cjk-decimal devanagari
gujarati gurmukhi kannada khmer lao malayalam mongolian myanmar oriya persian telugu
thai tibetan cjk-earthly-branch cjk-heavenly-stem lower-greek hiragana hiragana-iroha
katakana katakana-iroha
""",
engines="servo-2013 servo-2020",
servo_2020_pref="layout.2020.unimplemented",
animation_value_type="discrete",
spec="https://drafts.csswg.org/css-lists/#propdef-list-style-type",
servo_restyle_damage="rebuild_and_reflow",
@ -53,7 +55,7 @@ ${helpers.single_keyword(
${helpers.predefined_type(
"list-style-image",
"url::ImageUrlOrNone",
engines="gecko servo-2013",
engines="gecko servo-2013 servo-2020",
initial_value="computed::url::ImageUrlOrNone::none()",
initial_specified_value="specified::url::ImageUrlOrNone::none()",
animation_value_type="discrete",

2
components/style/properties/shorthands/list.mako.rs
View file

@ -5,7 +5,7 @@
<%namespace name="helpers" file="/helpers.mako.rs" />
<%helpers:shorthand name="list-style"
engines="gecko servo-2013"
engines="gecko servo-2013 servo-2020"
sub_properties="list-style-position list-style-image list-style-type"
derive_serialize="True"
spec="https://drafts.csswg.org/css-lists/#propdef-list-style">

12
components/style/values/generics/counters.rs
View file

@ -4,7 +4,7 @@
//! Generic types for counters-related CSS values.
#[cfg(feature = "servo")]
#[cfg(feature = "servo-layout-2013")]
use crate::computed_values::list_style_type::T as ListStyleType;
#[cfg(feature = "gecko")]
use crate::values::generics::CounterStyle;
@ -123,13 +123,13 @@ pub struct GenericCounters<I>(
);
pub use self::GenericCounters as Counters;
#[cfg(feature = "servo")]
#[cfg(feature = "servo-layout-2013")]
type CounterStyleType = ListStyleType;
#[cfg(feature = "gecko")]
type CounterStyleType = CounterStyle;
#[cfg(feature = "servo")]
#[cfg(feature = "servo-layout-2013")]
#[inline]
fn is_decimal(counter_type: &CounterStyleType) -> bool {
*counter_type == ListStyleType::Decimal
@ -191,9 +191,11 @@ pub enum GenericContentItem<ImageUrl> {
/// Literal string content.
String(crate::OwnedStr),
/// `counter(name, style)`.
#[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
#[css(comma, function)]
Counter(CustomIdent, #[css(skip_if = "is_decimal")] CounterStyleType),
/// `counters(name, separator, style)`.
#[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
#[css(comma, function)]
Counters(
CustomIdent,
@ -201,12 +203,16 @@ pub enum GenericContentItem<ImageUrl> {
#[css(skip_if = "is_decimal")] CounterStyleType,
),
/// `open-quote`.
#[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
OpenQuote,
/// `close-quote`.
#[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
CloseQuote,
/// `no-open-quote`.
#[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
NoOpenQuote,
/// `no-close-quote`.
#[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
NoCloseQuote,
/// `-moz-alt-content`.
#[cfg(feature = "gecko")]

4
components/style/values/specified/box.rs
View file

@ -520,9 +520,7 @@ fn is_valid_inside_for_list_item<'i>(inside: &Result<DisplayInside, ParseError<'
/// Parse `list-item`.
fn parse_list_item<'i, 't>(input: &mut Parser<'i, 't>) -> Result<(), ParseError<'i>> {
Ok(try_match_ident_ignore_ascii_case! { input,
"list-item" => (),
})
Ok(input.expect_ident_matching("list-item")?)
}
impl Parse for Display {

8
components/style/values/specified/counters.rs
View file

@ -4,7 +4,7 @@
//! Specified types for counter properties.
#[cfg(feature = "servo")]
#[cfg(feature = "servo-layout-2013")]
use crate::computed_values::list_style_type::T as ListStyleType;
use crate::parser::{Parse, ParserContext};
use crate::values::generics::counters as generics;
@ -17,6 +17,7 @@ use crate::values::specified::Attr;
use crate::values::specified::Integer;
use crate::values::CustomIdent;
use cssparser::{Parser, Token};
#[cfg(feature = "servo-layout-2013")]
use selectors::parser::SelectorParseErrorKind;
use style_traits::{ParseError, StyleParseErrorKind};
@ -88,7 +89,7 @@ pub type Content = generics::GenericContent<SpecifiedImageUrl>;
pub type ContentItem = generics::GenericContentItem<SpecifiedImageUrl>;
impl Content {
#[cfg(feature = "servo")]
#[cfg(feature = "servo-layout-2013")]
fn parse_counter_style(_: &ParserContext, input: &mut Parser) -> ListStyleType {
input
.try_parse(|input| {
@ -149,12 +150,14 @@ impl Parse for Content {
},
Ok(&Token::Function(ref name)) => {
let result = match_ignore_ascii_case! { &name,
#[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
"counter" => input.parse_nested_block(|input| {
let location = input.current_source_location();
let name = CustomIdent::from_ident(location, input.expect_ident()?, &[])?;
let style = Content::parse_counter_style(context, input);
Ok(generics::ContentItem::Counter(name, style))
}),
#[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
"counters" => input.parse_nested_block(|input| {
let location = input.current_source_location();
let name = CustomIdent::from_ident(location, input.expect_ident()?, &[])?;
@ -176,6 +179,7 @@ impl Parse for Content {
}?;
content.push(result);
},
#[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
Ok(&Token::Ident(ref ident)) => {
content.push(match_ignore_ascii_case! { &ident,
"open-quote" => generics::ContentItem::OpenQuote,

2
tests/wpt/metadata-layout-2020/css/CSS2/generated-content/content-counter-001.xht.ini
View file

@ -1,2 +0,0 @@
[content-counter-001.xht]
expected: FAIL

2
tests/wpt/metadata-layout-2020/css/CSS2/generated-content/multiple-content-values-001.xht.ini Normal file
View file

@ -0,0 +1,2 @@
[multiple-content-values-001.xht]
expected: FAIL

30
tests/wpt/metadata-layout-2020/css/CSS2/linebox/inline-negative-margin-001.html.ini
View file

@ -8,3 +8,33 @@
[[data-expected-height\] 4]
expected: FAIL
[[data-expected-height\] 1]
expected: FAIL
[[data-expected-height\] 10]
expected: FAIL
[[data-expected-height\] 2]
expected: FAIL
[[data-expected-height\] 5]
expected: FAIL
[[data-expected-height\] 6]
expected: FAIL
[[data-expected-height\] 9]
expected: FAIL
[[data-expected-height\] 8]
expected: FAIL
[[data-expected-height\] 13]
expected: FAIL
[[data-expected-height\] 12]
expected: FAIL
[[data-expected-height\] 11]
expected: FAIL

2
tests/wpt/metadata-layout-2020/css/CSS2/lists/list-style-019.xht.ini Normal file
View file

@ -0,0 +1,2 @@
[list-style-019.xht]
expected: FAIL

2
tests/wpt/metadata-layout-2020/css/CSS2/margin-padding-clear/padding-left-applies-to-010.xht.ini Normal file
View file

@ -0,0 +1,2 @@
[padding-left-applies-to-010.xht]
expected: FAIL

2
tests/wpt/metadata-layout-2020/css/CSS2/syntax/characters-0080-009F-001.xht.ini
View file

@ -1,2 +0,0 @@
[characters-0080-009F-001.xht]
expected: FAIL

6
tests/wpt/metadata-layout-2020/css/cssom/cssom-setProperty-shorthand.html.ini
View file

@ -5,15 +5,9 @@
[shorthand outline can be set with setProperty and priority !important]
expected: FAIL
[shorthand list-style can be set with setProperty and priority !important]
expected: FAIL
[shorthand border-spacing can be set with setProperty]
expected: FAIL
[shorthand border-spacing can be set with setProperty and priority !important]
expected: FAIL
[shorthand list-style can be set with setProperty]
expected: FAIL

33
tests/wpt/metadata-layout-2020/css/cssom/serialize-values.html.ini
View file

@ -1,7 +1,4 @@
[serialize-values.html]
[list-style-type: none]
expected: FAIL
[direction: ltr]
expected: FAIL
@ -38,9 +35,6 @@
[page-break-before: left]
expected: FAIL
[list-style-image: none]
expected: FAIL
[list-style-type: upper-alpha]
expected: FAIL
@ -80,9 +74,6 @@
[page-break-after: auto]
expected: FAIL
[list-style-type: circle]
expected: FAIL
[display: table-row]
expected: FAIL
@ -95,9 +86,6 @@
[unicode-bidi: embed]
expected: FAIL
[list-style-type: disc]
expected: FAIL
[vertical-align: baseline]
expected: FAIL
@ -164,9 +152,6 @@
[outline-color: inherit]
expected: FAIL
[list-style-image: inherit]
expected: FAIL
[page-break-before: avoid]
expected: FAIL
@ -185,9 +170,6 @@
[unicode-bidi: bidi-override]
expected: FAIL
[list-style-type: inherit]
expected: FAIL
[text-align: justify]
expected: FAIL
@ -230,9 +212,6 @@
[border-spacing: 0px]
expected: FAIL
[list-style-image: url("http://localhost/")]
expected: FAIL
[text-indent: .5%]
expected: FAIL
@ -284,15 +263,9 @@
[clear: both]
expected: FAIL
[list-style-type: square]
expected: FAIL
[white-space: pre-wrap]
expected: FAIL
[list-style-image: url(http://localhost/)]
expected: FAIL
[outline-width: 0px]
expected: FAIL
@ -440,3 +413,9 @@
[border-collapse: collapse]
expected: FAIL
[content: counter(par-num, decimal)]
expected: FAIL
[content: counter(par-num)]
expected: FAIL

12
tests/wpt/mozilla/meta-layout-2020/css/get-computed-style-for-url.html.ini
View file

@ -2,18 +2,6 @@
[getComputedStyle(elem) and elem.style for url() borderImage correctly return "none"]
expected: FAIL
[getComputedStyle(elem) for url() listStyle uses the resolved URL and elem.style uses the original URL]
expected: FAIL
[getComputedStyle(elem) and elem.style for url() listStyleImage correctly return "none"]
expected: FAIL
[getComputedStyle(elem) and elem.style for url() listStyle correctly return "none"]
expected: FAIL
[getComputedStyle(elem) for url() borderImage uses the resolved URL and elem.style uses the original URL]
expected: FAIL
[getComputedStyle(elem) for url() listStyleImage uses the resolved URL and elem.style uses the original URL]
expected: FAIL

2
tests/wpt/mozilla/meta-layout-2020/css/list_style_image_sizing_a.html.ini Normal file
View file

@ -0,0 +1,2 @@
[list_style_image_sizing_a.html]
expected: FAIL

2
tests/wpt/mozilla/meta-layout-2020/css/list_style_position_a.html.ini
View file

@ -1,2 +0,0 @@
[list_style_position_a.html]
expected: FAIL

2
tests/wpt/mozilla/meta-layout-2020/css/list_style_type_a.html.ini
View file

@ -1,2 +0,0 @@
[list_style_type_a.html]
expected: FAIL