commit 1c5f80bd63ed9ddabadabafee0c57d883d3e64a9 parent 64ca376c6f0b1b588062c64b103878d33b54536b Author: Keith Cirkel <keithamus@users.noreply.github.com> Date: Wed, 3 Dec 2025 20:50:15 +0000 Bug 1909339 - Implement anchor-center for alignment properties when anchored r=layout-reviewers,emilio,firefox-style-system-reviewers,dshin This implements `anchor-center` alignment for abpos elements when they have an Anchor. Differential Revision: https://phabricator.services.mozilla.com/D273655 Diffstat:
36 files changed, 317 insertions(+), 73 deletions(-)
diff --git a/layout/generic/AbsoluteContainingBlock.cpp b/layout/generic/AbsoluteContainingBlock.cpp @@ -762,9 +762,56 @@ static nscoord OffsetToAlignedStaticPos( LogicalSize kidSizeInOwnWM = aKidSizeInAbsPosCBWM.ConvertTo(kidWM, aAbsPosCBWM); const LogicalAxis kidAxis = aAbsPosCBWM.ConvertAxisTo(aAbsPosCBAxis, kidWM); + + // Build an Inset Modified rect from the anchor which can be used to align + // to the anchor-center, if AlignJustifySelf is AnchorCenter. + Maybe<LogicalRect> insetModifiedAnchorRect; + if (alignConst == StyleAlignFlags::ANCHOR_CENTER && + aKidReflowInput.mAnchorPosResolutionCache) { + const auto* referenceData = + aKidReflowInput.mAnchorPosResolutionCache->mReferenceData; + if (referenceData) { + const auto* cachedData = + referenceData->Lookup(referenceData->mDefaultAnchorName); + if (cachedData && *cachedData) { + const auto& data = cachedData->ref(); + if (data.mOffsetData) { + nsSize containerSize = aAbsPosCBSize.GetPhysicalSize(aAbsPosCBWM); + nsRect anchorRect(data.mOffsetData->mOrigin, data.mSize); + LogicalRect logicalAnchorRect(kidWM, anchorRect, containerSize); + if (aNonAutoAlignParams) { + logicalAnchorRect.Start(kidAxis, kidWM) -= + aNonAutoAlignParams->mCurrentStartInset; + } + insetModifiedAnchorRect = Some(logicalAnchorRect); + } + } + } + } + nscoord offset = CSSAlignUtils::AlignJustifySelf( alignConst, kidAxis, flags, baselineAdjust, alignAreaSizeInAxis, - aKidReflowInput, kidSizeInOwnWM); + aKidReflowInput, kidSizeInOwnWM, insetModifiedAnchorRect); + + // Safe alignment clamping for anchor-center. + // When using anchor-center with the safe keyword, or when both insets are + // auto (which defaults to safe behavior), clamp the element to stay within + // the containing block. + if ((!aNonAutoAlignParams || (safetyBits & StyleAlignFlags::SAFE)) && + alignConst == StyleAlignFlags::ANCHOR_CENTER) { + const auto cbSize = aAbsPosCBSize.Size(aAbsPosCBAxis, aAbsPosCBWM); + const auto kidSize = aKidSizeInAbsPosCBWM.Size(aAbsPosCBAxis, aAbsPosCBWM); + + if (aNonAutoAlignParams) { + const nscoord currentStartInset = aNonAutoAlignParams->mCurrentStartInset; + const nscoord finalStart = currentStartInset + offset; + const nscoord clampedStart = + CSSMinMax(finalStart, nscoord(0), cbSize - kidSize); + offset = clampedStart - currentStartInset; + } else { + offset = CSSMinMax(offset, nscoord(0), cbSize - kidSize); + } + } const auto rawAlignConst = (pcAxis == LogicalAxis::Inline) @@ -1387,10 +1434,12 @@ void AbsoluteContainingBlock::ReflowAbsoluteFrame( // margin for us in that axis (since the thing that's aligned is the // margin box). So, we clear out the margin here to avoid applying it // twice. - if (kidReflowInput.mFlags.mIOffsetsNeedCSSAlign) { + if (kidReflowInput.mFlags.mIOffsetsNeedCSSAlign || + kidReflowInput.mFlags.mIAnchorCenter) { margin.IStart(outerWM) = margin.IEnd(outerWM) = 0; } - if (kidReflowInput.mFlags.mBOffsetsNeedCSSAlign) { + if (kidReflowInput.mFlags.mBOffsetsNeedCSSAlign || + kidReflowInput.mFlags.mBAnchorCenter) { margin.BStart(outerWM) = margin.BEnd(outerWM) = 0; } @@ -1443,9 +1492,10 @@ void AbsoluteContainingBlock::ReflowAbsoluteFrame( const auto* placeholderContainer = GetPlaceholderContainer(kidReflowInput.mFrame); - if (!iInsetAuto) { + if (!iInsetAuto || kidReflowInput.mFlags.mIAnchorCenter) { MOZ_ASSERT( - !kidReflowInput.mFlags.mIOffsetsNeedCSSAlign, + !kidReflowInput.mFlags.mIOffsetsNeedCSSAlign || + kidReflowInput.mFlags.mIAnchorCenter, "Non-auto inline inset but requires CSS alignment for static " "position?"); auto alignOffset = OffsetToAlignedStaticPos( @@ -1462,8 +1512,9 @@ void AbsoluteContainingBlock::ReflowAbsoluteFrame( cbSize.ISize(outerWM) - (offsets.IStart(outerWM) + kidMarginBox.ISize(outerWM)); } - if (!bInsetAuto) { - MOZ_ASSERT(!kidReflowInput.mFlags.mBOffsetsNeedCSSAlign, + if (!bInsetAuto || kidReflowInput.mFlags.mBAnchorCenter) { + MOZ_ASSERT(!kidReflowInput.mFlags.mBOffsetsNeedCSSAlign || + kidReflowInput.mFlags.mBAnchorCenter, "Non-auto block inset but requires CSS alignment for static " "position?"); auto alignOffset = OffsetToAlignedStaticPos( diff --git a/layout/generic/CSSAlignUtils.cpp b/layout/generic/CSSAlignUtils.cpp @@ -24,7 +24,8 @@ nscoord CSSAlignUtils::AlignJustifySelf(const StyleAlignFlags& aAlignment, AlignJustifyFlags aFlags, nscoord aBaselineAdjust, nscoord aCBSize, const ReflowInput& aRI, - const LogicalSize& aChildSize) { + const LogicalSize& aChildSize, + const Maybe<LogicalRect>& aAnchorRect) { MOZ_ASSERT(aAlignment != StyleAlignFlags::AUTO, "auto values should have resolved already"); MOZ_ASSERT(aAlignment != StyleAlignFlags::LEFT && @@ -133,13 +134,20 @@ nscoord CSSAlignUtils::AlignJustifySelf(const StyleAlignFlags& aAlignment, } else if (alignment == StyleAlignFlags::END) { nscoord size = aChildSize.Size(aAxis, wm); offset = aCBSize - (size + marginEnd); - } else if (alignment == StyleAlignFlags::CENTER || - alignment == StyleAlignFlags::ANCHOR_CENTER) { - // TODO(dshin, Bug 1909339): For now, treat `anchor-center` as `center`. + } else if (alignment == StyleAlignFlags::ANCHOR_CENTER && aAnchorRect) { + const nscoord anchorSize = aAnchorRect->Size(aAxis, wm); + const nscoord anchorStart = aAnchorRect->Start(aAxis, wm); + const nscoord size = aChildSize.Size(aAxis, wm); + + // Offset relative to the anchors center, accounting for margins + offset = anchorStart + (anchorSize - size + marginStart - marginEnd) / 2; + } else { + // ANCHOR_CENTER with no Anchor is treated like CENTER. + MOZ_ASSERT(alignment == StyleAlignFlags::CENTER || + alignment == StyleAlignFlags::ANCHOR_CENTER, + "unknown align-/justify-self value"); nscoord size = aChildSize.Size(aAxis, wm); offset = (aCBSize - size + marginStart - marginEnd) / 2; - } else { - MOZ_ASSERT_UNREACHABLE("unknown align-/justify-self value"); } return offset; diff --git a/layout/generic/CSSAlignUtils.h b/layout/generic/CSSAlignUtils.h @@ -62,12 +62,15 @@ class CSSAlignUtils { * @param aCBSize The size of the alignment container, in its aAxis. * @param aRI A ReflowInput for the child. * @param aChildSize The child's LogicalSize (in its own writing mode). + * @param aAnchorRect When specified, an inset-modified anchor rect (in the + * child's writing mode) to use for anchor-center + * alignment. */ - static nscoord AlignJustifySelf(const StyleAlignFlags& aAlignment, - LogicalAxis aAxis, AlignJustifyFlags aFlags, - nscoord aBaselineAdjust, nscoord aCBSize, - const ReflowInput& aRI, - const LogicalSize& aChildSize); + static nscoord AlignJustifySelf( + const StyleAlignFlags& aAlignment, LogicalAxis aAxis, + AlignJustifyFlags aFlags, nscoord aBaselineAdjust, nscoord aCBSize, + const ReflowInput& aRI, const LogicalSize& aChildSize, + const Maybe<LogicalRect>& aAnchorRect = Nothing()); }; } // namespace mozilla diff --git a/layout/generic/ReflowInput.cpp b/layout/generic/ReflowInput.cpp @@ -10,6 +10,7 @@ #include <algorithm> +#include "AnchorPositioningUtils.h" #include "CounterStyleManager.h" #include "LayoutLogging.h" #include "PresShell.h" @@ -45,6 +46,41 @@ static bool CheckNextInFlowParenthood(nsIFrame* aFrame, nsIFrame* aParent) { return frameNext && parentNext && frameNext->GetParent() == parentNext; } +void ComputeAnchorCenterUsage( + const nsIFrame* aFrame, + mozilla::AnchorPosResolutionCache* aAnchorPosResolutionCache, + bool& aInlineUsesAnchorCenter, bool& aBlockUsesAnchorCenter) { + aInlineUsesAnchorCenter = false; + aBlockUsesAnchorCenter = false; + nsIFrame* parent = aFrame->GetParent(); + if (!parent || !aFrame->HasAnyStateBits(NS_FRAME_OUT_OF_FLOW) || + !aAnchorPosResolutionCache || + !aAnchorPosResolutionCache->mDefaultAnchorCache.mAnchor) { + return; + } + + const auto* stylePos = aFrame->StylePosition(); + WritingMode wm = aFrame->GetWritingMode(); + + auto checkAxis = [&](LogicalAxis aAxis) { + StyleAlignFlags alignment = + stylePos->UsedSelfAlignment(aAxis, parent->Style()); + if ((alignment & ~StyleAlignFlags::FLAG_BITS) != + StyleAlignFlags::ANCHOR_CENTER) { + return false; + } + LogicalSide startSide = aAxis == LogicalAxis::Inline ? LogicalSide::IStart + : LogicalSide::BStart; + LogicalSide endSide = + aAxis == LogicalAxis::Inline ? LogicalSide::IEnd : LogicalSide::BEnd; + return stylePos->mOffset.Get(wm.PhysicalSide(startSide)).IsAuto() || + stylePos->mOffset.Get(wm.PhysicalSide(endSide)).IsAuto(); + }; + + aInlineUsesAnchorCenter = checkAxis(LogicalAxis::Inline); + aBlockUsesAnchorCenter = checkAxis(LogicalAxis::Block); +} + /** * Adjusts the margin for a list (ol, ul), if necessary, depending on * font inflation settings. Unfortunately, because bullets from a list are @@ -292,6 +328,7 @@ ReflowInput::ReflowInput(nsPresContext* aPresContext, mFlags.mDummyParentReflowInput = false; mFlags.mStaticPosIsCBOrigin = aFlags.contains(InitFlag::StaticPosIsCBOrigin); mFlags.mIOffsetsNeedCSSAlign = mFlags.mBOffsetsNeedCSSAlign = false; + mFlags.mIAnchorCenter = mFlags.mBAnchorCenter = false; // We don't want the mOrthogonalCellFinalReflow flag to be inherited; it's up // to the table row frame to set it for its direct children as needed. @@ -1683,6 +1720,16 @@ void ReflowInput::InitAbsoluteConstraints(const ReflowInput* aCBReflowInput, bool bStartIsAuto = bStartOffset->IsAuto(); bool bEndIsAuto = bEndOffset->IsAuto(); + mFlags.mIAnchorCenter = anchorResolutionParams.mBaseParams.mIAnchorCenter; + mFlags.mBAnchorCenter = anchorResolutionParams.mBaseParams.mBAnchorCenter; + + // For anchor-center with both insets auto, insets need to be kept as 0 + // so hypothetical position should be skipped. + const bool inlineBothInsetsAuto = + mFlags.mIAnchorCenter && iStartIsAuto && iEndIsAuto; + const bool blockBothInsetsAuto = + mFlags.mBAnchorCenter && bStartIsAuto && bEndIsAuto; + // If both 'inline-start' and 'inline-end' are 'auto' or both 'block-start' // and 'block-end' are 'auto', then compute the hypothetical box position // where the element would have if it were in the flow. @@ -1768,7 +1815,7 @@ void ReflowInput::InitAbsoluteConstraints(const ReflowInput* aCBReflowInput, nsLayoutUtils::ComputeCBDependentValue(aCBSize.ISize(cbwm), iEndOffset); } - if (iStartIsAuto && iEndIsAuto) { + if (iStartIsAuto && iEndIsAuto && !inlineBothInsetsAuto) { if (cbwm.IsInlineReversed() != hypotheticalPos.mWritingMode.IsInlineReversed()) { offsets.IEnd(cbwm) = hypotheticalPos.mIStart; @@ -1792,7 +1839,7 @@ void ReflowInput::InitAbsoluteConstraints(const ReflowInput* aCBReflowInput, nsLayoutUtils::ComputeCBDependentValue(aCBSize.BSize(cbwm), bEndOffset); } - if (bStartIsAuto && bEndIsAuto) { + if (bStartIsAuto && bEndIsAuto && !blockBothInsetsAuto) { // Treat 'top' like 'static-position' offsets.BStart(cbwm) = hypotheticalPos.mBStart; bStartIsAuto = false; diff --git a/layout/generic/ReflowInput.h b/layout/generic/ReflowInput.h @@ -506,6 +506,11 @@ struct ReflowInput : public SizeComputationInput { bool mIOffsetsNeedCSSAlign : 1; bool mBOffsetsNeedCSSAlign : 1; + // True when anchor-center is being used with a valid anchor and at least + // one inset is auto on this axis. Used to zero out margins. + bool mIAnchorCenter : 1; + bool mBAnchorCenter : 1; + // Is this frame or one of its ancestors being reflowed in a different // continuation than the one in which it was previously reflowed? In // other words, has it moved to a different column or page than it was in @@ -977,13 +982,28 @@ struct ReflowInput : public SizeComputationInput { } // namespace mozilla +void ComputeAnchorCenterUsage( + const nsIFrame* aFrame, + mozilla::AnchorPosResolutionCache* aAnchorPosResolutionCache, + bool& aInlineUsesAnchorCenter, bool& aBlockUsesAnchorCenter); + inline AnchorPosResolutionParams AnchorPosResolutionParams::From( const mozilla::ReflowInput* aRI, bool aIgnorePositionArea) { const mozilla::StylePositionArea posArea = aIgnorePositionArea ? mozilla::StylePositionArea{} : aRI->mStylePosition->mPositionArea; - return {aRI->mFrame, aRI->mStyleDisplay->mPosition, posArea, - aRI->mAnchorPosResolutionCache}; + bool inlineUsesAnchorCenter = false; + bool blockUsesAnchorCenter = false; + + ComputeAnchorCenterUsage(aRI->mFrame, aRI->mAnchorPosResolutionCache, + inlineUsesAnchorCenter, blockUsesAnchorCenter); + + return {aRI->mFrame, + aRI->mStyleDisplay->mPosition, + posArea, + aRI->mAnchorPosResolutionCache, + inlineUsesAnchorCenter, + blockUsesAnchorCenter}; } #endif // mozilla_ReflowInput_h diff --git a/layout/generic/nsIFrame.h b/layout/generic/nsIFrame.h @@ -5904,8 +5904,17 @@ inline nsIFrame* nsFrameList::BackwardFrameTraversal::Prev(nsIFrame* aFrame) { inline AnchorPosResolutionParams AnchorPosResolutionParams::From( const nsIFrame* aFrame, mozilla::AnchorPosResolutionCache* aAnchorPosResolutionCache) { - return {aFrame, aFrame->StyleDisplay()->mPosition, - aFrame->StylePosition()->mPositionArea, aAnchorPosResolutionCache}; + bool inlineUsesAnchorCenter = false; + bool blockUsesAnchorCenter = false; + ComputeAnchorCenterUsage(aFrame, aAnchorPosResolutionCache, + inlineUsesAnchorCenter, blockUsesAnchorCenter); + + return {aFrame, + aFrame->StyleDisplay()->mPosition, + aFrame->StylePosition()->mPositionArea, + aAnchorPosResolutionCache, + inlineUsesAnchorCenter, + blockUsesAnchorCenter}; } #endif /* nsIFrame_h___ */ diff --git a/layout/style/ComputedStyle.cpp b/layout/style/ComputedStyle.cpp @@ -445,6 +445,17 @@ bool ComputedStyle::HasAnchorPosReference() const { return true; } + // Check if anchor-center is used in alignment properties, directly accessing + // members rather than using UsedAlign* because legacy values can't resolve to + // anchor-center. + const auto alignSelfValue = pos->mAlignSelf._0 & ~StyleAlignFlags::FLAG_BITS; + const auto justifySelfValue = + pos->mJustifySelf._0 & ~StyleAlignFlags::FLAG_BITS; + if (alignSelfValue == StyleAlignFlags::ANCHOR_CENTER || + justifySelfValue == StyleAlignFlags::ANCHOR_CENTER) { + return true; + } + // Now check if any property that can use anchor() or anchor-size() // does use any. Note that it's valid to specify e.g. left: anchor(left); // but without specifying position-anchor, in which case the function diff --git a/layout/style/nsStyleStruct.cpp b/layout/style/nsStyleStruct.cpp @@ -1326,6 +1326,21 @@ StyleSelfAlignment nsStylePosition::UsedJustifySelf( return {StyleAlignFlags::NORMAL}; } +bool AnchorResolvedInsetHelper::SideUsesAnchorCenter( + mozilla::Side aSide, const AnchorPosOffsetResolutionParams& aParams) { + const nsIFrame* frame = aParams.mBaseParams.mFrame; + if (!frame) { + return false; + } + + WritingMode wm = frame->GetWritingMode(); + LogicalSide logicalSide = wm.LogicalSideForPhysicalSide(aSide); + LogicalAxis axis = GetAxis(logicalSide); + + return axis == LogicalAxis::Inline ? aParams.mBaseParams.mIAnchorCenter + : aParams.mBaseParams.mBAnchorCenter; +} + AnchorResolvedInset AnchorResolvedInsetHelper::ResolveAnchor( const mozilla::StyleInset& aValue, mozilla::StylePhysicalSide aSide, const AnchorPosOffsetResolutionParams& aParams) { diff --git a/layout/style/nsStyleStruct.h b/layout/style/nsStyleStruct.h @@ -387,6 +387,12 @@ struct AnchorPosResolutionParams { mozilla::StylePositionArea mPositionArea; // Cache data used for anchor resolution. mozilla::AnchorPosResolutionCache* const mCache; + // Whether anchor-center is being used with a valid anchor on the inline axis. + // When true, auto insets in the inline axis resolve to 0. + bool mIAnchorCenter = false; + // Whether anchor-center is being used with a valid anchor on the block axis. + // When true, auto insets in the block axis resolve to 0. + bool mBAnchorCenter = false; // Helper functions for creating anchor resolution parameters. // Defined in corresponding header files. @@ -773,7 +779,11 @@ struct AnchorResolvedInsetHelper { if (!aValue.HasAnchorPositioningFunction()) { // If `position-area` is used "Any auto inset properties resolve to 0": // https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-position-area - if (aValue.IsAuto() && !aParams.mBaseParams.mPositionArea.IsNone()) { + // If `anchor-center` is used with a valid anchor, "auto inset + // properties resolve to 0": + // https://drafts.csswg.org/css-anchor-position-1/#anchor-center + if (aValue.IsAuto() && (!aParams.mBaseParams.mPositionArea.IsNone() || + SideUsesAnchorCenter(aSide, aParams))) { return AnchorResolvedInset::UniquelyOwning( new mozilla::StyleInset(mozilla::LengthPercentage::Zero())); } @@ -787,6 +797,9 @@ struct AnchorResolvedInsetHelper { return AnchorResolvedInset::NonOwning(&AutoValue()); } + static bool SideUsesAnchorCenter( + mozilla::Side aSide, const AnchorPosOffsetResolutionParams& aParams); + static AnchorResolvedInset ResolveAnchor( const mozilla::StyleInset& aValue, mozilla::StylePhysicalSide aSide, const AnchorPosOffsetResolutionParams& aParams); diff --git a/servo/ports/geckolib/glue.rs b/servo/ports/geckolib/glue.rs @@ -10785,6 +10785,8 @@ fn offset_params_from_base_params( mPosition: params.mPosition, mPositionArea: params.mPositionArea, mCache: params.mCache, + mIAnchorCenter: params.mIAnchorCenter, + mBAnchorCenter: params.mBAnchorCenter, }, } } diff --git a/testing/web-platform/meta/css/css-anchor-position/anchor-center-003.html.ini b/testing/web-platform/meta/css/css-anchor-position/anchor-center-003.html.ini @@ -1,3 +0,0 @@ -[anchor-center-003.html] - [.target 1] - expected: FAIL diff --git a/testing/web-platform/meta/css/css-anchor-position/anchor-center-htb-htb.html.ini b/testing/web-platform/meta/css/css-anchor-position/anchor-center-htb-htb.html.ini @@ -1,6 +0,0 @@ -[anchor-center-htb-htb.html] - [.target 2] - expected: FAIL - - [.target 6] - expected: FAIL diff --git a/testing/web-platform/meta/css/css-anchor-position/anchor-center-htb-vrl.html.ini b/testing/web-platform/meta/css/css-anchor-position/anchor-center-htb-vrl.html.ini @@ -1,7 +1,4 @@ [anchor-center-htb-vrl.html] - [.target 1] - expected: FAIL - [.target 2] expected: FAIL diff --git a/testing/web-platform/meta/css/css-anchor-position/anchor-center-offset-change.html.ini b/testing/web-platform/meta/css/css-anchor-position/anchor-center-offset-change.html.ini @@ -1,6 +0,0 @@ -[anchor-center-offset-change.html] - [Anchored initially have the same width as the anchor] - expected: FAIL - - [Increase the height of the anchor to move the anchor-center offset] - expected: FAIL diff --git a/testing/web-platform/meta/css/css-anchor-position/anchor-center-safe-rtl.html.ini b/testing/web-platform/meta/css/css-anchor-position/anchor-center-safe-rtl.html.ini @@ -1,2 +0,0 @@ -[anchor-center-safe-rtl.html] - expected: FAIL diff --git a/testing/web-platform/meta/css/css-anchor-position/anchor-center-safe.html.ini b/testing/web-platform/meta/css/css-anchor-position/anchor-center-safe.html.ini @@ -1,2 +0,0 @@ -[anchor-center-safe.html] - expected: FAIL diff --git a/testing/web-platform/meta/css/css-anchor-position/anchor-center-visibility-change.html.ini b/testing/web-platform/meta/css/css-anchor-position/anchor-center-visibility-change.html.ini @@ -1,2 +0,0 @@ -[anchor-center-visibility-change.html] - expected: FAIL diff --git a/testing/web-platform/meta/css/css-anchor-position/anchor-center-vrl-htb.html.ini b/testing/web-platform/meta/css/css-anchor-position/anchor-center-vrl-htb.html.ini @@ -1,7 +1,4 @@ [anchor-center-vrl-htb.html] - [.target 1] - expected: FAIL - [.target 2] expected: FAIL diff --git a/testing/web-platform/meta/css/css-anchor-position/anchor-center-vrl-vrl.html.ini b/testing/web-platform/meta/css/css-anchor-position/anchor-center-vrl-vrl.html.ini @@ -1,6 +0,0 @@ -[anchor-center-vrl-vrl.html] - [.target 2] - expected: FAIL - - [.target 6] - expected: FAIL diff --git a/testing/web-platform/meta/css/css-anchor-position/position-area-align-justify.html.ini b/testing/web-platform/meta/css/css-anchor-position/position-area-align-justify.html.ini @@ -1,3 +0,0 @@ -[position-area-align-justify.html] - [Offsets for position-area: span-all] - expected: FAIL diff --git a/testing/web-platform/meta/css/css-anchor-position/position-area-scroll-adjust.html.ini b/testing/web-platform/meta/css/css-anchor-position/position-area-scroll-adjust.html.ini @@ -1,2 +0,0 @@ -[position-area-scroll-adjust.html] - expected: FAIL diff --git a/testing/web-platform/meta/css/css-anchor-position/position-try-switch-from-fixed-anchor.html.ini b/testing/web-platform/meta/css/css-anchor-position/position-try-switch-from-fixed-anchor.html.ini @@ -1,2 +0,0 @@ -[position-try-switch-from-fixed-anchor.html] - expected: FAIL diff --git a/testing/web-platform/meta/css/css-anchor-position/position-visibility-anchors-valid.tentative.html.ini b/testing/web-platform/meta/css/css-anchor-position/position-visibility-anchors-valid.tentative.html.ini @@ -1,2 +0,0 @@ -[position-visibility-anchors-valid.tentative.html] - expected: FAIL diff --git a/testing/web-platform/meta/css/css-anchor-position/position-visibility-no-overflow-scroll-002.html.ini b/testing/web-platform/meta/css/css-anchor-position/position-visibility-no-overflow-scroll-002.html.ini @@ -1,2 +0,0 @@ -[position-visibility-no-overflow-scroll-002.html] - expected: FAIL diff --git a/testing/web-platform/meta/css/css-anchor-position/position-visibility-remove-anchors-visible.html.ini b/testing/web-platform/meta/css/css-anchor-position/position-visibility-remove-anchors-visible.html.ini @@ -1,2 +0,0 @@ -[position-visibility-remove-anchors-visible.html] - expected: FAIL diff --git a/testing/web-platform/meta/css/css-anchor-position/pseudo-element-implicit-anchor-center.html.ini b/testing/web-platform/meta/css/css-anchor-position/pseudo-element-implicit-anchor-center.html.ini @@ -1,2 +0,0 @@ -[pseudo-element-implicit-anchor-center.html] - expected: FAIL diff --git a/testing/web-platform/tests/css/css-anchor-position/position-anchor-001.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-001.html @@ -3,11 +3,13 @@ <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor"> <link rel="author" href="mailto:xiaochengh@chromium.org"> <link rel="match" href="position-anchor-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> .anchor { width: 100px; height: 100px; background: orange; + font: 20px/1 Ahem; } .target { @@ -15,6 +17,7 @@ background: lime; position-try-fallbacks: --pf; left: 999999px; /* force fallback */ + font: 20px/1 Ahem; } @position-try --pf { diff --git a/testing/web-platform/tests/css/css-anchor-position/position-anchor-002.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-002.html @@ -3,11 +3,13 @@ <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor"> <link rel="author" href="mailto:xiaochengh@chromium.org"> <link rel="match" href="position-anchor-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> .anchor { width: 100px; height: 100px; background: orange; + font: 20px/1 Ahem; } .target { @@ -15,6 +17,7 @@ background: lime; position-try-fallbacks: --pf; left: 999999px; /* force fallback */ + font: 20px/1 Ahem; } @position-try --pf { diff --git a/testing/web-platform/tests/css/css-anchor-position/position-anchor-004.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-004.html @@ -6,11 +6,13 @@ <link rel="match" href="position-anchor-ref.html"> <script src="/common/reftest-wait.js"></script> <script src="/common/rendering-utils.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> .anchor { width: 100px; height: 100px; background: orange; + font: 20px/1 Ahem; } .target { @@ -20,6 +22,7 @@ background: lime; top: anchor(bottom); left: anchor(left); + font: 20px/1 Ahem; } body { diff --git a/testing/web-platform/tests/css/css-anchor-position/position-anchor-005-ref.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-005-ref.tentative.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<style> +body{ + margin: 0; +} +.wrapper { + border: 10px solid grey; + border-left-width: 7px; + border-top-width: 9px; + position: relative; + width: 200px; + height: 400px; + padding: 11px 12px 8px 6px; +} +.a { + background: green; + width: 50px; + height: 100px; + margin: 30px 28px 32px 52px; + border: 10px solid yellow; + border-left-width: 8px; + border-right-width: 7px; + border-top-width: 6px; + padding: 9px 8px 5px 3px; + anchor-name: --foo; +} +.b { + background: blue; + position: absolute; + width: 50px; + height: 100px; + border: 5px solid lime; + padding: 15px; + top: 171px; + left: 51px; +} +</style> +<body> +<div class=wrapper> + <div class=a></div> + <div class=b></div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-anchor-005.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-005.tentative.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>Tests 'position-anchor' property works with anchor-center with border & padding</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor"> +<link rel="author" href="mailto:wpt@keithcirkel.co.uk"> +<link rel="match" href="position-anchor-005-ref.tentative.html"> +<style> +body { + margin: 0; +} +.wrapper { + border: 10px solid grey; + border-left-width: 7px; + border-top-width: 9px; + position: relative; + width: 200px; + height: 400px; + padding: 11px 12px 8px 6px; +} +.a { + background: green; + width: 50px; + height: 100px; + margin: 30px 28px 32px 52px; + border: 10px solid yellow; + border-left-width: 8px; + border-right-width: 7px; + border-top-width: 6px; + padding: 9px 8px 5px 3px; + anchor-name: --foo; +} +.b { + background: blue; + position: absolute; + width: 50px; + height: 100px; + border: 5px solid lime; + padding: 15px; + position-anchor: --foo; + position-area: center bottom +} +</style> +<body> +<div class="wrapper"> + <div class=a></div> + <div class=b></div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-anchor-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-ref.html @@ -1,9 +1,11 @@ <!DOCTYPE html> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> .anchor { width: 100px; height: 100px; background: orange; + font: 20px/1 Ahem; } .target { @@ -11,6 +13,7 @@ background: lime; width: 100px; height: 100px; + font: 20px/1 Ahem; } body { diff --git a/testing/web-platform/tests/css/css-anchor-position/position-anchor-target-with-children-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-target-with-children-ref.html @@ -1,4 +1,5 @@ <!DOCTYPE html> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> .anchor { width: 100px; @@ -15,6 +16,7 @@ body { margin: 0; + font: 20px/1 Ahem; } #anchor1 { diff --git a/testing/web-platform/tests/css/css-anchor-position/position-anchor-target-with-children.html b/testing/web-platform/tests/css/css-anchor-position/position-anchor-target-with-children.html @@ -6,6 +6,7 @@ <link rel="match" href="position-anchor-target-with-children-ref.html"> <script src="/common/reftest-wait.js"></script> <script src="/common/rendering-utils.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> .anchor { width: 100px; @@ -24,6 +25,7 @@ body { margin: 0; + font: 20px/1 Ahem; } #anchor1 { diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible-ref.html @@ -1,10 +1,12 @@ <!DOCTYPE html> <meta charset="utf-8"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> #scroll-container { overflow: hidden scroll; width: 300px; height: 100px; + font: 20px/1 Ahem; } #target { @@ -12,6 +14,7 @@ height: 100px; margin-top: 100px; background: green; + font: 20px/1 Ahem; } </style> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible.html @@ -7,11 +7,13 @@ <link rel="match" href="position-visibility-remove-anchors-visible-ref.html"> <script src="/common/reftest-wait.js"></script> <script src="/common/rendering-utils.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> #scroll-container { overflow: hidden scroll; width: 300px; height: 100px; + font: 20px/1 Ahem; } #anchor { @@ -19,6 +21,7 @@ width: 100px; height: 100px; background: orange; + font: 20px/1 Ahem; } #spacer { @@ -34,6 +37,7 @@ background: green; position: absolute; inset: 0; + font: 20px/1 Ahem; } </style>