Merge autoland to mozilla-central. a=merge

This commit is contained in:
Andreea Pavel 2019-05-10 12:49:31 +03:00
commit b418634cb3
206 changed files with 999 additions and 855 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View 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,

View File

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

View File

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

View File

@ -625,6 +625,8 @@ class MediaDecoderStateMachine
void OnSuspendTimerResolved();
void CancelSuspendTimer();
bool IsInSeamlessLooping() const;
bool mCanPlayThrough = false;
bool mIsLiveStream = false;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -7433,7 +7433,7 @@ GeneralParser<ParseHandler, Unit>::fieldInitializerOpt(
}
ListNodeType statementList = handler_.newStatementList(wholeInitializerPos);
if (!argsbody) {
if (!statementList) {
return null();
}
handler_.addStatementToList(statementList, exprStatement);

View File

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

View File

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

View File

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

View File

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

View File

@ -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();

View File

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

View File

@ -0,0 +1,9 @@
<style>
* {
-webkit-column-break-after: always;
float: left;
column-width: 0px;
}
</style>
}
<video controls="controls">

View File

@ -18,4 +18,5 @@ load 1477831-1.html
load 1504033.html
load 1514544-1.html
load 1547420-1.html
load 1549909.html

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -23,8 +23,8 @@
widows: 1;
width: 11em;
-moz-column-count: 4;
-moz-column-gap: 1em;
column-count: 4;
column-gap: 1em;
}
h4

View File

@ -23,8 +23,8 @@
widows: 1;
width: 11em;
-moz-column-count: 3;
-moz-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
h4

View File

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

View File

@ -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;
/*

View File

@ -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;
/*

View File

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

View File

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

View File

@ -32,8 +32,8 @@
orphans: 1;
widows: 1;
-moz-column-count: 3;
-moz-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
h4

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -25,8 +25,8 @@
widows: 1;
width: 12em;
-moz-column-count: 3;
-moz-column-gap: 0;
column-count: 3;
column-gap: 0;
}
span

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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 '&lt;integer&gt;' 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;}

View File

@ -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 '&lt;integer&gt;' 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;}

View File

@ -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 '&lt;integer&gt;' 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;}

View File

@ -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;
/*

View File

@ -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;
/*

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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.
*/
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -22,8 +22,8 @@
body > div
{
-moz-column-count: 3;
-moz-column-gap: 1em;
column-count: 3;
column-gap: 1em;
/*
N == 3;

View File

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

View File

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

View File

@ -19,7 +19,7 @@ body {
}
body>div {
height: 2em;
-moz-column-width: 8em;
column-width: 8em;
}
div {
font-family: ahem;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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