mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-22 01:35:35 +00:00
Merge autoland to mozilla-central. a=merge
This commit is contained in:
commit
b418634cb3
@ -11051,7 +11051,7 @@ class PointerLockRequest final : public Runnable {
|
||||
mDocument(do_GetWeakReference(aElement->OwnerDoc())),
|
||||
mUserInputOrChromeCaller(aUserInputOrChromeCaller) {}
|
||||
|
||||
NS_IMETHOD Run() final;
|
||||
MOZ_CAN_RUN_SCRIPT_BOUNDARY NS_IMETHOD Run() final;
|
||||
|
||||
private:
|
||||
nsWeakPtr mElement;
|
||||
|
@ -1940,8 +1940,9 @@ class Document : public nsINode,
|
||||
static bool HandlePendingFullscreenRequests(Document* aDocument);
|
||||
|
||||
void RequestPointerLock(Element* aElement, CallerType);
|
||||
bool SetPointerLock(Element* aElement, StyleCursorKind);
|
||||
MOZ_CAN_RUN_SCRIPT bool SetPointerLock(Element* aElement, StyleCursorKind);
|
||||
|
||||
MOZ_CAN_RUN_SCRIPT_BOUNDARY
|
||||
static void UnlockPointer(Document* aDoc = nullptr);
|
||||
|
||||
// ScreenOrientation related APIs
|
||||
|
@ -325,7 +325,7 @@ class nsGlobalWindowOuter final : public mozilla::dom::EventTarget,
|
||||
// Outer windows only.
|
||||
virtual void EnsureSizeAndPositionUpToDate() override;
|
||||
|
||||
virtual void EnterModalState() override;
|
||||
MOZ_CAN_RUN_SCRIPT_BOUNDARY virtual void EnterModalState() override;
|
||||
virtual void LeaveModalState() override;
|
||||
|
||||
// Outer windows only.
|
||||
@ -863,6 +863,7 @@ class nsGlobalWindowOuter final : public mozilla::dom::EventTarget,
|
||||
nsIPrincipal* aSubjectPrincipal);
|
||||
|
||||
// Outer windows only.
|
||||
MOZ_CAN_RUN_SCRIPT_BOUNDARY
|
||||
bool CanMoveResizeWindows(mozilla::dom::CallerType aCallerType);
|
||||
|
||||
// If aDoFlush is true, we'll flush our own layout; otherwise we'll try to
|
||||
|
@ -1996,7 +1996,7 @@ bool EventStateManager::DoDefaultDragStart(nsPresContext* aPresContext,
|
||||
|
||||
// get any custom drag image that was set
|
||||
int32_t imageX, imageY;
|
||||
Element* dragImage = aDataTransfer->GetDragImage(&imageX, &imageY);
|
||||
RefPtr<Element> dragImage = aDataTransfer->GetDragImage(&imageX, &imageY);
|
||||
|
||||
nsCOMPtr<nsIArray> transArray = aDataTransfer->GetTransferables(dragTarget);
|
||||
if (!transArray) return false;
|
||||
|
@ -1088,6 +1088,7 @@ class EventStateManager : public nsSupportsWeakReference, public nsIObserver {
|
||||
* aPrincipal - the triggering principal of the drag, or null if it's from
|
||||
* browser chrome or OS
|
||||
*/
|
||||
MOZ_CAN_RUN_SCRIPT
|
||||
bool DoDefaultDragStart(nsPresContext* aPresContext,
|
||||
WidgetDragEvent* aDragEvent,
|
||||
dom::DataTransfer* aDataTransfer,
|
||||
@ -1273,7 +1274,8 @@ class EventStateManager : public nsSupportsWeakReference, public nsIObserver {
|
||||
void KillClickHoldTimer();
|
||||
void FireContextClick();
|
||||
|
||||
static void SetPointerLock(nsIWidget* aWidget, nsIContent* aElement);
|
||||
MOZ_CAN_RUN_SCRIPT static void SetPointerLock(nsIWidget* aWidget,
|
||||
nsIContent* aElement);
|
||||
static void sClickHoldCallback(nsITimer* aTimer, void* aESM);
|
||||
};
|
||||
|
||||
|
@ -51,6 +51,7 @@ class HTMLButtonElement final : public nsGenericHTMLFormElementWithState,
|
||||
|
||||
// EventTarget
|
||||
void GetEventTargetParent(EventChainPreVisitor& aVisitor) override;
|
||||
MOZ_CAN_RUN_SCRIPT_BOUNDARY
|
||||
virtual nsresult PostHandleEvent(EventChainPostVisitor& aVisitor) override;
|
||||
|
||||
// nsINode
|
||||
|
@ -3858,7 +3858,7 @@ nsresult HTMLInputElement::PostHandleEvent(EventChainPostVisitor& aVisitor) {
|
||||
case NS_FORM_INPUT_RADIO: {
|
||||
// Checkbox and Radio try to submit on Enter press
|
||||
if (keyEvent->mKeyCode != NS_VK_SPACE) {
|
||||
MaybeSubmitForm(aVisitor.mPresContext);
|
||||
MaybeSubmitForm(MOZ_KnownLive(aVisitor.mPresContext));
|
||||
|
||||
break; // If we are submitting, do not send click event
|
||||
}
|
||||
@ -3935,7 +3935,7 @@ nsresult HTMLInputElement::PostHandleEvent(EventChainPostVisitor& aVisitor) {
|
||||
mType == NS_FORM_INPUT_NUMBER ||
|
||||
IsExperimentalMobileType(mType) || IsDateTimeInputType(mType))) {
|
||||
FireChangeEventIfNeeded();
|
||||
rv = MaybeSubmitForm(aVisitor.mPresContext);
|
||||
rv = MaybeSubmitForm(MOZ_KnownLive(aVisitor.mPresContext));
|
||||
NS_ENSURE_SUCCESS(rv, rv);
|
||||
}
|
||||
|
||||
|
@ -1017,7 +1017,7 @@ class HTMLInputElement final : public nsGenericHTMLFormElementWithState,
|
||||
* MaybeSubmitForm looks for a submit input or a single text control
|
||||
* and submits the form if either is present.
|
||||
*/
|
||||
nsresult MaybeSubmitForm(nsPresContext* aPresContext);
|
||||
MOZ_CAN_RUN_SCRIPT nsresult MaybeSubmitForm(nsPresContext* aPresContext);
|
||||
|
||||
/**
|
||||
* Update mFileList with the currently selected file.
|
||||
|
@ -359,6 +359,7 @@ class BrowserChild final : public BrowserChildBase,
|
||||
const mozilla::WidgetMouseEvent& aEvent, const ScrollableLayerGuid& aGuid,
|
||||
const uint64_t& aInputBlockId);
|
||||
|
||||
MOZ_CAN_RUN_SCRIPT_BOUNDARY
|
||||
mozilla::ipc::IPCResult RecvRealDragEvent(const WidgetDragEvent& aEvent,
|
||||
const uint32_t& aDragAction,
|
||||
const uint32_t& aDropEffect,
|
||||
|
@ -454,6 +454,7 @@ class ContentChild final : public PContentChild,
|
||||
mozilla::ipc::IPCResult RecvInvokeDragSession(
|
||||
nsTArray<IPCDataTransfer>&& aTransfers, const uint32_t& aAction);
|
||||
|
||||
MOZ_CAN_RUN_SCRIPT_BOUNDARY
|
||||
mozilla::ipc::IPCResult RecvEndDragSession(
|
||||
const bool& aDoneDrag, const bool& aUserCancelled,
|
||||
const mozilla::LayoutDeviceIntPoint& aEndDragPoint,
|
||||
|
@ -2160,7 +2160,7 @@ MediaDecoderStateMachine::StateObject::SetSeekingState(
|
||||
}
|
||||
|
||||
void MediaDecoderStateMachine::StateObject::SetDecodingState() {
|
||||
if (mMaster->mLooping && mMaster->mSeamlessLoopingAllowed) {
|
||||
if (mMaster->IsInSeamlessLooping()) {
|
||||
SetState<LoopingDecodingState>();
|
||||
return;
|
||||
}
|
||||
@ -2276,10 +2276,12 @@ void MediaDecoderStateMachine::DecodingState::Enter() {
|
||||
HandleVideoSuspendTimeout();
|
||||
}
|
||||
|
||||
// If decoding has ended and we are not in looping, we don't need to decode
|
||||
// anything later.
|
||||
// If we're in the normal decoding mode and the decoding has finished, then we
|
||||
// should go to `completed` state because we don't need to decode anything
|
||||
// later. However, if we're in the saemless decoding mode, we will restart
|
||||
// decoding ASAP so we can still stay in `decoding` state.
|
||||
if (!mMaster->IsVideoDecoding() && !mMaster->IsAudioDecoding() &&
|
||||
!mMaster->mLooping) {
|
||||
!mMaster->IsInSeamlessLooping()) {
|
||||
SetState<CompletedState>();
|
||||
return;
|
||||
}
|
||||
@ -3937,6 +3939,10 @@ void MediaDecoderStateMachine::AdjustByLooping(media::TimeUnit& aTime) const {
|
||||
}
|
||||
}
|
||||
|
||||
bool MediaDecoderStateMachine::IsInSeamlessLooping() const {
|
||||
return mLooping && mSeamlessLoopingAllowed;
|
||||
}
|
||||
|
||||
} // namespace mozilla
|
||||
|
||||
// avoid redefined macro in unified build
|
||||
|
@ -625,6 +625,8 @@ class MediaDecoderStateMachine
|
||||
void OnSuspendTimerResolved();
|
||||
void CancelSuspendTimer();
|
||||
|
||||
bool IsInSeamlessLooping() const;
|
||||
|
||||
bool mCanPlayThrough = false;
|
||||
|
||||
bool mIsLiveStream = false;
|
||||
|
@ -1304,6 +1304,8 @@ tags = suspend
|
||||
[test_background_video_resume_after_end_show_last_frame.html]
|
||||
skip-if = toolkit == 'android' # bug 1346705
|
||||
tags = suspend
|
||||
[test_background_video_resume_looping_video_without_audio.html]
|
||||
tags = suspend
|
||||
[test_background_video_suspend.html]
|
||||
skip-if = toolkit == 'android' # android(bug 1304480)
|
||||
tags = suspend
|
||||
|
@ -0,0 +1,85 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Resume suspended looping video which doesn't contain audio track</title>
|
||||
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<script src="manifest.js"></script>
|
||||
<script src="background_video.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<script class="testbody" type="text/javascript">
|
||||
/**
|
||||
* This test is used to ensure that the looping video (without audio track) which
|
||||
* has been suspended can continute to playback correctly after we resume video
|
||||
* decoding.
|
||||
*/
|
||||
async function startTest() {
|
||||
const video = await createVisibleVideo();
|
||||
await startVideo(video);
|
||||
await suspendVideoDecoding(video);
|
||||
await resumeVideoDecoding(video);
|
||||
await waitUntilVideoLoopAgain(video);
|
||||
endTestAndClearVideo(video);
|
||||
}
|
||||
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
SpecialPowers.pushPrefEnv({ 'set': [
|
||||
["media.test.video-suspend", true],
|
||||
["media.suspend-bkgnd-video.enabled", true],
|
||||
["media.suspend-bkgnd-video.delay-ms", 0],
|
||||
]}, () => {
|
||||
startTest();
|
||||
});
|
||||
|
||||
/**
|
||||
* The following are test helper functions.
|
||||
*/
|
||||
async function createVisibleVideo() {
|
||||
let video = document.createElement("video");
|
||||
video.src = "gizmo-noaudio.webm";
|
||||
video.controls = true;
|
||||
video.loop = true;
|
||||
// In order to reduce the test running time, because we don't need to acutally
|
||||
// go through the whole video.
|
||||
video.currentTime = 3;
|
||||
document.body.appendChild(video);
|
||||
info(`ensure video becomes visible`);
|
||||
await waitUntilVisible(video);
|
||||
return video;
|
||||
}
|
||||
|
||||
async function startVideo(video) {
|
||||
info(`start playing video`);
|
||||
const played = video && await video.play().then(() => true, () => false);
|
||||
ok(played, "video has started playing");
|
||||
}
|
||||
|
||||
async function suspendVideoDecoding(video) {
|
||||
info(`suspend video decoding`);
|
||||
video.setVisible(false);
|
||||
await nextVideoSuspends(video);
|
||||
}
|
||||
|
||||
async function resumeVideoDecoding(video) {
|
||||
info(`resume video decoding.`);
|
||||
video.setVisible(true);
|
||||
await nextVideoResumes(video);
|
||||
}
|
||||
|
||||
async function waitUntilVideoLoopAgain(video) {
|
||||
info(`ensure video is still playing after resuming video decoding.`);
|
||||
await once(video, "seeking");
|
||||
info(`got 'seeking' event.`);
|
||||
await once(video, "seeked");
|
||||
ok(!video.paused, "video is still playing and looping again.")
|
||||
}
|
||||
|
||||
function endTestAndClearVideo(video) {
|
||||
removeNodeAndSource(video);
|
||||
SimpleTest.finish();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -102,7 +102,8 @@ class SVGSVGElement final : public SVGSVGElementBase {
|
||||
*
|
||||
* XXX SVGZoomEvent is no more, is this needed?
|
||||
*/
|
||||
void SetCurrentScaleTranslate(float s, float x, float y);
|
||||
MOZ_CAN_RUN_SCRIPT_BOUNDARY void SetCurrentScaleTranslate(float s, float x,
|
||||
float y);
|
||||
|
||||
// nsIContent interface
|
||||
void GetEventTargetParent(EventChainPreVisitor& aVisitor) override;
|
||||
|
@ -174,7 +174,7 @@ class DrawTargetCairo final : public DrawTarget {
|
||||
static cairo_surface_t* GetDummySurface();
|
||||
|
||||
// Cairo hardcodes this as its maximum surface size.
|
||||
static size_t GetMaxSurfaceSize() { return 32767; }
|
||||
static size_t GetMaxSurfaceSize() { return 32766; }
|
||||
|
||||
private: // methods
|
||||
// Init cairo surface without doing a cairo_surface_reference() call.
|
||||
|
@ -218,7 +218,14 @@ BasicCompositor::BasicCompositor(CompositorBridgeParent* aParent,
|
||||
mFullWindowRenderTarget(nullptr) {
|
||||
MOZ_COUNT_CTOR(BasicCompositor);
|
||||
|
||||
mMaxTextureSize = Factory::GetMaxSurfaceSize(gfxVars::ContentBackend());
|
||||
// The widget backends may create intermediate Cairo surfaces to deal with
|
||||
// various window buffers, regardless of actual content backend type, when
|
||||
// using the basic compositor. Ensure that the buffers will be able to fit
|
||||
// in or blit with a Cairo surface.
|
||||
mMaxTextureSize =
|
||||
std::min(Factory::GetMaxSurfaceSize(gfxVars::ContentBackend()),
|
||||
Factory::GetMaxSurfaceSize(BackendType::CAIRO));
|
||||
|
||||
}
|
||||
|
||||
BasicCompositor::~BasicCompositor() { MOZ_COUNT_DTOR(BasicCompositor); }
|
||||
|
@ -7433,7 +7433,7 @@ GeneralParser<ParseHandler, Unit>::fieldInitializerOpt(
|
||||
}
|
||||
|
||||
ListNodeType statementList = handler_.newStatementList(wholeInitializerPos);
|
||||
if (!argsbody) {
|
||||
if (!statementList) {
|
||||
return null();
|
||||
}
|
||||
handler_.addStatementToList(statementList, exprStatement);
|
||||
|
@ -654,16 +654,16 @@ class PresShell final : public nsStubDocumentObserver,
|
||||
|
||||
/**
|
||||
* Dispatch event to content only (NOT full processing)
|
||||
* @note The caller must have a strong reference to the PresShell.
|
||||
*/
|
||||
MOZ_CAN_RUN_SCRIPT
|
||||
nsresult HandleDOMEventWithTarget(nsIContent* aTargetContent,
|
||||
WidgetEvent* aEvent,
|
||||
nsEventStatus* aStatus);
|
||||
|
||||
/**
|
||||
* Dispatch event to content only (NOT full processing)
|
||||
* @note The caller must have a strong reference to the PresShell.
|
||||
*/
|
||||
MOZ_CAN_RUN_SCRIPT
|
||||
nsresult HandleDOMEventWithTarget(nsIContent* aTargetContent,
|
||||
dom::Event* aEvent, nsEventStatus* aStatus);
|
||||
|
||||
|
@ -4707,6 +4707,13 @@ nsIFrame* nsLayoutUtils::GetParentOrPlaceholderForCrossDoc(nsIFrame* aFrame) {
|
||||
return GetCrossDocParentFrame(aFrame);
|
||||
}
|
||||
|
||||
nsIFrame* nsLayoutUtils::GetDisplayListParent(nsIFrame* aFrame) {
|
||||
if (aFrame->GetStateBits() & NS_FRAME_IS_PUSHED_FLOAT) {
|
||||
return aFrame->GetParent();
|
||||
}
|
||||
return nsLayoutUtils::GetParentOrPlaceholderForCrossDoc(aFrame);
|
||||
}
|
||||
|
||||
nsIFrame* nsLayoutUtils::GetNextContinuationOrIBSplitSibling(nsIFrame* aFrame) {
|
||||
nsIFrame* result = aFrame->GetNextContinuation();
|
||||
if (result) return result;
|
||||
|
@ -1396,6 +1396,15 @@ class nsLayoutUtils {
|
||||
*/
|
||||
static nsIFrame* GetParentOrPlaceholderForCrossDoc(nsIFrame* aFrame);
|
||||
|
||||
/**
|
||||
* Returns the frame that would act as the parent of aFrame when
|
||||
* descending through the frame tree in display list building.
|
||||
* Usually the same as GetParentOrPlaceholderForCrossDoc, except
|
||||
* that pushed floats are treated as children of their containing
|
||||
* block.
|
||||
*/
|
||||
static nsIFrame* GetDisplayListParent(nsIFrame* aFrame);
|
||||
|
||||
/**
|
||||
* Get a frame's next-in-flow, or, if it doesn't have one, its
|
||||
* block-in-inline-split sibling.
|
||||
|
@ -94,7 +94,7 @@ class nsComboButtonListener final : public nsIDOMEventListener {
|
||||
public:
|
||||
NS_DECL_ISUPPORTS
|
||||
|
||||
NS_IMETHOD HandleEvent(dom::Event*) override {
|
||||
MOZ_CAN_RUN_SCRIPT_BOUNDARY NS_IMETHOD HandleEvent(dom::Event*) override {
|
||||
mComboBox->ShowDropDown(!mComboBox->IsDroppedDown());
|
||||
return NS_OK;
|
||||
}
|
||||
@ -315,7 +315,8 @@ void nsComboboxControlFrame::ShowPopup(bool aShowPopup) {
|
||||
aShowPopup ? eXULPopupShowing : eXULPopupHiding,
|
||||
nullptr, WidgetMouseEvent::eReal);
|
||||
|
||||
presShell->HandleDOMEventWithTarget(mContent, &event, &status);
|
||||
nsCOMPtr<nsIContent> content = mContent;
|
||||
presShell->HandleDOMEventWithTarget(content, &event, &status);
|
||||
}
|
||||
}
|
||||
|
||||
@ -495,7 +496,7 @@ class nsAsyncRollup : public Runnable {
|
||||
public:
|
||||
explicit nsAsyncRollup(nsComboboxControlFrame* aFrame)
|
||||
: mozilla::Runnable("nsAsyncRollup"), mFrame(aFrame) {}
|
||||
NS_IMETHOD Run() override {
|
||||
MOZ_CAN_RUN_SCRIPT_BOUNDARY NS_IMETHOD Run() override {
|
||||
if (mFrame.IsAlive()) {
|
||||
static_cast<nsComboboxControlFrame*>(mFrame.GetFrame())->RollupFromList();
|
||||
}
|
||||
|
@ -86,6 +86,7 @@ class nsComboboxControlFrame final : public nsBlockFrame,
|
||||
const ReflowInput& aReflowInput,
|
||||
nsReflowStatus& aStatus) override;
|
||||
|
||||
MOZ_CAN_RUN_SCRIPT_BOUNDARY
|
||||
virtual nsresult HandleEvent(nsPresContext* aPresContext,
|
||||
mozilla::WidgetGUIEvent* aEvent,
|
||||
nsEventStatus* aEventStatus) override;
|
||||
@ -135,16 +136,10 @@ class nsComboboxControlFrame final : public nsBlockFrame,
|
||||
virtual void SetFocus(bool aOn, bool aRepaint) override;
|
||||
|
||||
bool IsDroppedDown() { return mDroppedDown; }
|
||||
/**
|
||||
* @note This method might destroy |this|.
|
||||
*/
|
||||
void ShowDropDown(bool aDoDropDown);
|
||||
MOZ_CAN_RUN_SCRIPT void ShowDropDown(bool aDoDropDown);
|
||||
nsIFrame* GetDropDown();
|
||||
void SetDropDown(nsIFrame* aDropDownFrame);
|
||||
/**
|
||||
* @note This method might destroy |this|.
|
||||
*/
|
||||
void RollupFromList();
|
||||
MOZ_CAN_RUN_SCRIPT void RollupFromList();
|
||||
|
||||
/**
|
||||
* Return the available space before and after this frame for
|
||||
@ -212,6 +207,7 @@ class nsComboboxControlFrame final : public nsBlockFrame,
|
||||
|
||||
// nsIStatefulFrame
|
||||
mozilla::UniquePtr<mozilla::PresState> SaveState() override;
|
||||
MOZ_CAN_RUN_SCRIPT_BOUNDARY
|
||||
NS_IMETHOD RestoreState(mozilla::PresState* aState) override;
|
||||
NS_IMETHOD GenerateStateKey(nsIContent* aContent,
|
||||
mozilla::dom::Document* aDocument,
|
||||
@ -261,7 +257,7 @@ class nsComboboxControlFrame final : public nsBlockFrame,
|
||||
* Show or hide the dropdown list.
|
||||
* @note This method might destroy |this|.
|
||||
*/
|
||||
void ShowPopup(bool aShowPopup);
|
||||
MOZ_CAN_RUN_SCRIPT void ShowPopup(bool aShowPopup);
|
||||
|
||||
/**
|
||||
* Show or hide the dropdown list.
|
||||
@ -269,7 +265,7 @@ class nsComboboxControlFrame final : public nsBlockFrame,
|
||||
* @note This method might destroy |this|.
|
||||
* @return false if this frame is destroyed, true if still alive.
|
||||
*/
|
||||
bool ShowList(bool aShowList);
|
||||
MOZ_CAN_RUN_SCRIPT bool ShowList(bool aShowList);
|
||||
void CheckFireOnChange();
|
||||
void FireValueChangeEvent();
|
||||
nsresult RedisplayText();
|
||||
|
@ -297,11 +297,7 @@ bool AnyContentAncestorModified(nsIFrame* aFrame, nsIFrame* aStopAtFrame) {
|
||||
break;
|
||||
}
|
||||
|
||||
if (f->GetStateBits() & NS_FRAME_IS_PUSHED_FLOAT) {
|
||||
f = f->GetParent();
|
||||
} else {
|
||||
f = nsLayoutUtils::GetParentOrPlaceholderForCrossDoc(f);
|
||||
}
|
||||
f = nsLayoutUtils::GetDisplayListParent(f);
|
||||
}
|
||||
|
||||
return false;
|
||||
@ -1206,7 +1202,7 @@ static void AddFramesForContainingBlock(nsIFrame* aBlock,
|
||||
static void FindContainingBlocks(nsIFrame* aFrame,
|
||||
nsTArray<nsIFrame*>& aExtraFrames) {
|
||||
for (nsIFrame* f = aFrame; f;
|
||||
f = nsLayoutUtils::GetParentOrPlaceholderForCrossDoc(f)) {
|
||||
f = nsLayoutUtils::GetDisplayListParent(f)) {
|
||||
if (f->ForceDescendIntoIfVisible()) return;
|
||||
f->SetForceDescendIntoIfVisible(true);
|
||||
CRR_LOG("Considering OOFs for %p\n", f);
|
||||
|
9
layout/painting/crashtests/1549909.html
Normal file
9
layout/painting/crashtests/1549909.html
Normal file
@ -0,0 +1,9 @@
|
||||
<style>
|
||||
* {
|
||||
-webkit-column-break-after: always;
|
||||
float: left;
|
||||
column-width: 0px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
<video controls="controls">
|
@ -18,4 +18,5 @@ load 1477831-1.html
|
||||
load 1504033.html
|
||||
load 1514544-1.html
|
||||
load 1547420-1.html
|
||||
load 1549909.html
|
||||
|
||||
|
@ -278,7 +278,7 @@ fails-if(!OSX) random-if(OSX) css-multicol/multicol-rule-stacking-001.xht
|
||||
fails-if(!OSX||webrender) random-if(OSX) css-multicol/multicol-shorthand-001.xht
|
||||
|
||||
# Bug 1547160: Fix existing reftests failure related to column-span
|
||||
pref(layout.css.column-span.enabled,true) fails css-multicol/multicol-span-000.xht
|
||||
pref(layout.css.column-span.enabled,true) css-multicol/multicol-span-000.xht
|
||||
pref(layout.css.column-span.enabled,true) css-multicol/multicol-span-all-001.xht
|
||||
pref(layout.css.column-span.enabled,true) css-multicol/multicol-span-all-002.xht
|
||||
pref(layout.css.column-span.enabled,true) fails-if(!OSX) random-if(OSX) css-multicol/multicol-span-all-003.xht
|
||||
|
@ -10,7 +10,6 @@ import html5lib
|
||||
import fnmatch
|
||||
import shutil
|
||||
import string
|
||||
import sys
|
||||
import re
|
||||
|
||||
# FIXME:
|
||||
@ -39,21 +38,16 @@ gSubtrees = [
|
||||
os.path.join("selectors"),
|
||||
]
|
||||
|
||||
# Insert the properties which you want to add "-moz" prefix to
|
||||
# gPrefixedProperties.
|
||||
#
|
||||
# For example, if "columns" is in this list, all the lines in import files
|
||||
# containing "columns" are replaced with "-moz-columns."
|
||||
gPrefixedProperties = [
|
||||
"column-count",
|
||||
"column-fill",
|
||||
"column-gap",
|
||||
"column-rule",
|
||||
"column-rule-color",
|
||||
"column-rule-style",
|
||||
"column-rule-width",
|
||||
"columns",
|
||||
"column-span",
|
||||
"column-width"
|
||||
]
|
||||
|
||||
gPrefixRegexp = re.compile(
|
||||
r"([^-#]|^)(" + r"|".join(gPrefixedProperties) + r")\b")
|
||||
gPrefixRegexp = (re.compile(r"([^-#]|^)(" + r"|".join(gPrefixedProperties) + r")\b")
|
||||
if gPrefixedProperties else None)
|
||||
|
||||
# Map of about:config prefs that need toggling, for a given test subdirectory.
|
||||
# Entries should look like:
|
||||
@ -172,7 +166,6 @@ def map_file(srcname):
|
||||
if srcname in filemap:
|
||||
return filemap[srcname]
|
||||
destname = to_unix_path_sep(os.path.relpath(srcname, gSrcPath))
|
||||
destdir = os.path.dirname(destname)
|
||||
filemap[srcname] = destname
|
||||
load_flags_for(srcname, destname)
|
||||
copy_file(destname, srcname, destname, False)
|
||||
@ -260,7 +253,6 @@ def copy_and_prefix(test, aSourceFileName, aDestFileName, isSupportFile=False):
|
||||
global gTestFlags, gPrefixRegexp
|
||||
newFile = open(aDestFileName, 'wb')
|
||||
unPrefixedFile = open(aSourceFileName, 'rb')
|
||||
testName = aDestFileName[len(gDestPath)+1:]
|
||||
ahemFontAdded = False
|
||||
for line in unPrefixedFile:
|
||||
replacementLine = line
|
||||
@ -274,7 +266,8 @@ def copy_and_prefix(test, aSourceFileName, aDestFileName, isSupportFile=False):
|
||||
newFile.write(template.format(to_unix_path_sep(ahemPath)))
|
||||
ahemFontAdded = True
|
||||
|
||||
replacementLine = gPrefixRegexp.sub(r"\1-moz-\2", replacementLine)
|
||||
if gPrefixRegexp:
|
||||
replacementLine = gPrefixRegexp.sub(r"\1-moz-\2", replacementLine)
|
||||
newFile.write(replacementLine)
|
||||
|
||||
newFile.close()
|
||||
|
@ -3,7 +3,7 @@
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Multi-column element via -moz-columns: [integer]</title>
|
||||
<title>CSS Test: Multi-column element via columns: [integer]</title>
|
||||
<link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/>
|
||||
<link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
@ -32,9 +32,9 @@
|
||||
.multicol-basic-ref{
|
||||
background: yellow;
|
||||
width: 360px;
|
||||
-moz-columns: 3;
|
||||
-moz-column-gap: 0;
|
||||
-moz-column-rule: none;
|
||||
columns: 3;
|
||||
column-gap: 0;
|
||||
column-rule: none;
|
||||
}
|
||||
|
||||
.multicol-basic-ref-item{
|
||||
|
@ -3,7 +3,7 @@
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Multi-column element via -moz-column-count: [integer]</title>
|
||||
<title>CSS Test: Multi-column element via column-count: [integer]</title>
|
||||
<link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/>
|
||||
<link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
@ -32,9 +32,9 @@
|
||||
.multicol-basic-ref{
|
||||
background: yellow;
|
||||
width: 360px;
|
||||
-moz-column-count: 3;
|
||||
-moz-column-gap: 0;
|
||||
-moz-column-rule: none;
|
||||
column-count: 3;
|
||||
column-gap: 0;
|
||||
column-rule: none;
|
||||
}
|
||||
|
||||
.multicol-basic-ref-item{
|
||||
|
@ -3,7 +3,7 @@
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Multi-column element via -moz-columns: [width]</title>
|
||||
<title>CSS Test: Multi-column element via columns: [width]</title>
|
||||
<link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/>
|
||||
<link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
@ -32,9 +32,9 @@
|
||||
.multicol-basic-ref{
|
||||
background: yellow;
|
||||
width: 360px;
|
||||
-moz-columns: 120px;
|
||||
-moz-column-gap: 0;
|
||||
-moz-column-rule: none;
|
||||
columns: 120px;
|
||||
column-gap: 0;
|
||||
column-rule: none;
|
||||
}
|
||||
|
||||
.multicol-basic-ref-item{
|
||||
|
@ -3,7 +3,7 @@
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Multi-column element via -moz-column-width: [width]</title>
|
||||
<title>CSS Test: Multi-column element via column-width: [width]</title>
|
||||
<link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/>
|
||||
<link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
@ -32,9 +32,9 @@
|
||||
.multicol-basic-ref{
|
||||
background: yellow;
|
||||
width: 360px;
|
||||
-moz-column-width: 120px;
|
||||
-moz-column-gap: 0;
|
||||
-moz-column-rule: none;
|
||||
column-width: 120px;
|
||||
column-gap: 0;
|
||||
column-rule: none;
|
||||
}
|
||||
|
||||
.multicol-basic-ref-item{
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-columns as -moz-column-count (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: columns as column-count (basic)</title>
|
||||
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/>
|
||||
<link rel="match" href="reference/multicol-basic-005-ref.xht"/>
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
@ -12,13 +12,13 @@ div {
|
||||
background: yellow;
|
||||
border: thin solid black;
|
||||
width: 600px;
|
||||
-moz-columns: 3;
|
||||
-moz-column-gap: 0;
|
||||
-moz-column-rule: none;
|
||||
columns: 3;
|
||||
column-gap: 0;
|
||||
column-rule: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>This multicol element should have a width of 600 pixels and the content should be flowed into three -moz-columns with no gap or rule between them.</div>
|
||||
<div>This multicol element should have a width of 600 pixels and the content should be flowed into three columns with no gap or rule between them.</div>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-column-count (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: column-count (basic)</title>
|
||||
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/>
|
||||
<link rel="match" href="reference/multicol-basic-005-ref.xht"/>
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-multicol/#column-count"/>
|
||||
@ -11,13 +11,13 @@ div {
|
||||
background: yellow;
|
||||
border: thin solid black;
|
||||
width: 600px;
|
||||
-moz-column-count: 3;
|
||||
-moz-column-gap: 0;
|
||||
-moz-column-rule: none;
|
||||
column-count: 3;
|
||||
column-gap: 0;
|
||||
column-rule: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>This multicol element should have a width of 600 pixels and the content should be flowed into three -moz-columns with no gap or rule between them.</div>
|
||||
<div>This multicol element should have a width of 600 pixels and the content should be flowed into three columns with no gap or rule between them.</div>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-columns as -moz-column-width (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: columns as column-width (basic)</title>
|
||||
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/>
|
||||
<link rel="match" href="reference/multicol-basic-005-ref.xht"/>
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-multicol/#columns"/>
|
||||
@ -12,13 +12,13 @@ div {
|
||||
background: yellow;
|
||||
border: thin solid black;
|
||||
width: 600px;
|
||||
-moz-columns: 200px;
|
||||
-moz-column-gap: 0;
|
||||
-moz-column-rule: none;
|
||||
columns: 200px;
|
||||
column-gap: 0;
|
||||
column-rule: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>This multicol element should have a width of 600 pixels and the content should be flowed into three -moz-columns with no gap or rule between them.</div>
|
||||
<div>This multicol element should have a width of 600 pixels and the content should be flowed into three columns with no gap or rule between them.</div>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-column-width (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: column-width (basic)</title>
|
||||
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/>
|
||||
<link rel="match" href="reference/multicol-basic-005-ref.xht"/>
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-multicol/#column-width"/>
|
||||
@ -11,13 +11,13 @@ div {
|
||||
background: yellow;
|
||||
border: thin solid black;
|
||||
width: 600px;
|
||||
-moz-column-width: 200px;
|
||||
-moz-column-gap: 0;
|
||||
-moz-column-rule: none;
|
||||
column-width: 200px;
|
||||
column-gap: 0;
|
||||
column-rule: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>This multicol element should have a width of 600 pixels and the content should be flowed into three -moz-columns with no gap or rule between them.</div>
|
||||
<div>This multicol element should have a width of 600 pixels and the content should be flowed into three columns with no gap or rule between them.</div>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -23,8 +23,8 @@
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
-moz-column-count: 4;
|
||||
-moz-column-gap: 1em;
|
||||
column-count: 4;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
h4
|
||||
|
@ -23,8 +23,8 @@
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
-moz-column-count: 3;
|
||||
-moz-column-gap: 1em;
|
||||
column-count: 3;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
h4
|
||||
|
@ -9,9 +9,9 @@
|
||||
<meta name="flags" content=""/>
|
||||
<style type="text/css"><![CDATA[
|
||||
.multicol {
|
||||
-moz-column-count: 2;
|
||||
-moz-column-gap: 0;
|
||||
-moz-column-fill: auto;
|
||||
column-count: 2;
|
||||
column-gap: 0;
|
||||
column-fill: auto;
|
||||
overflow: hidden;
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
|
@ -26,9 +26,9 @@
|
||||
|
||||
div#test
|
||||
{
|
||||
-moz-column-fill: auto;
|
||||
-moz-column-gap: 0;
|
||||
-moz-column-width: 2em;
|
||||
column-fill: auto;
|
||||
column-gap: 0;
|
||||
column-width: 2em;
|
||||
|
||||
/*
|
||||
|
||||
|
@ -25,9 +25,9 @@
|
||||
|
||||
div#test
|
||||
{
|
||||
-moz-column-fill: auto;
|
||||
-moz-column-gap: 0;
|
||||
-moz-column-width: 2em;
|
||||
column-fill: auto;
|
||||
column-gap: 0;
|
||||
column-width: 2em;
|
||||
|
||||
/*
|
||||
|
||||
|
@ -25,8 +25,8 @@
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
-moz-column-count: 3;
|
||||
-moz-column-gap: 4em;
|
||||
column-count: 3;
|
||||
column-gap: 4em;
|
||||
}
|
||||
|
||||
span {color: black;}
|
||||
|
@ -26,8 +26,8 @@
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
-moz-column-count: 3;
|
||||
-moz-column-gap: 4em;
|
||||
column-count: 3;
|
||||
column-gap: 4em;
|
||||
}
|
||||
|
||||
span {color: black;}
|
||||
|
@ -32,8 +32,8 @@
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
-moz-column-count: 3;
|
||||
-moz-column-gap: 1em;
|
||||
column-count: 3;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
h4
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: columns shorthand (basic)</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="match" href="multicol-columns-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that '-moz-columns: 100px 6' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
|
||||
<meta name="assert" content="This test checks that 'columns: 100px 6' shorthand correctly set 'column-width' and 'column-count' properties." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,8 +25,8 @@
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
-moz-columns: 100px 6;
|
||||
-moz-column-gap: 0;
|
||||
columns: 100px 6;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: columns shorthand (basic)</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="match" href="multicol-columns-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that '-moz-columns: 6 100px' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
|
||||
<meta name="assert" content="This test checks that 'columns: 6 100px' shorthand correctly set 'column-width' and 'column-count' properties." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,8 +25,8 @@
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
-moz-columns: 6 100px;
|
||||
-moz-column-gap: 0;
|
||||
columns: 6 100px;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: columns shorthand (basic)</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="match" href="multicol-columns-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that '-moz-columns: 100px auto' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
|
||||
<meta name="assert" content="This test checks that 'columns: 100px auto' shorthand correctly set 'column-width' and 'column-count' properties." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,8 +25,8 @@
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
-moz-columns: 100px auto;
|
||||
-moz-column-gap: 0;
|
||||
columns: 100px auto;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: columns shorthand (basic)</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="match" href="multicol-columns-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that '-moz-columns: auto 100px' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
|
||||
<meta name="assert" content="This test checks that 'columns: auto 100px' shorthand correctly set 'column-width' and 'column-count' properties." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,8 +25,8 @@
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
-moz-columns: auto 100px;
|
||||
-moz-column-gap: 0;
|
||||
columns: auto 100px;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: columns shorthand (basic)</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="match" href="multicol-columns-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that '-moz-columns: 6' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties. '-moz-columns: 6' is equivalent to '-moz-column-width: auto' and '-moz-column-count: 6'." />
|
||||
<meta name="assert" content="This test checks that 'columns: 6' shorthand correctly set 'column-width' and 'column-count' properties. 'columns: 6' is equivalent to 'column-width: auto' and 'column-count: 6'." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,8 +25,8 @@
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
-moz-columns: 6;
|
||||
-moz-column-gap: 0;
|
||||
columns: 6;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: columns shorthand (basic)</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="match" href="multicol-columns-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that '-moz-columns: 6 auto' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
|
||||
<meta name="assert" content="This test checks that 'columns: 6 auto' shorthand correctly set 'column-width' and 'column-count' properties." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,8 +25,8 @@
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
-moz-columns: 6 auto;
|
||||
-moz-column-gap: 0;
|
||||
columns: 6 auto;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: columns shorthand (basic)</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="match" href="multicol-columns-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that '-moz-columns: auto 6' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
|
||||
<meta name="assert" content="This test checks that 'columns: auto 6' shorthand correctly set 'column-width' and 'column-count' properties." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,8 +25,8 @@
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
-moz-columns: auto 6;
|
||||
-moz-column-gap: 0;
|
||||
columns: auto 6;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: invalid -moz-columns shorthand</title>
|
||||
<title>CSS Multi-column Layout Test: invalid columns shorthand</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="match" href="multicol-columns-invalid-001-ref.xht" />
|
||||
<meta name="flags" content="ahem invalid" />
|
||||
<meta name="assert" content="This test checks that '-moz-columns: 8 normal' is invalid (generating a parsing error) and therefore will be ignored." />
|
||||
<meta name="assert" content="This test checks that 'columns: 8 normal' is invalid (generating a parsing error) and therefore will be ignored." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,9 +25,9 @@
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
-moz-column-count: 4;
|
||||
-moz-column-gap: 0;
|
||||
-moz-columns: 8 normal;
|
||||
column-count: 4;
|
||||
column-gap: 0;
|
||||
columns: 8 normal;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
|
@ -9,13 +9,13 @@
|
||||
multicol-columns-invalid-002.xht
|
||||
-->
|
||||
|
||||
<title>CSS Multi-column Layout Test: invalid -moz-columns shorthand</title>
|
||||
<title>CSS Multi-column Layout Test: invalid columns shorthand</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="match" href="multicol-columns-invalid-001-ref.xht" />
|
||||
<meta name="flags" content="ahem invalid" />
|
||||
<meta name="assert" content="This test checks that '-moz-columns: 8 auto 6em' is invalid (generating a parsing error) and therefore will be ignored." />
|
||||
<meta name="assert" content="This test checks that 'columns: 8 auto 6em' is invalid (generating a parsing error) and therefore will be ignored." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -33,9 +33,9 @@
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
-moz-column-count: 4;
|
||||
-moz-column-gap: 0;
|
||||
-moz-columns: 8 auto 6em;
|
||||
column-count: 4;
|
||||
column-gap: 0;
|
||||
columns: 8 auto 6em;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
|
@ -4,7 +4,7 @@
|
||||
<title>CSS Multi-column Layout Test: narrower inline content inside wider colum box</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="match" href="multicol-columns-invalid-001-ref.xht"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks the rendering of inline content (2em) inside wider (3em) column boxes." />
|
||||
@ -25,8 +25,8 @@
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
-moz-column-count: 4;
|
||||
-moz-column-gap: 0;
|
||||
column-count: 4;
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
|
@ -25,8 +25,8 @@
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
-moz-column-count: 3;
|
||||
-moz-column-gap: 0;
|
||||
column-count: 3;
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span
|
||||
|
@ -22,8 +22,8 @@
|
||||
position: relative;
|
||||
width: 19em;
|
||||
|
||||
-moz-column-count: 4;
|
||||
-moz-column-gap: 1em;
|
||||
column-count: 4;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
span {color: red;}
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-column-count (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: column-count (basic)</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 '-moz-column-count'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 'column-count'" />
|
||||
<link rel="match" href="multicol-columns-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that setting '-moz-column-count' should accordingly create 6 column boxes. In this test, each column box should be exactly 100px wide." />
|
||||
<meta name="assert" content="This test checks that setting 'column-count' should accordingly create 6 column boxes. In this test, each column box should be exactly 100px wide." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,8 +25,8 @@
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
-moz-column-count: 6;
|
||||
-moz-column-gap: 0;
|
||||
column-count: 6;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-column-count (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: column-count (basic)</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 '-moz-column-count'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 'column-count'" />
|
||||
<link rel="match" href="multicol-count-002-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that setting '-moz-column-count' should accordingly create 4 column boxes. In this test, each column box should be exactly 5em wide." />
|
||||
<meta name="assert" content="This test checks that setting 'column-count' should accordingly create 4 column boxes. In this test, each column box should be exactly 5em wide." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -30,8 +30,8 @@
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
|
||||
-moz-column-count: 4;
|
||||
-moz-column-gap: 0;
|
||||
column-count: 4;
|
||||
column-gap: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-column-rule and overflow inside (complex test)</title>
|
||||
<title>CSS Multi-column Layout Test: column-rule and overflow inside (complex test)</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-29 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="match" href="multicol-count-computed-003-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should not be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should not be clipped and should overlappe partially the 1st -moz-column-rule." />
|
||||
<meta name="assert" content="This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should not be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should not be clipped and should overlappe partially the 1st column-rule." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,22 +25,22 @@
|
||||
widows: 1;
|
||||
width: 13em;
|
||||
|
||||
-moz-column-count: 3;
|
||||
-moz-column-gap: 5em;
|
||||
-moz-column-rule-color: blue;
|
||||
-moz-column-rule-style: solid;
|
||||
-moz-column-rule-width: 1.5em;
|
||||
column-count: 3;
|
||||
column-gap: 5em;
|
||||
column-rule-color: blue;
|
||||
column-rule-style: solid;
|
||||
column-rule-width: 1.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
(11) if (-moz-column-width = auto) and (-moz-column-count != auto) then
|
||||
(12) N := -moz-column-count;
|
||||
(13) W := max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
|
||||
(11) if (column-width = auto) and (column-count != auto) then
|
||||
(12) N := column-count;
|
||||
(13) W := max(0, (available-width - ((N - 1) * column-gap)) / N);
|
||||
(14) exit;
|
||||
|
||||
So, the used -moz-column-count in this test is 3.
|
||||
So, the used column-count in this test is 3.
|
||||
|
||||
W := max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
|
||||
W := max(0, (available-width - ((N - 1) * column-gap)) / N);
|
||||
W == max(0, (13em - ((3 - 1) * 5em)) / 3);
|
||||
W == max(0, (13em - (2 * 5em)) / 3);
|
||||
W == max(0, (13em - (10em)) / 3);
|
||||
@ -48,7 +48,7 @@
|
||||
W == max(0, 1em);
|
||||
W == 1em;
|
||||
|
||||
So, the used -moz-column-width in this test is 1em.
|
||||
So, the used column-width in this test is 1em.
|
||||
*/
|
||||
|
||||
#pink {color: pink;}
|
||||
@ -63,14 +63,14 @@
|
||||
"
|
||||
https://drafts.csswg.org/css-multicol-1/#overflow-inside-multicol-elements
|
||||
this causes the right-half (0.5em) of the 'K' glyph to
|
||||
overlap the right-half (0.75em) of the 1st blue -moz-column-rule.
|
||||
overlap the right-half (0.75em) of the 1st blue column-rule.
|
||||
Same thing should happen to the 'N' glyph of 'ORAN'.
|
||||
|
||||
Because no inline content should be rendered into the
|
||||
3rd column box, this causes the 2nd column rule not
|
||||
been rendered because
|
||||
"
|
||||
Column rules are only drawn between two -moz-columns that
|
||||
Column rules are only drawn between two columns that
|
||||
both have content.
|
||||
"
|
||||
http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: both '-moz-column-width' and '-moz-column-count' are 'auto'</title>
|
||||
<title>CSS Multi-column Layout Test: both 'column-width' and 'column-count' are 'auto'</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-29 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" />
|
||||
<link rel="match" href="multicol-count-computed-004-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that if '-moz-column-width' is 'auto' and if '-moz-column-count' is 'auto', then such element will not behave like a multi-column element and -moz-column-gap and -moz-column-rule declarations will be ignored." />
|
||||
<meta name="assert" content="This test checks that if 'column-width' is 'auto' and if 'column-count' is 'auto', then such element will not behave like a multi-column element and column-gap and column-rule declarations will be ignored." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,11 +25,11 @@
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
-moz-column-count: auto;
|
||||
-moz-column-gap: 7em;
|
||||
-moz-column-rule-color: red;
|
||||
-moz-column-rule-width: 1.5em;
|
||||
-moz-column-rule-style: solid;
|
||||
column-count: auto;
|
||||
column-gap: 7em;
|
||||
column-rule-color: red;
|
||||
column-rule-width: 1.5em;
|
||||
column-rule-style: solid;
|
||||
}
|
||||
|
||||
#pink {color: pink;}
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-column-rule and overflow inside (complex test)</title>
|
||||
<title>CSS Multi-column Layout Test: column-rule and overflow inside (complex test)</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-03 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="match" href="multicol-count-computed-003-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should not be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should not be partially clipped and should overlap partially with the 1st -moz-column-rule." />
|
||||
<meta name="assert" content="This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should not be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should not be partially clipped and should overlap partially with the 1st column-rule." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,34 +25,34 @@
|
||||
widows: 1;
|
||||
width: 13em;
|
||||
|
||||
-moz-column-gap: 5em;
|
||||
-moz-column-rule-color: blue;
|
||||
-moz-column-rule-style: solid;
|
||||
-moz-column-rule-width: 1.5em;
|
||||
-moz-column-width: 1em;
|
||||
column-gap: 5em;
|
||||
column-rule-color: blue;
|
||||
column-rule-style: solid;
|
||||
column-rule-width: 1.5em;
|
||||
column-width: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
(15) if (-moz-column-width != auto) and (-moz-column-count = auto) then
|
||||
(16) N := max(1, floor((available-width + -moz-column-gap) / (-moz-column-width + -moz-column-gap)));
|
||||
(17) W := ((available-width + -moz-column-gap) / N) - -moz-column-gap;
|
||||
(15) if (column-width != auto) and (column-count = auto) then
|
||||
(16) N := max(1, floor((available-width + column-gap) / (column-width + column-gap)));
|
||||
(17) W := ((available-width + column-gap) / N) - column-gap;
|
||||
(18) exit;
|
||||
|
||||
N := max(1, floor((available-width + -moz-column-gap) / (-moz-column-width + -moz-column-gap)));
|
||||
N := max(1, floor((available-width + column-gap) / (column-width + column-gap)));
|
||||
N == max(1, floor((13em + 5em) / (1em + 5em)));
|
||||
N == max(1, floor(18em / 6em));
|
||||
N == max(1, floor(3));
|
||||
N == 3;
|
||||
|
||||
So, the used -moz-column-count in this test is 3.
|
||||
So, the used column-count in this test is 3.
|
||||
|
||||
W := ((available-width + -moz-column-gap) / N) - -moz-column-gap;
|
||||
W := ((available-width + column-gap) / N) - column-gap;
|
||||
W == ((13em + 5em) / 3) - 5em;
|
||||
W == ((18em) / 3) - 5em;
|
||||
W == (6em) - 5em;
|
||||
W == 1em;
|
||||
|
||||
So, the used -moz-column-width in this test is 1em.
|
||||
So, the used column-width in this test is 1em.
|
||||
*/
|
||||
|
||||
#pink {color: pink;}
|
||||
@ -67,14 +67,14 @@
|
||||
"
|
||||
http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements
|
||||
this causes the right-half (0.5em) of the 'K' glyph to
|
||||
overlap with the right-half (0.75em) of the 1st blue -moz-column-rule.
|
||||
overlap with the right-half (0.75em) of the 1st blue column-rule.
|
||||
Same thing should happen to the 'N' glyph of 'ORAN'.
|
||||
|
||||
Because no inline content should be rendered into the
|
||||
3rd column box, this causes the 2nd column rule not
|
||||
been rendered because
|
||||
"
|
||||
Column rules are only drawn between two -moz-columns that
|
||||
Column rules are only drawn between two columns that
|
||||
both have content.
|
||||
"
|
||||
http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: negative '-moz-column-count' value</title>
|
||||
<title>CSS Multi-column Layout Test: negative 'column-count' value</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="match" href="multicol-columns-invalid-001-ref.xht" />
|
||||
<meta name="flags" content="ahem invalid" />
|
||||
<meta name="assert" content="This test checks that a specified negative '-moz-column-count' value is invalid and ignored." />
|
||||
<meta name="assert" content="This test checks that a specified negative 'column-count' value is invalid and ignored." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,9 +25,9 @@
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
-moz-column-count: 4;
|
||||
-moz-column-count: -1;
|
||||
-moz-column-gap: 0;
|
||||
column-count: 4;
|
||||
column-count: -1;
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: zero '-moz-column-count' value</title>
|
||||
<title>CSS Multi-column Layout Test: zero 'column-count' value</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="match" href="multicol-columns-invalid-001-ref.xht" />
|
||||
<meta name="flags" content="ahem invalid" />
|
||||
<meta name="assert" content="This test checks that a specified 0 '-moz-column-count' value is invalid and ignored." />
|
||||
<meta name="assert" content="This test checks that a specified 0 'column-count' value is invalid and ignored." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,9 +25,9 @@
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
-moz-column-count: 4;
|
||||
-moz-column-count: 0; /* invalid; must be a greater-than-zero integer */
|
||||
-moz-column-gap: 0;
|
||||
column-count: 4;
|
||||
column-count: 0; /* invalid; must be a greater-than-zero integer */
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: non-integer '-moz-column-count' value</title>
|
||||
<title>CSS Multi-column Layout Test: non-integer 'column-count' value</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' type" />
|
||||
<link rel="match" href="multicol-columns-invalid-001-ref.xht" />
|
||||
<meta name="flags" content="ahem invalid" />
|
||||
<meta name="assert" content="This test checks that a specified real '-moz-column-count' value is invalid and ignored." />
|
||||
<meta name="assert" content="This test checks that a specified real 'column-count' value is invalid and ignored." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,9 +25,9 @@
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
-moz-column-count: 4;
|
||||
-moz-column-count: 2.1; /* invalid; must be an integer */
|
||||
-moz-column-gap: 0;
|
||||
column-count: 4;
|
||||
column-count: 2.1; /* invalid; must be an integer */
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: non-integer '-moz-column-count' value</title>
|
||||
<title>CSS Multi-column Layout Test: non-integer 'column-count' value</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' type" />
|
||||
<link rel="match" href="multicol-columns-invalid-001-ref.xht" />
|
||||
<meta name="flags" content="ahem invalid" />
|
||||
<meta name="assert" content="This test checks that a specified real '-moz-column-count' value is invalid and ignored." />
|
||||
<meta name="assert" content="This test checks that a specified real 'column-count' value is invalid and ignored." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,9 +25,9 @@
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
-moz-column-count: 4;
|
||||
-moz-column-count: 1.9; /* invalid; must be an integer */
|
||||
-moz-column-gap: 0;
|
||||
column-count: 4;
|
||||
column-count: 1.9; /* invalid; must be an integer */
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: non-integer '-moz-column-count' value</title>
|
||||
<title>CSS Multi-column Layout Test: non-integer 'column-count' value</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' type" />
|
||||
<link rel="match" href="multicol-columns-invalid-001-ref.xht" />
|
||||
<meta name="flags" content="ahem invalid" />
|
||||
<meta name="assert" content="This test checks that a specified real '-moz-column-count' value is invalid and ignored." />
|
||||
<meta name="assert" content="This test checks that a specified real 'column-count' value is invalid and ignored." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,9 +25,9 @@
|
||||
widows: 1;
|
||||
width: 12em;
|
||||
|
||||
-moz-column-count: 4;
|
||||
-moz-column-count: 2.0; /* invalid; must be an integer */
|
||||
-moz-column-gap: 0;
|
||||
column-count: 4;
|
||||
column-count: 2.0; /* invalid; must be an integer */
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-column-fill: balance (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: column-fill: balance (basic)</title>
|
||||
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 '-moz-column-fill'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 'column-fill'" />
|
||||
<link rel="match" href="multicol-fill-000-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that content is balanced into all -moz-columns thanks to '-moz-column-fill: balance'." />
|
||||
<meta name="assert" content="This test checks that content is balanced into all columns thanks to 'column-fill: balance'." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -26,9 +26,9 @@
|
||||
|
||||
div.test
|
||||
{
|
||||
-moz-columns: 3;
|
||||
-moz-column-fill: balance;
|
||||
-moz-column-gap: 0em;
|
||||
columns: 3;
|
||||
column-fill: balance;
|
||||
column-gap: 0em;
|
||||
|
||||
/*
|
||||
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-column-fill: balance with set height (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: column-fill: balance with set height (basic)</title>
|
||||
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 '-moz-column-fill'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 'column-fill'" />
|
||||
<link rel="match" href="multicol-fill-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that content is balanced into all -moz-columns of a multi-column element with a set height thanks to '-moz-column-fill: balance'." />
|
||||
<meta name="assert" content="This test checks that content is balanced into all columns of a multi-column element with a set height thanks to 'column-fill: balance'." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -27,9 +27,9 @@
|
||||
|
||||
div#test
|
||||
{
|
||||
-moz-columns: 2;
|
||||
-moz-column-fill: balance;
|
||||
-moz-column-gap: 0em;
|
||||
columns: 2;
|
||||
column-fill: balance;
|
||||
column-gap: 0em;
|
||||
|
||||
/*
|
||||
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: '-moz-column-fill: auto' (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: 'column-fill: auto' (basic)</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 '-moz-column-fill'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 'column-fill'" />
|
||||
<link rel="match" href="multicol-fill-auto-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that '-moz-column-fill: auto' fills the column boxes of a multi-colum element sequentially with inline content and does not bother about balancing content of column boxes." />
|
||||
<meta name="assert" content="This test checks that 'column-fill: auto' fills the column boxes of a multi-colum element sequentially with inline content and does not bother about balancing content of column boxes." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -24,9 +24,9 @@
|
||||
widows: 1;
|
||||
width: 32em;
|
||||
|
||||
-moz-column-count: 3;
|
||||
-moz-column-fill: auto;
|
||||
-moz-column-gap: 1em;
|
||||
column-count: 3;
|
||||
column-fill: auto;
|
||||
column-gap: 1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
@ -2,7 +2,7 @@
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>multicolumn | -moz-column-fill-auto</title>
|
||||
<title>multicolumn | column-fill-auto</title>
|
||||
<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<style type="text/css"><![CDATA[
|
||||
@ -25,9 +25,9 @@ body>div {
|
||||
margin: 1em;
|
||||
}
|
||||
div.col {
|
||||
-moz-column-count: 2;
|
||||
-moz-column-fill: auto;
|
||||
-moz-column-gap: 0;
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 0;
|
||||
}
|
||||
div.red {
|
||||
background: red; position: absolute; z-index: -1;
|
||||
|
@ -2,8 +2,8 @@
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>multicolumn | -moz-column-fill-auto</title>
|
||||
<meta name="assert" content="This test checks that -moz-columns are not balanced when '-moz-column-fill: auto' is set"/>
|
||||
<title>multicolumn | column-fill-auto</title>
|
||||
<meta name="assert" content="This test checks that columns are not balanced when 'column-fill: auto' is set"/>
|
||||
<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/>
|
||||
<link rel="match" href="multicol-fill-auto-002-ref.xht"/>
|
||||
@ -28,9 +28,9 @@ body>div {
|
||||
margin: 1em;
|
||||
}
|
||||
div.col {
|
||||
-moz-column-count: 2;
|
||||
-moz-column-fill: auto;
|
||||
-moz-column-gap: 0;
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 0;
|
||||
}
|
||||
div.red {
|
||||
background: red; position: absolute; z-index: -1;
|
||||
|
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: '-moz-column-fill: auto' (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: 'column-fill: auto' (basic)</title>
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-01 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 '-moz-column-fill'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 'column-fill'" />
|
||||
<link rel="match" href="multicol-fill-auto-003-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks if inline content fills column boxes sequentially when '-moz-column-fill' is set to 'auto'." />
|
||||
<meta name="assert" content="This test checks if inline content fills column boxes sequentially when 'column-fill' is set to 'auto'." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,10 +25,10 @@
|
||||
height: 6em;
|
||||
width: 21em;
|
||||
|
||||
-moz-column-count: 2;
|
||||
-moz-column-fill: auto;
|
||||
-moz-column-gap: 1em;
|
||||
-moz-column-rule: yellow solid 1em;
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 1em;
|
||||
column-rule: yellow solid 1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
@ -55,7 +55,7 @@
|
||||
|
||||
The digits are the green squares, the white squares
|
||||
are the blank white spaces. The yellow vertical stripe
|
||||
represent both the -moz-column-gap and the -moz-column-rule.
|
||||
represent both the column-gap and the column-rule.
|
||||
The "3" glyph at line 5 of 1st column box should be
|
||||
overlapping the red square.
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>multicol | -moz-column-span: all | -moz-column-fill: auto</title>
|
||||
<title>multicol | column-span: all | column-fill: auto</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/>
|
||||
<link rel="match" href="multicol-fill-auto-block-children-ref.xht"/>
|
||||
@ -15,12 +15,12 @@ body {
|
||||
background: blue;
|
||||
width: 1200px;
|
||||
height: 492px;
|
||||
-moz-column-count: 3;
|
||||
-moz-column-gap: 2em;
|
||||
-moz-column-fill: auto;
|
||||
column-count: 3;
|
||||
column-gap: 2em;
|
||||
column-fill: auto;
|
||||
}
|
||||
h1 {
|
||||
-moz-column-span: all;
|
||||
column-span: all;
|
||||
font-size: 2em;
|
||||
height: 70px;
|
||||
}
|
||||
|
@ -1,15 +1,15 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: '-moz-column-fill: auto' and '-moz-column-span: all' (complex)</title>
|
||||
<title>CSS Multi-column Layout Test: 'column-fill: auto' and 'column-span: all' (complex)</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements" />
|
||||
<link rel="match" href="multicol-fill-auto-block-children-002-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="This test checks that if '-moz-column-fill' is set to 'auto' and a multicolumn element content is solely made of block container boxes, then it should fill column boxes sequentially with such content and, in this test, it should overflow outside of it. This test relies on the idea that a '-moz-column-span: all' element will occupy more space in a multi-column element than a '-moz-column-span: none' element, therefore reducing available space for content in column boxes." />
|
||||
<meta name="assert" content="This test checks that if 'column-fill' is set to 'auto' and a multicolumn element content is solely made of block container boxes, then it should fill column boxes sequentially with such content and, in this test, it should overflow outside of it. This test relies on the idea that a 'column-span: all' element will occupy more space in a multi-column element than a 'column-span: none' element, therefore reducing available space for content in column boxes." />
|
||||
<style type="text/css"><![CDATA[
|
||||
html {background-color: white;}
|
||||
|
||||
@ -20,15 +20,15 @@
|
||||
margin: 8px;
|
||||
width: 60%;
|
||||
|
||||
-moz-column-count: 3;
|
||||
-moz-column-fill: auto;
|
||||
-moz-column-gap: 10px;
|
||||
column-count: 3;
|
||||
column-fill: auto;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
color: white;
|
||||
-moz-column-span: all;
|
||||
column-span: all;
|
||||
font-size: 2em;
|
||||
line-height: 1.25; /* or 1.21875 to achieve a 39px tall line box */
|
||||
margin: 21px 0em;
|
||||
|
@ -2,7 +2,7 @@
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>multicol | -moz-column-span: all | -moz-column-fill: auto</title>
|
||||
<title>multicol | column-span: all | column-fill: auto</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
|
||||
<style type="text/css"><![CDATA[
|
||||
html {
|
||||
|
@ -2,7 +2,7 @@
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>multicolumn | -moz-column-fill</title>
|
||||
<title>multicolumn | column-fill</title>
|
||||
<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<style type="text/css"><![CDATA[
|
||||
@ -25,9 +25,9 @@ body>div {
|
||||
margin: 1em;
|
||||
}
|
||||
div.col {
|
||||
-moz-column-count: 2;
|
||||
-moz-column-fill: balance;
|
||||
-moz-column-gap: 0;
|
||||
column-count: 2;
|
||||
column-fill: balance;
|
||||
column-gap: 0;
|
||||
}
|
||||
div.red {
|
||||
background: red; position: absolute; z-index: -1;
|
||||
|
@ -2,8 +2,8 @@
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>multicolumn | -moz-column-fill</title>
|
||||
<meta name="assert" content="This test checks that -moz-columns are properly balanced when '-moz-column-fill: balance' is set"/>
|
||||
<title>multicolumn | column-fill</title>
|
||||
<meta name="assert" content="This test checks that columns are properly balanced when 'column-fill: balance' is set"/>
|
||||
<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/>
|
||||
<link rel="match" href="multicol-fill-balance-001-ref.xht"/>
|
||||
@ -28,9 +28,9 @@ body>div {
|
||||
margin: 1em;
|
||||
}
|
||||
div.col {
|
||||
-moz-column-count: 2;
|
||||
-moz-column-fill: balance;
|
||||
-moz-column-gap: 0;
|
||||
column-count: 2;
|
||||
column-fill: balance;
|
||||
column-gap: 0;
|
||||
}
|
||||
div.red {
|
||||
background: red; position: absolute; z-index: -1;
|
||||
|
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<title>CSS Multi-column Layout Test: Balancing with more forced breaks than -moz-columns</title>
|
||||
<title>CSS Multi-column Layout Test: Balancing with more forced breaks than columns</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf" title="7.1. -moz-column-fill">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf" title="7.1. column-fill">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<meta name="assert" content="This multicol container will create overflowing -moz-columns, no matter what, due to forced break. Don't overstretch.">
|
||||
<meta name="assert" content="This multicol container will create overflowing columns, no matter what, due to forced break. Don't overstretch.">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div style="-moz-columns:2; -moz-column-gap:0; width:100px; background:green;">
|
||||
<div style="columns:2; column-gap:0; width:100px; background:green;">
|
||||
<div style="height:100px;"></div>
|
||||
<div style="break-before:column; height:90px;"></div>
|
||||
<div style="break-before:column; height:10px;"></div>
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-column-gap (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: column-gap (basic)</title>
|
||||
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 '-moz-column-gap'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 'column-gap'" />
|
||||
<link rel="match" href="multicol-gap-000-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that column gap appears between two -moz-columns." />
|
||||
<meta name="assert" content="This test checks that column gap appears between two columns." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -28,8 +28,8 @@
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
-moz-column-width: 10em;
|
||||
-moz-column-gap: 10em;
|
||||
column-width: 10em;
|
||||
column-gap: 10em;
|
||||
}
|
||||
|
||||
span {color: yellow;}
|
||||
|
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: '-moz-column-gap: normal'</title>
|
||||
<title>CSS Multi-column Layout Test: 'column-gap: normal'</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" />
|
||||
<link rel="match" href="multicol-gap-001-ref.xht" />
|
||||
<meta name="flags" content="ahem may" />
|
||||
<meta name="assert" content="This test checks that the 'normal' column gap is 1em, which is suggested -- and not prescribed -- by the specification." />
|
||||
@ -28,8 +28,8 @@
|
||||
|
||||
div.multicol
|
||||
{
|
||||
-moz-column-gap: normal;
|
||||
-moz-column-width: 1em;
|
||||
column-gap: normal;
|
||||
column-width: 1em;
|
||||
}
|
||||
|
||||
span {padding-right: 1em;}
|
||||
|
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-column-gap (basic)</title>
|
||||
<title>CSS Multi-column Layout Test: column-gap (basic)</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" />
|
||||
<link rel="match" href="multicol-gap-002-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@ -24,8 +24,8 @@
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
-moz-column-count: 4;
|
||||
-moz-column-gap: 1em;
|
||||
column-count: 4;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
|
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: '-moz-column-gap: normal'</title>
|
||||
<title>CSS Multi-column Layout Test: 'column-gap: normal'</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" />
|
||||
<link rel="match" href="multicol-gap-002-ref.xht" />
|
||||
<meta name="flags" content="ahem may" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@ -24,8 +24,8 @@
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
-moz-column-count: 4;
|
||||
-moz-column-gap: normal;
|
||||
column-count: 4;
|
||||
column-gap: normal;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
|
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: '-moz-column-gap' with increasing values</title>
|
||||
<title>CSS Multi-column Layout Test: 'column-gap' with increasing values</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" />
|
||||
<link rel="match" href="multicol-gap-fraction-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@ -22,15 +22,15 @@
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
-moz-column-count: 2;
|
||||
-moz-column-gap: 0.5em;
|
||||
column-count: 2;
|
||||
column-gap: 0.5em;
|
||||
}
|
||||
|
||||
#two {-moz-column-gap: 2.5em;}
|
||||
#two {column-gap: 2.5em;}
|
||||
|
||||
#three {-moz-column-gap: 4.5em;}
|
||||
#three {column-gap: 4.5em;}
|
||||
|
||||
#four {-moz-column-gap: 6.5em;}
|
||||
#four {column-gap: 6.5em;}
|
||||
|
||||
span {color: blue;}
|
||||
]]></style>
|
||||
|
@ -1,68 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<title>CSS Multi-column Layout Test: '-moz-column-gap' with sub-pixel values</title>
|
||||
<title>CSS Multi-column Layout Test: 'column-gap' with sub-pixel values</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'">
|
||||
<link rel="match" href="../reference/nothing.html" />
|
||||
<meta name="assert" content="Specified -moz-column-gap should never be rounded up to the nearest integer, or the second column in the tests might overflow the multicol container in the inline direction.">
|
||||
<meta name="assert" content="Specified column-gap should never be rounded up to the nearest integer, or the second column in the tests might overflow the multicol container in the inline direction.">
|
||||
<style>
|
||||
.multicol { margin:10px; float:left; -moz-columns:2; width:50px; -moz-column-gap:10.9px; -moz-column-fill:auto; height:50px; background:white; }
|
||||
.multicol { margin:10px; float:left; columns:2; width:50px; column-gap:10.9px; column-fill:auto; height:50px; background:white; }
|
||||
.filler { height:50px; }
|
||||
.below-everything { position:relative; z-index:-1; float:right; width:20px; height:20px; background:red; }
|
||||
</style>
|
||||
|
||||
<p>There should be nothing below.</p>
|
||||
|
||||
<div class="multicol" style="-moz-column-gap:10px;">
|
||||
<div class="multicol" style="column-gap:10px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="-moz-column-gap:10.1px;">
|
||||
<div class="multicol" style="column-gap:10.1px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="-moz-column-gap:10.2px;">
|
||||
<div class="multicol" style="column-gap:10.2px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="-moz-column-gap:10.3px;">
|
||||
<div class="multicol" style="column-gap:10.3px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="-moz-column-gap:10.4px;">
|
||||
<div class="multicol" style="column-gap:10.4px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="-moz-column-gap:10.5px;">
|
||||
<div class="multicol" style="column-gap:10.5px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="-moz-column-gap:10.6px;">
|
||||
<div class="multicol" style="column-gap:10.6px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="-moz-column-gap:10.7px;">
|
||||
<div class="multicol" style="column-gap:10.7px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="-moz-column-gap:10.8px;">
|
||||
<div class="multicol" style="column-gap:10.8px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="-moz-column-gap:10.9px;">
|
||||
<div class="multicol" style="column-gap:10.9px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
||||
<div class="multicol" style="-moz-column-gap:11px;">
|
||||
<div class="multicol" style="column-gap:11px;">
|
||||
<div class="filler"></div>
|
||||
<div class="below-everything"></div>
|
||||
</div>
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: '-moz-column-gap' with large value</title>
|
||||
<title>CSS Multi-column Layout Test: 'column-gap' with large value</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 '-moz-column-gap" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 'column-gap" />
|
||||
<link rel="match" href="multicol-gap-large-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that when '-moz-column-gap' is large and when used '-moz-column-width' is narrow, then content extends into -moz-column-gap and content can extend, overflow outside the edges of the multi-colum element if 'overflow' is set to 'visible'." />
|
||||
<meta name="assert" content="This test checks that when 'column-gap' is large and when used 'column-width' is narrow, then content extends into column-gap and content can extend, overflow outside the edges of the multi-colum element if 'overflow' is set to 'visible'." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -25,8 +25,8 @@
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
-moz-column-count: 4;
|
||||
-moz-column-gap: 4em;
|
||||
column-count: 4;
|
||||
column-gap: 4em;
|
||||
|
||||
/*
|
||||
N == 4;
|
||||
@ -35,11 +35,11 @@
|
||||
|
||||
/*
|
||||
In this test, the content of first 3 column
|
||||
boxes extend into middle of -moz-column-gap and
|
||||
boxes extend into middle of column-gap and
|
||||
content of the 4th column box extend outside the
|
||||
right edge of multi-column. The gray border-right of
|
||||
multi-column elemen overlaps partially the 3rd
|
||||
-moz-column-gap.
|
||||
column-gap.
|
||||
*/
|
||||
}
|
||||
|
||||
|
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: '-moz-column-gap' with large value</title>
|
||||
<title>CSS Multi-column Layout Test: 'column-gap' with large value</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 '-moz-column-gap" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 'column-gap" />
|
||||
<link rel="match" href="multicol-gap-large-002-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@ -24,8 +24,8 @@
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
-moz-column-count: 2;
|
||||
-moz-column-gap: 4em;
|
||||
column-count: 2;
|
||||
column-gap: 4em;
|
||||
|
||||
/*
|
||||
N == 2;
|
||||
|
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-column-gap with negative value</title>
|
||||
<title>CSS Multi-column Layout Test: column-gap with negative value</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" />
|
||||
<link rel="match" href="multicol-gap-002-ref.xht" />
|
||||
<meta name="flags" content="ahem invalid" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@ -24,9 +24,9 @@
|
||||
widows: 1;
|
||||
width: 11em;
|
||||
|
||||
-moz-column-count: 4;
|
||||
-moz-column-gap: 1em;
|
||||
-moz-column-gap: -1em;
|
||||
column-count: 4;
|
||||
column-gap: 1em;
|
||||
column-gap: -1em;
|
||||
}
|
||||
|
||||
span {color: blue;}
|
||||
|
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: -moz-column-count and height</title>
|
||||
<title>CSS Multi-column Layout Test: column-count and height</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" />
|
||||
<link rel="match" href="multicol-height-001-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that length of column rules is equal to the length of the -moz-columns and if a nth column box overflows outside the available width of a multi-column element, then an (n-1)th column rule should be drawn. In this test, a 3rd column box is created outside the content edge of the multi-column element: therefore, a 2nd blue column rule should be drawn accordingly." />
|
||||
<meta name="assert" content="This test checks that length of column rules is equal to the length of the columns and if a nth column box overflows outside the available width of a multi-column element, then an (n-1)th column rule should be drawn. In this test, a 3rd column box is created outside the content edge of the multi-column element: therefore, a 2nd blue column rule should be drawn accordingly." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -22,10 +22,10 @@
|
||||
height: 8em;
|
||||
width: 14em;
|
||||
|
||||
-moz-column-count: 2;
|
||||
-moz-column-fill: auto;
|
||||
-moz-column-gap: 2em;
|
||||
-moz-column-rule: blue solid 10px;
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 2em;
|
||||
column-rule: blue solid 10px;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
@ -23,8 +23,8 @@
|
||||
height: 8em;
|
||||
width: 14em;
|
||||
|
||||
-moz-column-count: 2;
|
||||
-moz-column-gap: 2em;
|
||||
column-count: 2;
|
||||
column-gap: 2em;
|
||||
|
||||
/*
|
||||
|
||||
@ -40,13 +40,13 @@
|
||||
div#outer
|
||||
{
|
||||
color: black;
|
||||
-moz-column-fill: auto;
|
||||
column-fill: auto;
|
||||
}
|
||||
|
||||
div#inner
|
||||
{
|
||||
color: orange;
|
||||
-moz-column-fill: balance;
|
||||
column-fill: balance;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
@ -21,14 +21,14 @@
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img.-moz-column-gap {margin-right: 2em;}
|
||||
img.column-gap {margin-right: 2em;}
|
||||
|
||||
img#last {padding-right: 0em;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png"
|
||||
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png"
|
||||
width="40" height="60" alt="Image download support must be enabled" /><img id="last" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
|
@ -22,8 +22,8 @@
|
||||
|
||||
body > div
|
||||
{
|
||||
-moz-column-count: 3;
|
||||
-moz-column-gap: 1em;
|
||||
column-count: 3;
|
||||
column-gap: 1em;
|
||||
|
||||
/*
|
||||
N == 3;
|
||||
|
@ -17,7 +17,7 @@
|
||||
|
||||
img {vertical-align: top;}
|
||||
|
||||
img.-moz-column-gap
|
||||
img.column-gap
|
||||
{
|
||||
margin-left: -2em;
|
||||
margin-right: 3em;
|
||||
@ -33,7 +33,7 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img id="last" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /></div>
|
||||
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img class="column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img class="column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img id="last" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,14 +1,14 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Multi-column Layout Test: '-moz-column-count' and inherit</title>
|
||||
<title>CSS Multi-column Layout Test: 'column-count' and inherit</title>
|
||||
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 '-moz-column-count'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 'column-count'" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" />
|
||||
<link rel="match" href="multicol-inherit-002-ref.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that '-moz-column-count' can be inherited by setting it with the CSS-wide keyword 'inherit'." />
|
||||
<meta name="assert" content="This test checks that 'column-count' can be inherited by setting it with the CSS-wide keyword 'inherit'." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -19,8 +19,8 @@
|
||||
body > div
|
||||
{
|
||||
background-color: blue;
|
||||
-moz-column-count: 3;
|
||||
-moz-column-gap: 1em;
|
||||
column-count: 3;
|
||||
column-gap: 1em;
|
||||
font: 1.25em/1 Ahem;
|
||||
width: 32em;
|
||||
|
||||
@ -54,8 +54,8 @@
|
||||
div > div
|
||||
{
|
||||
background-color: yellow;
|
||||
-moz-column-count: inherit;
|
||||
-moz-column-gap: 1em;
|
||||
column-count: inherit;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
div > div:first-child {margin-top: 0;}
|
||||
|
@ -19,7 +19,7 @@ body {
|
||||
}
|
||||
body>div {
|
||||
height: 2em;
|
||||
-moz-column-width: 8em;
|
||||
column-width: 8em;
|
||||
}
|
||||
div {
|
||||
font-family: ahem;
|
||||
|
@ -23,8 +23,8 @@
|
||||
padding: 0em;
|
||||
width: 10em;
|
||||
|
||||
-moz-column-gap: 0em;
|
||||
-moz-column-width: 5em;
|
||||
column-gap: 0em;
|
||||
column-width: 5em;
|
||||
}
|
||||
|
||||
li, span {font-size: 1em;}
|
||||
|
@ -7,7 +7,7 @@
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that the margin-top of the first child of a multi-column element (with -moz-column-fill: auto) does not collapse with its parent." />
|
||||
<meta name="assert" content="This test checks that the margin-top of the first child of a multi-column element (with column-fill: auto) does not collapse with its parent." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -24,9 +24,9 @@
|
||||
margin-top: 0em;
|
||||
width: 4em;
|
||||
|
||||
-moz-column-count: 2;
|
||||
-moz-column-fill: auto;
|
||||
-moz-column-gap: 0em;
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 0em;
|
||||
}
|
||||
|
||||
div#first-child {margin-top: 2em;}
|
||||
|
@ -7,7 +7,7 @@
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="This test checks that the margin-top of the first child (an inline-block) of a multi-column element (with -moz-column-fill: balance) does not collapse with its parent." />
|
||||
<meta name="assert" content="This test checks that the margin-top of the first child (an inline-block) of a multi-column element (with column-fill: balance) does not collapse with its parent." />
|
||||
<style type="text/css"><![CDATA[
|
||||
@font-face {
|
||||
font-family: Ahem;
|
||||
@ -24,9 +24,9 @@
|
||||
margin-top: 0em;
|
||||
width: 4em;
|
||||
|
||||
-moz-column-count: 2;
|
||||
-moz-column-fill: balance;
|
||||
-moz-column-gap: 0em;
|
||||
column-count: 2;
|
||||
column-fill: balance;
|
||||
column-gap: 0em;
|
||||
}
|
||||
|
||||
span
|
||||
|
@ -23,9 +23,9 @@
|
||||
font: 1.25em/1 Ahem;
|
||||
width: 10em;
|
||||
|
||||
-moz-column-count: 2;
|
||||
-moz-column-fill: balance;
|
||||
-moz-column-gap: 0em;
|
||||
column-count: 2;
|
||||
column-fill: balance;
|
||||
column-gap: 0em;
|
||||
}
|
||||
|
||||
h4
|
||||
|
@ -22,20 +22,20 @@
|
||||
font: 1.25em/1 Ahem;
|
||||
width: 32em;
|
||||
|
||||
-moz-column-gap: 1em;
|
||||
-moz-column-width: 8em;
|
||||
column-gap: 1em;
|
||||
column-width: 8em;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
N == max(1, floor((available-width + -moz-column-gap) / (-moz-column-width + -moz-column-gap)));
|
||||
N == max(1, floor((available-width + column-gap) / (column-width + column-gap)));
|
||||
N == max(1, floor((32em + 1em) / (8em + 1em)));
|
||||
N == max(1, floor(33em / 9em));
|
||||
N == max(1, floor(3.6));
|
||||
N == max(1, 3);
|
||||
N == 3;
|
||||
|
||||
W == ((available-width + -moz-column-gap) / N) - -moz-column-gap;
|
||||
W == ((available-width + column-gap) / N) - column-gap;
|
||||
W == ((32em + 1em) / 3) - 1em;
|
||||
W == (33em / 3) - 1em;
|
||||
W == (11em) - 1em;
|
||||
|
@ -21,14 +21,14 @@
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img.-moz-column-gap {margin-right: 2em;}
|
||||
img.column-gap {margin-right: 2em;}
|
||||
|
||||
img#last {padding-right: 0em;}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png"
|
||||
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png"
|
||||
width="40" height="60" alt="Image download support must be enabled" /><img id="last" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user