mirror of
https://github.com/servo/servo.git
synced 2025-06-06 16:45:39 +00:00
Add layout support for list markers
This commit is contained in:
Simon Sapin
parent
4a4199c1d6
commit
b91e293819
18 changed files with 151 additions and 64 deletions
|
|
@ -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;
|
||||
|
|
@ -192,7 +193,21 @@ impl BlockContainer {
|
|||
};
|
||||
|
||||
if is_list_item {
|
||||
// FIXME: generate a box for the list marker
|
||||
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);
|
||||
|
|
@ -399,6 +414,29 @@ 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>,
|
||||
|
|
@ -420,7 +458,12 @@ where
|
|||
});
|
||||
|
||||
if is_list_item {
|
||||
// FIXME: generate a box for the list marker
|
||||
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`.
|
||||
|
|
|
|||
|
|
@ -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("‣ "),
|
||||
}
|
||||
}
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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,7 +123,7 @@ pub struct GenericCounters<I>(
|
|||
);
|
||||
pub use self::GenericCounters as Counters;
|
||||
|
||||
#[cfg(feature = "servo")]
|
||||
#[cfg(feature = "servo-layout-2013")]
|
||||
type CounterStyleType = ListStyleType;
|
||||
|
||||
#[cfg(feature = "gecko")]
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[content-counter-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[multiple-content-values-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
[list-style-019.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[padding-left-applies-to-010.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[characters-0080-009F-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
[list_style_image_sizing_a.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[list_style_position_a.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[list_style_type_a.html]
|
||||
expected: FAIL
|
||||
Loading…
Add table
Add a link
Reference in a new issue