mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Make input element display-inside always flow-root (#35908)
Signed-off-by: Kenzie Raditya Tirtarahardja <kenzieradityatirtarahardja.18@gmail.com> Co-authored-by: Kenzie Raditya Tirtarahardja <kenzieradityatirtarahardja.18@gmail.com>
This commit is contained in:
parent
8dda64f14b
commit
40270cb626
8 changed files with 136 additions and 16 deletions
|
@ -116,6 +116,15 @@ where
|
|||
},
|
||||
_ => {},
|
||||
}
|
||||
|
||||
if matches!(
|
||||
element.type_id(),
|
||||
Some(LayoutNodeType::Element(
|
||||
LayoutElementType::HTMLInputElement | LayoutElementType::HTMLTextAreaElement
|
||||
))
|
||||
) {
|
||||
flags.insert(FragmentFlags::IS_TEXT_CONTROL);
|
||||
}
|
||||
};
|
||||
|
||||
Self {
|
||||
|
@ -135,12 +144,15 @@ pub(super) enum Contents {
|
|||
}
|
||||
|
||||
#[derive(Debug)]
|
||||
#[allow(clippy::enum_variant_names)]
|
||||
pub(super) enum NonReplacedContents {
|
||||
/// Refers to a DOM subtree, plus `::before` and `::after` pseudo-elements.
|
||||
OfElement,
|
||||
/// Content of a `::before` or `::after` pseudo-element that is being generated.
|
||||
/// <https://drafts.csswg.org/css2/generate.html#content>
|
||||
OfPseudoElement(Vec<PseudoElementContentItem>),
|
||||
/// Workaround for input and textarea element until we properly implement `display-inside`.
|
||||
OfTextControl,
|
||||
}
|
||||
|
||||
#[derive(Debug)]
|
||||
|
@ -236,8 +248,18 @@ fn traverse_element<'dom, Node>(
|
|||
}
|
||||
},
|
||||
Display::GeneratingBox(display) => {
|
||||
let contents =
|
||||
replaced.map_or(NonReplacedContents::OfElement.into(), Contents::Replaced);
|
||||
let contents = if let Some(replaced) = replaced {
|
||||
Contents::Replaced(replaced)
|
||||
} else if matches!(
|
||||
element.type_id(),
|
||||
LayoutNodeType::Element(
|
||||
LayoutElementType::HTMLInputElement | LayoutElementType::HTMLTextAreaElement
|
||||
)
|
||||
) {
|
||||
NonReplacedContents::OfTextControl.into()
|
||||
} else {
|
||||
NonReplacedContents::OfElement.into()
|
||||
};
|
||||
let display = display.used_value_for_contents(&contents);
|
||||
let box_slot = element.element_box_slot();
|
||||
let info = NodeAndStyleInfo::new(element, style);
|
||||
|
@ -366,7 +388,9 @@ impl NonReplacedContents {
|
|||
},
|
||||
};
|
||||
match self {
|
||||
NonReplacedContents::OfElement => traverse_children_of(node, context, handler),
|
||||
NonReplacedContents::OfElement | NonReplacedContents::OfTextControl => {
|
||||
traverse_children_of(node, context, handler)
|
||||
},
|
||||
NonReplacedContents::OfPseudoElement(items) => {
|
||||
traverse_pseudo_element_contents(info, context, handler, items)
|
||||
},
|
||||
|
|
|
@ -75,31 +75,33 @@ impl From<BaseFragmentInfo> for BaseFragment {
|
|||
bitflags! {
|
||||
/// Flags used to track various information about a DOM node during layout.
|
||||
#[derive(Clone, Copy, Debug)]
|
||||
pub(crate) struct FragmentFlags: u8 {
|
||||
pub(crate) struct FragmentFlags: u16 {
|
||||
/// Whether or not the node that created this fragment is a `<body>` element on an HTML document.
|
||||
const IS_BODY_ELEMENT_OF_HTML_ELEMENT_ROOT = 1 << 0;
|
||||
/// Whether or not the node that created this Fragment is a `<br>` element.
|
||||
const IS_BR_ELEMENT = 1 << 1;
|
||||
/// Whether or not the node that created this Fragment is a `<input>` or `<textarea>` element.
|
||||
const IS_TEXT_CONTROL = 1 << 2;
|
||||
/// Whether or not this Fragment is a flex item or a grid item.
|
||||
const IS_FLEX_OR_GRID_ITEM = 1 << 2;
|
||||
const IS_FLEX_OR_GRID_ITEM = 1 << 3;
|
||||
/// Whether or not this Fragment was created to contain a replaced element or is
|
||||
/// a replaced element.
|
||||
const IS_REPLACED = 1 << 3;
|
||||
const IS_REPLACED = 1 << 4;
|
||||
/// Whether or not the node that created was a `<table>`, `<th>` or
|
||||
/// `<td>` element. Note that this does *not* include elements with
|
||||
/// `display: table` or `display: table-cell`.
|
||||
const IS_TABLE_TH_OR_TD_ELEMENT = 1 << 4;
|
||||
const IS_TABLE_TH_OR_TD_ELEMENT = 1 << 5;
|
||||
/// Whether or not this Fragment was created to contain a list item marker
|
||||
/// with a used value of `list-style-position: outside`.
|
||||
const IS_OUTSIDE_LIST_ITEM_MARKER = 1 << 5;
|
||||
const IS_OUTSIDE_LIST_ITEM_MARKER = 1 << 6;
|
||||
/// Avoid painting the borders, backgrounds, and drop shadow for this fragment, this is used
|
||||
/// for empty table cells when 'empty-cells' is 'hide' and also table wrappers. This flag
|
||||
/// doesn't avoid hit-testing nor does it prevent the painting outlines.
|
||||
const DO_NOT_PAINT = 1 << 6;
|
||||
const DO_NOT_PAINT = 1 << 7;
|
||||
/// Whether or not the size of this fragment depends on the block size of its container
|
||||
/// and the fragment can be a flex item. This flag is used to cache items during flex
|
||||
/// layout.
|
||||
const SIZE_DEPENDS_ON_BLOCK_CONSTRAINTS_AND_CAN_BE_CHILD_OF_FLEX_ITEM = 1 << 7;
|
||||
const SIZE_DEPENDS_ON_BLOCK_CONSTRAINTS_AND_CAN_BE_CHILD_OF_FLEX_ITEM = 1 << 8;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -15,7 +15,6 @@ use style::properties::ComputedValues;
|
|||
|
||||
use super::{BaseFragment, BaseFragmentInfo, CollapsedBlockMargins, Fragment};
|
||||
use crate::formatting_contexts::Baselines;
|
||||
use crate::fragment_tree::FragmentFlags;
|
||||
use crate::geom::{
|
||||
AuOrAuto, LengthPercentageOrAuto, PhysicalPoint, PhysicalRect, PhysicalSides, ToLogical,
|
||||
};
|
||||
|
@ -346,8 +345,7 @@ impl BoxFragment {
|
|||
/// Whether this is a non-replaced inline-level box whose inner display type is `flow`.
|
||||
/// <https://drafts.csswg.org/css-display-3/#inline-box>
|
||||
pub(crate) fn is_inline_box(&self) -> bool {
|
||||
self.style.get_box().display.is_inline_flow() &&
|
||||
!self.base.flags.contains(FragmentFlags::IS_REPLACED)
|
||||
self.style.is_inline_box(self.base.flags)
|
||||
}
|
||||
|
||||
/// Whether this is a table wrapper box.
|
||||
|
|
|
@ -30,7 +30,7 @@ use style::values::specified::{Overflow, WillChangeBits, box_ as stylo};
|
|||
use webrender_api as wr;
|
||||
use webrender_api::units::LayoutTransform;
|
||||
|
||||
use crate::dom_traversal::Contents;
|
||||
use crate::dom_traversal::{Contents, NonReplacedContents};
|
||||
use crate::fragment_tree::FragmentFlags;
|
||||
use crate::geom::{
|
||||
AuOrAuto, LengthPercentageOrAuto, LogicalSides, LogicalSides1D, LogicalVec2, PhysicalSides,
|
||||
|
@ -83,6 +83,22 @@ impl DisplayGeneratingBox {
|
|||
is_list_item: false,
|
||||
},
|
||||
}
|
||||
} else if matches!(
|
||||
contents,
|
||||
Contents::NonReplaced(NonReplacedContents::OfTextControl)
|
||||
) {
|
||||
// If it's an input or textarea, make sure the display-inside is flow-root.
|
||||
// <https://html.spec.whatwg.org/multipage/#form-controls>
|
||||
if let DisplayGeneratingBox::OutsideInside { outside, .. } = self {
|
||||
DisplayGeneratingBox::OutsideInside {
|
||||
outside: *outside,
|
||||
inside: DisplayInside::FlowRoot {
|
||||
is_list_item: false,
|
||||
},
|
||||
}
|
||||
} else {
|
||||
*self
|
||||
}
|
||||
} else {
|
||||
*self
|
||||
}
|
||||
|
@ -334,6 +350,7 @@ pub(crate) trait ComputedValuesExt {
|
|||
&self,
|
||||
writing_mode: WritingMode,
|
||||
) -> bool;
|
||||
fn is_inline_box(&self, fragment_flags: FragmentFlags) -> bool;
|
||||
}
|
||||
|
||||
impl ComputedValuesExt for ComputedValues {
|
||||
|
@ -483,6 +500,12 @@ impl ComputedValuesExt for ComputedValues {
|
|||
LogicalSides::from_physical(&self.physical_margin(), containing_block_writing_mode)
|
||||
}
|
||||
|
||||
fn is_inline_box(&self, fragment_flags: FragmentFlags) -> bool {
|
||||
self.get_box().display.is_inline_flow() &&
|
||||
!fragment_flags
|
||||
.intersects(FragmentFlags::IS_REPLACED | FragmentFlags::IS_TEXT_CONTROL)
|
||||
}
|
||||
|
||||
/// Returns true if this is a transformable element.
|
||||
fn is_transformable(&self, fragment_flags: FragmentFlags) -> bool {
|
||||
// "A transformable element is an element in one of these categories:
|
||||
|
@ -494,8 +517,7 @@ impl ComputedValuesExt for ComputedValues {
|
|||
// elements."
|
||||
// <https://drafts.csswg.org/css-transforms/#transformable-element>
|
||||
// TODO: check for all cases listed in the above spec.
|
||||
!self.get_box().display.is_inline_flow() ||
|
||||
fragment_flags.contains(FragmentFlags::IS_REPLACED)
|
||||
!self.is_inline_box(fragment_flags)
|
||||
}
|
||||
|
||||
/// Returns true if this style has a transform, or perspective property set and
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue