import changes from `dev' branch of rmottola/Arctic-Fox:

- Bug 1207790 - Fix sandbox build for older Linux distributions. r=gdestuynder (33726f14d6)
- Bug 1157864 - chromium sandbox: Fix compilation for systems without <sys/cdefs.h>. r=jld (19789c8f28)
- Bug 1181704 - Import chromium SafeSPrintf. r=bobowen (c8f2f34098)
- Bug 1196403 - Apply crbug/522201 to support Windows 10 build 10525. r=bobowen (ee9862b408)
- Bug 1200336: Apply fix for Chromium issue 482784 for sandbox bug when built with VS2015. r=tabraldes (7f4cf9640b)
- Bug 1150765 - Add sandbox rules to allow hardware rendering of OpenGL on Mac. r=smichaud (e23a3d3e89)
- Bug 1153809 - Loosen Mac content process sandbox rules for NVidia and Intel HD 3000 graphics hardware. r=areinald (9a3a1fa6ea)
- Bug 1229804: Use the correct string length in Windows sandbox logging. r=tabraldes (6a8cb035ed)
- Bug 1181704 - Use chromium SafeSPrintf for sandbox logging. r=gdestuynder r=glandium (cff9ae432b)
- crash reporter (009341774b)
- Bug 1168555 - Work around Nuwa not always being single-threaded when a normal content process is. r=kang (b858b1fd62)
- Bug 1199413 - Fix MOZ_DISABLE_GMP_SANDBOX so it disables all the sandboxing. r=kang (49125e07be)
- Bug 1176085 - Fix second/nanosecond confusion in Linux sandbox start error case. r=kang (701181c7d2)
- Bug 1199481 - Complain more when entering sandboxing code as root. r=kang (baf7b24675)
- Bug 1215303 - Part 1 - add permissive mode r=jld (e8237859ac)
- Bug 1215303 - Part 2 - automatically enable broker when in permissive mode r=jld (9636c8a956)
- Bug 1222500 - Handle unexpected thread creation better on desktop Linux. r=gdestuynder (58e2f81f96)
- Bug 1131227 - Make the about:certerror Unknown Issuer string mention missing intermediates and unimported roots. r=keeler (29ae92e655)
- Bug 443811 - Use long date format for cert date output. r=keeler (50a31e099c)
- namespace (10ccb72736)
- Bug 1225682 - Don't use nsAuto{,C}String as class member variables in security/manager/. r=keeler (24d10b66f6)
- Bug 1110935 - Part 1 - Assert we're on the main thread on public methods. r=keeler (b9b2b52bf2)
- Bug 1110935 - Part 2 - Remove ReentrantMonitor and ReentrantMonitorAutoEnter uses. r=keeler (3fee4d4653)
- Bug 1110935 - Part 3 - Remove now unnecessary temp variables. r=keeler (f81461993a)
- Bug 1168635 - Add an XPCOM interface to allow RC4. r=keeler (dac5f75e75)
- Bug 1136301 - Null check for mCert->slot added in destructorSafeDestroyNSSReference & MarkForPermDeletion. Formatting update in MarkForPermDeletion. r=keeler (daaaf2db22)
- Bug 1168048 - Avoid potential null-pointer dereferencing in nsNSSCertificateDB r=keeler (c511046073)
- Bug 1224121 - change getRelativeRuleLine to return 0 for line-less rules; r=heycam (7cef25806d)
- Bug 1216234 - add inIDOMUtils.getCSSPseudoElementNames; r=heycam,pbrosset (1c94ca86b4)
- Bug 1146114 - Make assertion checking additional leading in ruby frame non-crash. r=dholbert (326d82db79)
- Bug 1052924 followup - Move the XXX comment to the right field. DONTBUILD (481cb50d0d)
- Bug 1136521 - Don't try to use the ascent when placing a frame whose block-direction doesn't match the line's. r=smontagu (eb01f6aa1a)
- Bug 1138353 - Correct the directionality of vertical-align dimensions in cases where line- and flow-relative coordinate directions differ. r=smontagu (6e51f4be05)
- Bug 1133945 - Fix behavior of vertical-align with a specified length, relative to dominant centered baseline in vertical mode. r=smontagu (a2e611f978)
- Bug 1146117 - Downgrade the assertion in FindNearestRubyBaseAncestor to warning. r=dbaron (db29a321f4)
- Bug 1191185 - Simplify nsHypotheticalBox, eliminating obsolete/redundant fields, and rename to nsHypotheticalPosition. r=dholbert (3741b6aa49)
- Bug 1227099 - [css-grid] Grid container block-size should include a grid-row-gap between each row. r=dholbert (35eed9d00b)
- Bug 1225368 - [css-grid] Make CollectGrowable() deal with frozen tracks; i.e. subtract their base size but don't collect them since they aren't growable. r=dholbert (073964a857)
- Bug 1224634 - [css-grid] Make grid items shrink-wrap when reflowing them, unless they have justify-self:stretch. r=dholbert (070c2cf6a9)
- Bug 1176793 part 1 - [css-grid] Implement margin:auto for grid items. r=dholbert (ff89b80fc2)
- Bug 1176793 part 2 - [css-grid] Reftests for margin:auto on grid items. (fe9367e7ca)
- Bug 1229999 - [css-grid] Clamp auto-placed lines to where kMaxLine is in the translated grid. r=dholbert (576d9a8384)
- Bug 1151243 part 1 - Replace three bool params for nsAbsoluteContainingBlock::Reflow with a flag param (idempotent patch). r=dholbert (7303bb9468)
- Bug 978212 - [css-grid] Resolved value of grid-template-{columns,rows} in px units. r=mat (fe4b886917)
- Bug 1151243 part 2 - [css-grid] Add a eIsGridContainerCB flag for nsAbsoluteContainingBlock::Reflow to trigger Grid specific code (rather than checking GetType()). r=dholbert (2f5f857b16)
- Bug 1215099 part 1 - [css-grid] Backout bug 1206703. r=dholbert (b6af6389ce)
- Bug 1123299 - Allow <input type=number> to be displayed in vertical writing mode; but keep the spinner arrows arranged as for horizontal writing mode. r=dholbert (2a2e17ce76)
- (no bug) Fix typo in grid style-struct comment: s/grid-columns-rows/grid-template-rows/. No review, DONTBUILD (f362946aed)
- fix namespace (70ec283c08)
- Bug 1224251 patch 1 - Add reftests. r=mattwoodrow (4f5eed4d0c)
- Bug 1224251 patch 2 - Add nsChangeHint_UpdateUsesOpacity to say when opacity changes between 1 and non-1. r=xidorn (0cec051688)
- Bug 1224251 patch 3 - Return nsChangeHint_UpdateUsesOpacity when opacity changes between 1 and non-1. r=xidorn (acf5f3514c)
- Bug 1224251 patch 4 - Convert UpdateOpacityLayer to RepaintFrame when changing opacity between 1 and non-1 on table parts. r=mattwoodrow (3101e06481)
- Tweak a couple of comments; no bug. (DONTBUILD) (6b7d8486ad)
- Bug 1219534 - Remove unused nsStyleContext::SetStyle##name_ methods. r=dholbert (4c032b5914)
- (no bug) Fix typo in nsStyleContext.h (s/currenlty/currently/). Comment-only, DONTBUILD (3864f8194b)
- Bug 1208901 - Fix a typo in nsStyleClipPath::nsStyleClipPath; r=heycam (df5c3b59a6)
- Bug 1227766 patch 3 - Make will-change cause creation of a containing block for fixed and absolutely positioned elements when needed. r=dholbert (09c59e07f1)
- Bug 1229278 - Fix dynamic changes to text-emphasis-style. r=dbaron (ab0c450f14)
- Bug 1159729 - Reftest to check that text decoration is properly offset when needed. r=smontagu (b93bb0ca41)
- Bug 196292 - Make table inside align=left reset alignment just like for align=center and align=right. r=bz (3b45a62477)
- Bug 1227917 - Update |disp| after we've (potentially) cloned the Display struct so that subsequent tests of 'display' use the new value. r=jfkthame (d3216e7aad)
- Bug 1155766 - Fix a bad assertion r=dbaron (d6744220f4)
- Bug 1167589 - Mark the members of CSSParsingEnvironment as MOZ_UNSAFE_REF. r=dbaron (ebb9729549)
- Bug 1228542 - Resetting AuthorStyleSheets. r=bz (31b27e491d)
- Use nsContentUtils::GenerateUUIDInPlace() in nsIDocument::GenerateDocumentId(), no bug (642138ebac)
- Bug 1226443 P2 Make service worker fetch and functional events used scheduled timer updates. r=ehsan (a4fc5a9275)
- Bug 1227015 P1 Create ServiceWorkerScriptJobBase as parent class to register and install jobs. r=ehsan (214dda4e7d)
- Bug 1226443 P1 Add a timer based mechanism for firing service worker updates. r=ehsan (f2a9eae9d2)
- Bug 1229052 - Add a telemetry histogram to gather data on the number of top-level pages with scroll-linked positioning effects. r=vladan (6844bfaa2b)
- Bug 1229052 - Log a warning when we detect a scroll-linked effect based on the scroll event. r=roc (da8dd5cff2)
- bug 1215657 - make AccessibleWrap::get_accFocus work with proxied accessibles (02bfa582d6)
- Bug 1227285 part 1 - Add a nsHTMLReflowState ctor flag to request shrink-wrap behavior. r=dholbert (da92253664)
- Bug 1227285 part 2 - [css-grid] Request shrink-wrap behavior when doing a measuring reflow to figure out a grid item's block-size. r=dholbert (6bfcf381fe)
- Bug 1227285 part 3 - [css-grid] Reftests for testing minmax(min-content,max-content) track sizing with grid item with %-sized descendants. (61b769d0d2)
- No bug - [css-grid] Add a small fuzz factor to make this reftest pass on Windows. r=me (3c51c91220)
- Bug 1173689: allow column sets in an orthogonal writing mode to their container to expand in the container's block direction, r=roc (88aa32efd9)
- Bug 1209994. Take block-wrapper path only for blocks that are wrappers. r=bz (ecb4ae8d7e)
- Bug 1191109 - Clean up use of writing-modes in GetHypotheticalBoxContainer, eliminating a redundant ConvertTo call. r=dholbert (f58d0d63c4)
- Bug 1183439 - Update the wording of a few assertions to reflect logical-coordinate conversion. r=dholbert (8aacb0f89d)
- Bug 1233276 - Make css::Declaration::List more useful again, given that it degraded a bit in bug 978833 (/ bug 1221436). r=heycam (1efda568e7)
- Bug 1167665 - Mark css::Loader::mDocument as MOZ_NON_OWNING_REF. r=dbaron (f4d4f4ed1d)
- Bug 621596 - Don't assert when a percentage base value overflows to become negative, when getting the computed style of a property that rejects negative values. r=bzbarsky (6076ce7cb6)
- Bug 622314 - Add crashtest. (f1d64b943c)
- Bug 1230613 - Long-press to trigger text selection should vibrate, r=snorp (f35f37336e)
- Bug 1230582 - Always show caret even if input is empty on Fennec. f=capella, r=roc (6cf1258232)
- Bug 1183085 - Correct argument name for BuildContainerLayerFor; r=roc (0fd119efd1)
- Bug 1183085 - Correct a typo in FrameLayerBuilder.h; r=roc (1fb9a583ed)
- Comment typo fix; no bug. (DONTBUILD) (27d7270052)
- Bug 1211858 - Add a hint for the Restyle label when the id is unavailable. r=roc,benwa (8eb99a4b45)
- bug 1218596 - remove nsPSMInitPanic and other unnecessary things from nsNSSComponent r=Cykesiopka r=jcj (a986e73f0b)
- bug 1220223 - don't load PKCS11 modules in safe mode r=mgoodwin r=bsmedberg (5e071955b0)
- Bug 921907 - Enable OCSP must-staple. r=keeler (448661431f)
- Bug 1215795 - Fix documentation in nsIWeakCryptoOverride.idl. r=keeler IGNORE IDL (3cf051737c)
- bug 1222179 - remove unnecessary observation topics in nsNSSComponent r=Cykesiopka (2eaa16d860)
- bug 986956 - only ever initialize NSS once per process r=Cykesiopka r=mgoodwin (efdec10cbb)
- Bug 1224875 - Enable TLS extended master secret. r=keeler (8f56d54ec1)
- Bug 1145893 - Shutdown nsNSSComponent background threads during xpcom-shutdown. r=keeler, a=me (5d513b930d)
- namespace (bf40a8f575)
- Bug 1224951 - Part 1: Fix nsPresContext::SizeOfExcludingThis() size calculation. r=dholbert (530a54e15d)
- Bug 1227666 - Insure that cached plugin geometry configuration cached in ShadowLayerForwarder gets cleared when we reflow and new content has no plugins. r=roc (a44fbce70e)
- Bug 1140625 - Part 1: Add recursive call in GetFrameForNodeOffset. r=roc (0b7535cf7b)
- Bug 1140625 - Recursive call GetFrameForNodeOffset if text node has no frame. r=roc (9198ab6a20)
- Bug 1140625 - Part 3: Fix a bug in bug414526 so we can reopen the test. r=roc (cbe0d3577d)
- Bug 1140625 - Part 4: Fix scroll_selection_into_view test to make its function remain. r=roc (97ca749e63)
This commit is contained in:
2023-07-11 15:00:13 +08:00
parent 585686d345
commit cbf860dd80
185 changed files with 7656 additions and 1185 deletions
+8 -5
View File
@@ -658,12 +658,15 @@ AccessibleWrap::get_accFocus(
if (IsDefunct())
return CO_E_OBJNOTCONNECTED;
// TODO make this work with proxies.
if (IsProxy())
return E_NOTIMPL;
// Return the current IAccessible child that has focus
Accessible* focusedAccessible = FocusedChild();
Accessible* focusedAccessible;
if (IsProxy()) {
ProxyAccessible* proxy = Proxy()->FocusedChild();
focusedAccessible = proxy ? WrapperFor(proxy) : nullptr;
} else {
focusedAccessible = FocusedChild();
}
if (focusedAccessible == this) {
pvarChild->vt = VT_I4;
pvarChild->lVal = CHILDID_SELF;
+31 -7
View File
@@ -1448,6 +1448,7 @@ nsIDocument::nsIDocument()
mPostedFlushUserFontSet(false),
mPartID(0),
mDidFireDOMContentLoaded(true),
mHasScrollLinkedEffect(false),
mUserHasInteracted(false)
{
SetInDocument();
@@ -1568,6 +1569,8 @@ nsDocument::~nsDocument()
mixedContentLevel = MIXED_DISPLAY_CONTENT;
}
Accumulate(Telemetry::MIXED_CONTENT_PAGE_LOAD, mixedContentLevel);
Accumulate(Telemetry::SCROLL_LINKED_EFFECT_FOUND, mHasScrollLinkedEffect);
}
}
@@ -2334,6 +2337,11 @@ nsDocument::ResetStylesheetsToURI(nsIURI* aURI)
RemoveStyleSheetsFromStyleSets(mAdditionalSheets[eUserSheet], SheetType::User);
RemoveStyleSheetsFromStyleSets(mAdditionalSheets[eAuthorSheet], SheetType::Doc);
nsStyleSheetService *sheetService = nsStyleSheetService::GetInstance();
if (sheetService) {
RemoveStyleSheetsFromStyleSets(*sheetService->AuthorStyleSheets(), SheetType::Doc);
}
// Release all the sheets
mStyleSheets.Clear();
mOnDemandBuiltInUASheets.Clear();
@@ -5119,6 +5127,14 @@ nsDocument::DispatchContentLoadedEvents()
true, true);
}
if (mMaybeServiceWorkerControlled) {
using mozilla::dom::workers::ServiceWorkerManager;
RefPtr<ServiceWorkerManager> swm = ServiceWorkerManager::GetInstance();
if (swm) {
swm->MaybeCheckNavigationUpdate(this);
}
}
UnblockOnload(true);
}
@@ -13115,14 +13131,8 @@ nsIDocument::CreateHTMLElement(nsIAtom* aTag)
nsresult
nsIDocument::GenerateDocumentId(nsAString& aId)
{
nsresult rv;
nsCOMPtr<nsIUUIDGenerator> uuidgen = do_GetService("@mozilla.org/uuid-generator;1", &rv);
if (NS_WARN_IF(NS_FAILED(rv))) {
return rv;
}
nsID id;
rv = uuidgen->GenerateUUIDInPlace(&id);
nsresult rv = nsContentUtils::GenerateUUIDInPlace(id);
if (NS_WARN_IF(NS_FAILED(rv))) {
return rv;
}
@@ -13314,6 +13324,20 @@ nsIDocument::Fonts()
return mFontFaceSet;
}
void
nsIDocument::ReportHasScrollLinkedEffect()
{
if (mHasScrollLinkedEffect) {
// We already did this once for this document, don't do it again.
return;
}
mHasScrollLinkedEffect = true;
nsContentUtils::ReportToConsole(nsIScriptError::warningFlag,
NS_LITERAL_CSTRING("Async Pan/Zoom"),
this, nsContentUtils::eLAYOUT_PROPERTIES,
"ScrollLinkedEffectFound");
}
Selection*
nsIDocument::GetSelection(ErrorResult& aRv)
{
+6 -2
View File
@@ -161,8 +161,8 @@ struct FullScreenOptions {
} // namespace mozilla
#define NS_IDOCUMENT_IID \
{ 0x13011a82, 0x46cd, 0x4c33, \
{ 0x9d, 0x4e, 0x31, 0x41, 0xbb, 0x3f, 0x18, 0xe9 } }
{ 0xce1f7627, 0x7109, 0x4977, \
{ 0xba, 0x77, 0x49, 0x0f, 0xfd, 0xe0, 0x7a, 0xaa } }
// Enum for requesting a particular type of document when creating a doc
enum DocumentFlavor {
@@ -2706,6 +2706,8 @@ public:
bool InlineScriptAllowedByCSP();
void ReportHasScrollLinkedEffect();
protected:
bool GetUseCounter(mozilla::UseCounter aUseCounter)
{
@@ -3102,6 +3104,8 @@ protected:
uint32_t mBlockDOMContentLoaded;
bool mDidFireDOMContentLoaded:1;
bool mHasScrollLinkedEffect:1;
// Our live MediaQueryLists
PRCList mDOMMediaQueryLists;
@@ -9,3 +9,4 @@ ImageMapPolyWrongNumberOfCoords=The "coords" attribute of the <area shape="poly"
ImageMapPolyOddNumberOfCoords=The "coords" attribute of the <area shape="poly"> tag is missing the last "y" coordinate (the correct format is "x1,y1,x2,y2 …").
TablePartRelPosWarning=Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.
ScrollLinkedEffectFound=This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developers.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!
+264 -19
View File
@@ -21,6 +21,7 @@
#include "nsIMutableArray.h"
#include "nsIScriptError.h"
#include "nsISimpleEnumerator.h"
#include "nsITimer.h"
#include "nsIUploadChannel2.h"
#include "nsPIDOMWindow.h"
#include "nsScriptLoader.h"
@@ -135,6 +136,9 @@ struct ServiceWorkerManager::RegistrationDataPerPrincipal final
// Maps scopes to job queues.
nsClassHashtable<nsCStringHashKey, ServiceWorkerJobQueue> mJobQueues;
// Map scopes to scheduled update timers.
nsInterfaceHashtable<nsCStringHashKey, nsITimer> mUpdateTimers;
};
struct ServiceWorkerManager::PendingOperation final
@@ -422,9 +426,10 @@ ServiceWorkerRegistrationInfo::Clear()
ServiceWorkerRegistrationInfo::ServiceWorkerRegistrationInfo(const nsACString& aScope,
nsIPrincipal* aPrincipal)
: mControlledDocumentsCounter(0)
, mUpdateState(NoUpdate)
, mLastUpdateCheckTime(0)
, mScope(aScope)
, mPrincipal(aPrincipal)
, mLastUpdateCheckTime(0)
, mUpdating(false)
, mPendingUninstall(false)
{}
@@ -952,6 +957,32 @@ protected:
~ServiceWorkerJobBase()
{ }
void
Succeed()
{
AssertIsOnMainThread();
// We don't have a callback for soft updates.
if (mCallback) {
mCallback->UpdateSucceeded(mRegistration);
mCallback = nullptr;
}
}
};
// Base type for jobs that work with a specific service worker script.
class ServiceWorkerScriptJobBase : public ServiceWorkerJobBase
{
protected:
ServiceWorkerScriptJobBase(ServiceWorkerJobQueue* aQueue,
ServiceWorkerJob::Type aJobType,
ServiceWorkerUpdateFinishCallback* aCallback,
ServiceWorkerRegistrationInfo* aRegistration,
ServiceWorkerInfo* aServiceWorkerInfo)
: ServiceWorkerJobBase(aQueue, aJobType, aCallback, aRegistration,
aServiceWorkerInfo)
{
}
// This MUST only be called when the job is still performing actions related
// to registration or update. After the spec resolves the update promise, use
// Done() with the failure code instead.
@@ -1013,20 +1044,9 @@ protected:
ErrorResult rv(aRv);
Fail(rv);
}
void
Succeed()
{
AssertIsOnMainThread();
// We don't have a callback for soft updates.
if (mCallback) {
mCallback->UpdateSucceeded(mRegistration);
mCallback = nullptr;
}
}
};
class ServiceWorkerInstallJob final : public ServiceWorkerJobBase
class ServiceWorkerInstallJob final : public ServiceWorkerScriptJobBase
{
friend class ContinueInstallTask;
@@ -1035,8 +1055,8 @@ public:
ServiceWorkerUpdateFinishCallback* aCallback,
ServiceWorkerRegistrationInfo* aRegistration,
ServiceWorkerInfo* aServiceWorkerInfo)
: ServiceWorkerJobBase(aQueue, Type::InstallJob, aCallback,
aRegistration, aServiceWorkerInfo)
: ServiceWorkerScriptJobBase(aQueue, Type::InstallJob, aCallback,
aRegistration, aServiceWorkerInfo)
{
MOZ_ASSERT(aRegistration);
}
@@ -1161,7 +1181,7 @@ public:
}
};
class ServiceWorkerRegisterJob final : public ServiceWorkerJobBase,
class ServiceWorkerRegisterJob final : public ServiceWorkerScriptJobBase,
public serviceWorkerScriptCache::CompareCallback
{
friend class ContinueUpdateRunnable;
@@ -1184,7 +1204,8 @@ public:
ServiceWorkerUpdateFinishCallback* aCallback,
nsIPrincipal* aPrincipal,
nsILoadGroup* aLoadGroup)
: ServiceWorkerJobBase(aQueue, Type::RegisterJob, aCallback)
: ServiceWorkerScriptJobBase(aQueue, Type::RegisterJob, aCallback, nullptr,
nullptr)
, mScope(aScope)
, mScriptSpec(aScriptSpec)
, mPrincipal(aPrincipal)
@@ -1199,8 +1220,8 @@ public:
ServiceWorkerRegisterJob(ServiceWorkerJobQueue* aQueue,
ServiceWorkerRegistrationInfo* aRegistration,
ServiceWorkerUpdateFinishCallback* aCallback)
: ServiceWorkerJobBase(aQueue, Type::UpdateJob, aCallback,
aRegistration, nullptr)
: ServiceWorkerScriptJobBase(aQueue, Type::UpdateJob, aCallback,
aRegistration, nullptr)
{
AssertIsOnMainThread();
}
@@ -2698,6 +2719,54 @@ ServiceWorkerRegistrationInfo::NotifyListenersOnChange()
}
}
void
ServiceWorkerRegistrationInfo::MaybeScheduleTimeCheckAndUpdate()
{
AssertIsOnMainThread();
RefPtr<ServiceWorkerManager> swm = ServiceWorkerManager::GetInstance();
if (!swm) {
// shutting down, do nothing
return;
}
if (mUpdateState == NoUpdate) {
mUpdateState = NeedTimeCheckAndUpdate;
}
swm->ScheduleUpdateTimer(mPrincipal, mScope);
}
void
ServiceWorkerRegistrationInfo::MaybeScheduleUpdate()
{
AssertIsOnMainThread();
RefPtr<ServiceWorkerManager> swm = ServiceWorkerManager::GetInstance();
if (!swm) {
// shutting down, do nothing
return;
}
mUpdateState = NeedUpdate;
swm->ScheduleUpdateTimer(mPrincipal, mScope);
}
bool
ServiceWorkerRegistrationInfo::CheckAndClearIfUpdateNeeded()
{
AssertIsOnMainThread();
bool result = mUpdateState == NeedUpdate ||
(mUpdateState == NeedTimeCheckAndUpdate &&
IsLastUpdateCheckTimeOverOneDay());
mUpdateState = NoUpdate;
return result;
}
void
ServiceWorkerManager::LoadRegistration(
const ServiceWorkerRegistrationData& aRegistration)
@@ -3024,6 +3093,12 @@ ServiceWorkerManager::RemoveScopeAndRegistration(ServiceWorkerRegistrationInfo*
return;
}
nsCOMPtr<nsITimer> timer = data->mUpdateTimers.Get(aRegistration->mScope);
if (timer) {
timer->Cancel();
data->mUpdateTimers.Remove(aRegistration->mScope);
}
RefPtr<ServiceWorkerRegistrationInfo> info;
data->mInfos.Get(aRegistration->mScope, getter_AddRefs(info));
@@ -3083,6 +3158,27 @@ ServiceWorkerManager::MaybeStopControlling(nsIDocument* aDoc)
mAllDocuments.RemoveEntry(aDoc);
}
void
ServiceWorkerManager::MaybeCheckNavigationUpdate(nsIDocument* aDoc)
{
AssertIsOnMainThread();
MOZ_ASSERT(aDoc);
// We perform these success path navigation update steps when the
// document tells us its more or less done loading. This avoids
// slowing down page load and also lets pages consistently get
// updatefound events when they fire.
//
// 9.8.20 If respondWithEntered is false, then:
// 9.8.22 Else: (respondWith was entered and succeeded)
// If request is a non-subresource request, then: Invoke Soft Update
// algorithm.
RefPtr<ServiceWorkerRegistrationInfo> registration;
mControlledDocuments.Get(aDoc, getter_AddRefs(registration));
if (registration) {
registration->MaybeScheduleUpdate();
}
}
void
ServiceWorkerManager::StartControllingADocument(ServiceWorkerRegistrationInfo* aRegistration,
nsIDocument* aDoc,
@@ -4123,6 +4219,13 @@ ServiceWorkerManager::ForceUnregister(RegistrationDataPerPrincipal* aRegistratio
queue->CancelJobs();
}
nsCOMPtr<nsITimer> timer =
aRegistrationData->mUpdateTimers.Get(aRegistration->mScope);
if (timer) {
timer->Cancel();
aRegistrationData->mUpdateTimers.Remove(aRegistration->mScope);
}
// Since Unregister is async, it is ok to call it in an enumeration.
Unregister(aRegistration->mPrincipal, nullptr, NS_ConvertUTF8toUTF16(aRegistration->mScope));
}
@@ -4452,6 +4555,14 @@ ServiceWorkerManager::Observe(nsISupports* aSubject,
if (strcmp(aTopic, NS_XPCOM_SHUTDOWN_OBSERVER_ID) == 0) {
mShuttingDown = true;
for (auto it1 = mRegistrationInfos.Iter(); !it1.Done(); it1.Next()) {
for (auto it2 = it1.UserData()->mUpdateTimers.Iter(); !it2.Done(); it2.Next()) {
nsCOMPtr<nsITimer> timer = it2.UserData();
timer->Cancel();
}
it1.UserData()->mUpdateTimers.Clear();
}
nsCOMPtr<nsIObserverService> obs = mozilla::services::GetObserverService();
if (obs) {
obs->RemoveObserver(this, NS_XPCOM_SHUTDOWN_OBSERVER_ID);
@@ -4656,6 +4767,140 @@ ServiceWorkerManager::RemoveNavigationInterception(const nsACString& aScope,
}
}
class UpdateTimerCallback final : public nsITimerCallback
{
nsCOMPtr<nsIPrincipal> mPrincipal;
const nsCString mScope;
~UpdateTimerCallback()
{
}
public:
UpdateTimerCallback(nsIPrincipal* aPrincipal, const nsACString& aScope)
: mPrincipal(aPrincipal)
, mScope(aScope)
{
AssertIsOnMainThread();
MOZ_ASSERT(mPrincipal);
MOZ_ASSERT(!mScope.IsEmpty());
}
NS_IMETHOD
Notify(nsITimer* aTimer) override
{
AssertIsOnMainThread();
RefPtr<ServiceWorkerManager> swm = ServiceWorkerManager::GetInstance();
if (!swm) {
// shutting down, do nothing
return NS_OK;
}
swm->UpdateTimerFired(mPrincipal, mScope);
return NS_OK;
}
NS_DECL_ISUPPORTS
};
NS_IMPL_ISUPPORTS(UpdateTimerCallback, nsITimerCallback)
void
ServiceWorkerManager::ScheduleUpdateTimer(nsIPrincipal* aPrincipal,
const nsACString& aScope)
{
AssertIsOnMainThread();
MOZ_ASSERT(aPrincipal);
MOZ_ASSERT(!aScope.IsEmpty());
if (mShuttingDown) {
return;
}
nsAutoCString scopeKey;
nsresult rv = PrincipalToScopeKey(aPrincipal, scopeKey);
if (NS_WARN_IF(NS_FAILED(rv))) {
return;
}
RegistrationDataPerPrincipal* data;
if (!mRegistrationInfos.Get(scopeKey, &data)) {
return;
}
nsCOMPtr<nsITimer> timer = data->mUpdateTimers.Get(aScope);
if (timer) {
timer->Cancel();
data->mUpdateTimers.Remove(aScope);
} else {
timer = do_CreateInstance("@mozilla.org/timer;1", &rv);
if (NS_WARN_IF(NS_FAILED(rv))) {
return;
}
}
nsCOMPtr<nsITimerCallback> callback = new UpdateTimerCallback(aPrincipal,
aScope);
const uint32_t UPDATE_DELAY_MS = 1000;
rv = timer->InitWithCallback(callback, UPDATE_DELAY_MS,
nsITimer::TYPE_ONE_SHOT);
if (NS_WARN_IF(NS_FAILED(rv))) {
return;
}
data->mUpdateTimers.Put(aScope, timer);
}
void
ServiceWorkerManager::UpdateTimerFired(nsIPrincipal* aPrincipal,
const nsACString& aScope)
{
AssertIsOnMainThread();
MOZ_ASSERT(aPrincipal);
MOZ_ASSERT(!aScope.IsEmpty());
if (mShuttingDown) {
return;
}
// First cleanup the timer.
nsAutoCString scopeKey;
nsresult rv = PrincipalToScopeKey(aPrincipal, scopeKey);
if (NS_WARN_IF(NS_FAILED(rv))) {
return;
}
RegistrationDataPerPrincipal* data;
if (!mRegistrationInfos.Get(scopeKey, &data)) {
return;
}
nsCOMPtr<nsITimer> timer = data->mUpdateTimers.Get(aScope);
if (timer) {
timer->Cancel();
data->mUpdateTimers.Remove(aScope);
}
RefPtr<ServiceWorkerRegistrationInfo> registration;
data->mInfos.Get(aScope, getter_AddRefs(registration));
if (!registration) {
return;
}
if (!registration->CheckAndClearIfUpdateNeeded()) {
return;
}
OriginAttributes attrs =
mozilla::BasePrincipal::Cast(aPrincipal)->OriginAttributesRef();
// Then trigger an update to fire asynchronously now.
PropagateSoftUpdate(attrs, NS_ConvertUTF8toUTF16(aScope));
}
NS_IMPL_ISUPPORTS(ServiceWorkerInfo, nsIServiceWorkerInfo)
NS_IMETHODIMP
+30 -2
View File
@@ -57,6 +57,15 @@ class ServiceWorkerRegistrationInfo final
{
uint32_t mControlledDocumentsCounter;
enum
{
NoUpdate,
NeedTimeCheckAndUpdate,
NeedUpdate
} mUpdateState;
uint64_t mLastUpdateCheckTime;
virtual ~ServiceWorkerRegistrationInfo();
public:
@@ -76,8 +85,6 @@ public:
nsTArray<nsCOMPtr<nsIServiceWorkerRegistrationInfoListener>> mListeners;
uint64_t mLastUpdateCheckTime;
// According to the spec, Soft Update shouldn't queue an update job
// if the registration queue is not empty. Because our job queue
// works slightly different, we use a flag to determine if the registration
@@ -152,6 +159,15 @@ public:
void
NotifyListenersOnChange();
void
MaybeScheduleTimeCheckAndUpdate();
void
MaybeScheduleUpdate();
bool
CheckAndClearIfUpdateNeeded();
};
class ServiceWorkerUpdateFinishCallback
@@ -316,8 +332,10 @@ class ServiceWorkerManager final
friend class ServiceWorkerInstallJob;
friend class ServiceWorkerRegisterJob;
friend class ServiceWorkerJobBase;
friend class ServiceWorkerScriptJobBase;
friend class ServiceWorkerRegistrationInfo;
friend class ServiceWorkerUnregisterJob;
friend class UpdateTimerCallback;
public:
NS_DECL_ISUPPORTS
@@ -480,6 +498,10 @@ public:
NS_IMETHOD
RemoveRegistrationEventListener(const nsAString& aScope,
ServiceWorkerRegistrationListener* aListener);
void
MaybeCheckNavigationUpdate(nsIDocument* aDoc);
private:
ServiceWorkerManager();
~ServiceWorkerManager();
@@ -658,6 +680,12 @@ private:
void
RemoveNavigationInterception(const nsACString& aScope,
nsIInterceptedChannel* aChannel);
void
ScheduleUpdateTimer(nsIPrincipal* aPrincipal, const nsACString& aScope);
void
UpdateTimerFired(nsIPrincipal* aPrincipal, const nsACString& aScope);
};
} // namespace workers
+24 -45
View File
@@ -212,46 +212,26 @@ public:
NS_IMPL_ISUPPORTS0(KeepAliveHandler)
class SoftUpdateRequest : public nsRunnable
class RegistrationUpdateRunnable : public nsRunnable
{
protected:
nsMainThreadPtrHandle<ServiceWorkerRegistrationInfo> mRegistration;
const bool mNeedTimeCheck;
public:
explicit SoftUpdateRequest(nsMainThreadPtrHandle<ServiceWorkerRegistrationInfo>& aRegistration)
RegistrationUpdateRunnable(nsMainThreadPtrHandle<ServiceWorkerRegistrationInfo>& aRegistration,
bool aNeedTimeCheck)
: mRegistration(aRegistration)
, mNeedTimeCheck(aNeedTimeCheck)
{
MOZ_ASSERT(aRegistration);
}
NS_IMETHOD Run()
NS_IMETHOD
Run() override
{
AssertIsOnMainThread();
RefPtr<ServiceWorkerManager> swm = ServiceWorkerManager::GetInstance();
MOZ_ASSERT(swm);
OriginAttributes attrs =
mozilla::BasePrincipal::Cast(mRegistration->mPrincipal)->OriginAttributesRef();
swm->PropagateSoftUpdate(attrs,
NS_ConvertUTF8toUTF16(mRegistration->mScope));
return NS_OK;
}
};
class CheckLastUpdateTimeRequest final : public SoftUpdateRequest
{
public:
explicit CheckLastUpdateTimeRequest(
nsMainThreadPtrHandle<ServiceWorkerRegistrationInfo>& aRegistration)
: SoftUpdateRequest(aRegistration)
{}
NS_IMETHOD Run()
{
AssertIsOnMainThread();
if (mRegistration->IsLastUpdateCheckTimeOverOneDay()) {
SoftUpdateRequest::Run();
if (mNeedTimeCheck) {
mRegistration->MaybeScheduleTimeCheckAndUpdate();
} else {
mRegistration->MaybeScheduleUpdate();
}
return NS_OK;
}
@@ -335,9 +315,9 @@ public:
void
PostRun(JSContext* aCx, WorkerPrivate* aWorkerPrivate, bool aRunResult)
{
nsCOMPtr<nsIRunnable> runnable = new CheckLastUpdateTimeRequest(mRegistration);
MOZ_ALWAYS_TRUE(NS_SUCCEEDED(NS_DispatchToMainThread(runnable.forget())));
nsCOMPtr<nsIRunnable> runnable =
new RegistrationUpdateRunnable(mRegistration, true /* time check */);
NS_DispatchToMainThread(runnable.forget());
}
};
@@ -1281,16 +1261,21 @@ private:
nsCOMPtr<nsIRunnable> runnable;
if (event->DefaultPrevented(aCx)) {
event->ReportCanceled();
runnable = new CancelChannelRunnable(mInterceptedChannel,
NS_ERROR_INTERCEPTION_FAILED);
} else if (event->GetInternalNSEvent()->mFlags.mExceptionHasBeenRisen) {
// Exception logged via the WorkerPrivate ErrorReporter
runnable = new CancelChannelRunnable(mInterceptedChannel,
NS_ERROR_INTERCEPTION_FAILED);
} else {
runnable = new ResumeRequest(mInterceptedChannel);
}
if (!runnable) {
nsCOMPtr<nsIRunnable> updateRunnable =
new RegistrationUpdateRunnable(mRegistration, false /* time check */);
NS_DispatchToMainThread(runnable.forget());
runnable = new CancelChannelRunnable(mInterceptedChannel,
NS_ERROR_INTERCEPTION_FAILED);
}
MOZ_ALWAYS_TRUE(NS_SUCCEEDED(NS_DispatchToMainThread(runnable)));
}
@@ -1301,12 +1286,6 @@ private:
waitUntilPromise->AppendNativeHandler(keepAliveHandler);
}
// 9.8.22 If request is a non-subresource request, then: Invoke Soft Update algorithm
if (internalReq->IsNavigationRequest()) {
nsCOMPtr<nsIRunnable> runnable= new SoftUpdateRequest(mRegistration);
MOZ_ALWAYS_TRUE(NS_SUCCEEDED(NS_DispatchToMainThread(runnable.forget())));
}
return true;
}
+1 -6
View File
@@ -126,12 +126,7 @@ function runTests()
editor3.focus();
moveCaretToEndOf(editor3);
synthesizeKey("VK_DELETE", { });
// Because of a bug in nsFrameSelection::CharacterExtendForDelete, pressing Delete
// here puts the selection in the text node inside editor3's inner div, which
// causes us to delete the contents of that text node. This situation shouldn't
// happen by the normal caret navigation functions that the user can invoke, so
// we can fix it later.
todo_is(container.innerHTML, kTestCase1,
is(container.innerHTML, kTestCase1,
"Pressing delete key at end of editor3 changes the content");
reset();
@@ -0,0 +1,48 @@
/* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#include "ScrollLinkedEffectDetector.h"
#include "nsIDocument.h"
namespace mozilla {
namespace layers {
uint32_t ScrollLinkedEffectDetector::sDepth = 0;
bool ScrollLinkedEffectDetector::sFoundScrollLinkedEffect = false;
/* static */ void
ScrollLinkedEffectDetector::PositioningPropertyMutated()
{
MOZ_ASSERT(NS_IsMainThread());
if (sDepth > 0) {
// We are inside a scroll event dispatch
sFoundScrollLinkedEffect = true;
}
}
ScrollLinkedEffectDetector::ScrollLinkedEffectDetector(nsIDocument* aDoc)
: mDocument(aDoc)
{
MOZ_ASSERT(NS_IsMainThread());
sDepth++;
}
ScrollLinkedEffectDetector::~ScrollLinkedEffectDetector()
{
sDepth--;
if (sDepth == 0) {
// We have exited all (possibly-nested) scroll event dispatches,
// record whether or not we found an effect, and reset state
if (sFoundScrollLinkedEffect) {
mDocument->ReportHasScrollLinkedEffect();
sFoundScrollLinkedEffect = false;
}
}
}
} // namespace layers
} // namespace mozilla
@@ -0,0 +1,43 @@
/* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#ifndef mozilla_layers_ScrollLinkedEffectDetector_h
#define mozilla_layers_ScrollLinkedEffectDetector_h
#include "mozilla/RefPtr.h"
class nsIDocument;
namespace mozilla {
namespace layers {
// ScrollLinkedEffectDetector is used to detect the existence of a scroll-linked
// effect on a webpage. Generally speaking, a scroll-linked effect is something
// on the page that animates or changes with respect to the scroll position.
// Content authors usually rely on running some JS in response to the scroll
// event in order to implement such effects, and therefore it tends to be laggy
// or work improperly with APZ enabled. This class helps us detect such an
// effect so that we can warn the author and/or take other preventative
// measures.
class MOZ_STACK_CLASS ScrollLinkedEffectDetector
{
private:
static uint32_t sDepth;
static bool sFoundScrollLinkedEffect;
public:
static void PositioningPropertyMutated();
explicit ScrollLinkedEffectDetector(nsIDocument* aDoc);
~ScrollLinkedEffectDetector();
private:
RefPtr<nsIDocument> mDocument;
};
} // namespace layers
} // namespace mozilla
#endif /* mozilla_layers_ScrollLinkedEffectDetector_h */
+2
View File
@@ -109,6 +109,7 @@ EXPORTS.mozilla.layers += [
'apz/util/ChromeProcessController.h',
'apz/util/DoubleTapToZoom.h',
'apz/util/InputAPZContext.h',
'apz/util/ScrollLinkedEffectDetector.h',
'AsyncCanvasRenderer.h',
'AtomicRefCountedWithFinalize.h',
'AxisPhysicsModel.h',
@@ -258,6 +259,7 @@ UNIFIED_SOURCES += [
'apz/util/ChromeProcessController.cpp',
'apz/util/DoubleTapToZoom.cpp',
'apz/util/InputAPZContext.cpp',
'apz/util/ScrollLinkedEffectDetector.cpp',
'AsyncCanvasRenderer.cpp',
'AxisPhysicsModel.cpp',
'AxisPhysicsMSDModel.cpp',
+22 -2
View File
@@ -20,6 +20,7 @@
#include "nsFrame.h"
#include "nsFrameSelection.h"
#include "nsGenericHTMLElement.h"
#include "nsIHapticFeedback.h"
namespace mozilla {
@@ -63,7 +64,8 @@ std::ostream& operator<<(std::ostream& aStream,
/*static*/ bool
AccessibleCaretManager::sCaretsExtendedVisibility = false;
/*static*/ bool
AccessibleCaretManager::sHapticFeedback = false;
AccessibleCaretManager::AccessibleCaretManager(nsIPresShell* aPresShell)
: mPresShell(aPresShell)
@@ -81,6 +83,8 @@ AccessibleCaretManager::AccessibleCaretManager(nsIPresShell* aPresShell)
if (!addedPrefs) {
Preferences::AddBoolVarCache(&sCaretsExtendedVisibility,
"layout.accessiblecaret.extendedvisibility");
Preferences::AddBoolVarCache(&sHapticFeedback,
"layout.accessiblecaret.hapticfeedback");
addedPrefs = true;
}
}
@@ -259,7 +263,10 @@ AccessibleCaretManager::UpdateCaretsForCursorMode(UpdateCaretsHint aHint)
case PositionChangedResult::Changed:
switch (aHint) {
case UpdateCaretsHint::Default:
if (HasNonEmptyTextContent(GetEditingHostForFrame(frame))) {
// On Fennec, always show accessiblecaret even if the input is empty
// to make ActionBar visible.
if (sCaretsExtendedVisibility ||
HasNonEmptyTextContent(GetEditingHostForFrame(frame))) {
mFirstCaret->SetAppearance(Appearance::Normal);
} else {
mFirstCaret->SetAppearance(Appearance::NormalNotShown);
@@ -366,6 +373,16 @@ AccessibleCaretManager::UpdateCaretsForTilt()
}
}
void
AccessibleCaretManager::ProvideHapticFeedback()
{
if (sHapticFeedback) {
nsCOMPtr<nsIHapticFeedback> haptic =
do_GetService("@mozilla.org/widget/hapticfeedback;1");
haptic->PerformSimpleAction(haptic->LongPress);
}
}
nsresult
AccessibleCaretManager::PressCaret(const nsPoint& aPoint)
{
@@ -466,6 +483,7 @@ AccessibleCaretManager::SelectWordOrShortcut(const nsPoint& aPoint)
// We need to update carets to get correct information before dispatching
// CaretStateChangedEvent.
UpdateCarets();
ProvideHapticFeedback();
DispatchCaretStateChangedEvent(CaretChangedReason::Longpressonemptycontent);
return NS_OK;
}
@@ -496,6 +514,8 @@ AccessibleCaretManager::SelectWordOrShortcut(const nsPoint& aPoint)
nsresult rv = SelectWord(ptFrame, ptInFrame);
UpdateCarets();
ProvideHapticFeedback();
return rv;
}
+8 -1
View File
@@ -137,6 +137,9 @@ protected:
void UpdateCaretsForCursorMode(UpdateCaretsHint aHint);
void UpdateCaretsForSelectionMode(UpdateCaretsHint aHint);
// Provide haptic / touch feedback, primarily for select on longpress.
void ProvideHapticFeedback();
// Get the nearest enclosing focusable frame of aFrame.
// @return focusable frame if there is any; nullptr otherwise.
nsIFrame* GetFocusableFrame(nsIFrame* aFrame) const;
@@ -246,8 +249,12 @@ protected:
// AccessibleCaret visibility preference. Used to avoid hiding caret during
// (NO_REASON) selection change notifications generated by keyboard IME, and to
// maintain a visible ActionBar while carets NotShown during scroll.
// maintain a visible ActionBar while carets NotShown during scroll and while
// cursor is on an empty input.
static bool sCaretsExtendedVisibility;
// AccessibleCaret pref for haptic feedback behaviour on longPress.
static bool sHapticFeedback;
};
std::ostream& operator<<(std::ostream& aStream,
+2 -2
View File
@@ -216,7 +216,7 @@ public:
* sets the container layer children to layers which together render
* the contents of the display list. It reuses existing layers from
* the retained layer manager if possible.
* aContainer may be null, in which case we construct a root layer.
* aContainerItem may be null, in which case we construct a root layer.
* This gets called by display list code. It calls BuildLayer on the
* items in the display list, making items with their own layers
* children of the new container, and assigning all other items to
@@ -474,7 +474,7 @@ public:
* longer than the transaction.
*
* Updates the geometry, frame list and clip.
* For items within a PaintedLayer, a geometry object must be specifed to retain
* For items within a PaintedLayer, a geometry object must be specified to retain
* until the next transaction.
*
*/
+22 -10
View File
@@ -854,6 +854,21 @@ RestyleManager::ProcessRestyledFrames(nsStyleChangeList& aChangeList)
didReflowThisFrame = true;
}
if ((hint & nsChangeHint_UpdateUsesOpacity) &&
frame->IsFrameOfType(nsIFrame::eTablePart)) {
NS_ASSERTION(hint & nsChangeHint_UpdateOpacityLayer,
"should only return UpdateUsesOpacity hint "
"when also returning UpdateOpacityLayer hint");
// When an internal table part (including cells) changes between
// having opacity 1 and non-1, it changes whether its
// backgrounds (and those of table parts inside of it) are
// painted as part of the table's nsDisplayTableBorderBackground
// display item, or part of its own display item. That requires
// invalidation, so change UpdateOpacityLayer to RepaintFrame.
hint &= ~nsChangeHint_UpdateOpacityLayer;
hint |= nsChangeHint_RepaintFrame;
}
if (hint & (nsChangeHint_RepaintFrame | nsChangeHint_SyncFrameView |
nsChangeHint_UpdateOpacityLayer | nsChangeHint_UpdateTransformLayer |
nsChangeHint_ChildrenOnlyTransform | nsChangeHint_SchedulePaint)) {
@@ -1332,7 +1347,7 @@ RestyleManager::GetMaxAnimationGenerationForFrame(nsIFrame* aFrame)
void
RestyleManager::RestyleForEmptyChange(Element* aContainer)
{
// In some cases (:empty + E, :empty ~ E), a change if the content of
// In some cases (:empty + E, :empty ~ E), a change in the content of
// an element requires restyling its parent's siblings.
nsRestyleHint hint = eRestyle_Subtree;
nsIContent* grandparent = aContainer->GetParent();
@@ -4438,20 +4453,16 @@ ElementRestyler::ComputeStyleChangeFor(nsIFrame* aFrame,
aSwappedStructOwners)
{
nsIContent* content = aFrame->GetContent();
nsAutoCString idStr;
nsAutoCString localDescriptor;
if (profiler_is_active() && content) {
nsIAtom* id = content->GetID();
if (id) {
id->ToUTF8String(idStr);
} else {
idStr.AssignLiteral("?");
}
std::string elemDesc = ToString(*content);
localDescriptor.Assign(elemDesc.c_str());
}
PROFILER_LABEL_PRINTF("ElementRestyler", "ComputeStyleChangeFor",
js::ProfileEntry::Category::CSS,
content ? "Element: %s" : "%s",
content ? idStr.get() : "");
content ? localDescriptor.get() : "");
if (aMinChange) {
aChangeList->AppendChange(aFrame, content, aMinChange);
}
@@ -5089,7 +5100,8 @@ RestyleManager::ChangeHintToString(nsChangeHint aHint)
"ChildrenOnlyTransform", "RecomputePosition", "AddOrRemoveTransform",
"BorderStyleNoneChange", "UpdateTextPath", "SchedulePaint",
"NeutralChange", "InvalidateRenderingObservers",
"ReflowChangesSizeOrPosition", "UpdateComputedBSize"
"ReflowChangesSizeOrPosition", "UpdateComputedBSize",
"UpdateUsesOpacity"
};
uint32_t hint = aHint & ((1 << ArrayLength(names)) - 1);
uint32_t rest = aHint & ~((1 << ArrayLength(names)) - 1);
+14 -2
View File
@@ -184,6 +184,16 @@ enum nsChangeHint {
*/
nsChangeHint_UpdateComputedBSize = 0x1000000,
/**
* Indicates that the 'opacity' property changed between 1 and non-1.
*
* Used as extra data for handling UpdateOpacityLayer hints.
*
* Note that we do not send this hint if the non-1 value was 0.99 or
* greater, since in that case we send a RepaintFrame hint instead.
*/
nsChangeHint_UpdateUsesOpacity = 0x2000000,
// IMPORTANT NOTE: When adding new hints, consider whether you need to
// add them to NS_HintsNotHandledForDescendantsIn() below. Please also
// add them to RestyleManager::ChangeHintToString.
@@ -292,7 +302,8 @@ inline nsChangeHint operator^=(nsChangeHint& aLeft, nsChangeHint aRight)
nsChangeHint_NeedReflow | \
nsChangeHint_ReflowChangesSizeOrPosition | \
nsChangeHint_ClearAncestorIntrinsics | \
nsChangeHint_UpdateComputedBSize)
nsChangeHint_UpdateComputedBSize | \
nsChangeHint_UpdateUsesOpacity)
inline nsChangeHint NS_HintsNotHandledForDescendantsIn(nsChangeHint aChangeHint) {
nsChangeHint result = nsChangeHint(aChangeHint & (
@@ -307,7 +318,8 @@ inline nsChangeHint NS_HintsNotHandledForDescendantsIn(nsChangeHint aChangeHint)
nsChangeHint_RecomputePosition |
nsChangeHint_UpdateContainingBlock |
nsChangeHint_BorderStyleNoneChange |
nsChangeHint_UpdateComputedBSize));
nsChangeHint_UpdateComputedBSize |
nsChangeHint_UpdateUsesOpacity));
if (!NS_IsHintSubset(nsChangeHint_NeedDirtyReflow, aChangeHint)) {
if (NS_IsHintSubset(nsChangeHint_NeedReflow, aChangeHint)) {
+7 -4
View File
@@ -1727,10 +1727,13 @@ already_AddRefed<LayerManager> nsDisplayList::PaintRoot(nsDisplayListBuilder* aB
// If this is the content process, we ship plugin geometry updates over with layer
// updates, so calculate that now before we call EndTransaction.
if (rootPresContext &&
aBuilder->WillComputePluginGeometry() &&
XRE_IsContentProcess()) {
rootPresContext->ComputePluginGeometryUpdates(aBuilder->RootReferenceFrame(), aBuilder, this);
if (rootPresContext && XRE_IsContentProcess()) {
if (aBuilder->WillComputePluginGeometry()) {
rootPresContext->ComputePluginGeometryUpdates(aBuilder->RootReferenceFrame(), aBuilder, this);
}
// The layer system caches plugin configuration information for forwarding
// with layer updates which needs to get set during reflow. This must be
// called even if there are no windowed plugins in the page.
rootPresContext->CollectPluginGeometryUpdates(layerManager);
}
+7 -2
View File
@@ -2852,11 +2852,10 @@ nsPresContext::GetPrimaryFrameFor(nsIContent* aContent)
return nullptr;
}
size_t
nsPresContext::SizeOfExcludingThis(MallocSizeOf aMallocSizeOf) const
{
return mPropertyTable.SizeOfExcludingThis(aMallocSizeOf);
return mPropertyTable.SizeOfExcludingThis(aMallocSizeOf) +
mLangGroupFontPrefs.SizeOfExcludingThis(aMallocSizeOf);
// Measurement of other members may be added later if DMD finds it is
@@ -3209,6 +3208,12 @@ nsRootPresContext::CollectPluginGeometryUpdates(LayerManager* aLayerManager)
mozilla::layers::ClientLayerManager* clm = aLayerManager->AsClientLayerManager();
nsTArray<nsIWidget::Configuration> configurations;
// If there aren't any plugins to configure, clear the plugin data cache
// in the layer system.
if (!mRegisteredPlugins.Count() && clm) {
clm->StorePluginWidgetConfigurations(configurations);
return;
}
PluginGetGeometryUpdate(mRegisteredPlugins, &configurations);
if (configurations.IsEmpty()) {
PluginDidSetGeometry(mRegisteredPlugins);
@@ -8,21 +8,21 @@
<div id="c1" style="overflow-y:scroll; width:200px; height:200px; position:absolute; top:200px; left:0;">
<div style="height:400px;"></div>
<div><span id="target1"
style="display:inline-block; vertical-align:top; height:20px;">target</span>
style="display:inline-block; vertical-align:top; height:20px;"></span>
</div>
<div style="height:400px;"></div>
</div>
<div id="c2" style="overflow:hidden; width:200px; height:200px; position:absolute; top:200px; left:200px;">
<div style="height:400px;"></div>
<div><span id="target2"
style="display:inline-block; vertical-align:top; height:20px;">target2</span>
style="display:inline-block; vertical-align:top; height:20px;"></span>
</div>
<div style="height:400px;"></div>
</div>
<div id="c3" style="overflow-y:scroll; width:200px; height:200px; position:absolute; top:200px; left:400px;">
<div style="height:400px;"></div>
<div><span id="target3"
style="display:inline-block; vertical-align:top; height:300px;">target3</span>
style="display:inline-block; vertical-align:top; height:300px;"></span>
</div>
<div style="height:400px;"></div>
</div>
@@ -32,21 +32,21 @@
<body style='margin:0; overflow:hidden;'>
<div style='height:400px;'></div>
<div><span id='target4'
style='display:inline-block; vertical-align:top; height:300px;'>target4</span>
style='display:inline-block; vertical-align:top; height:300px;'></span>
</div>
<div style='height:400px;'></div>">
</iframe>
</div>
<div id="c5" style="overflow-y:scroll; width:200px; height:200px; position:absolute; top:400px; left:0;">
<div style="-moz-transform:translateY(400px); transform:translateY(400px)">
<span id="target5" style="display:inline-block; vertical-align:top; height:20px;">target</span>
<span id="target5" style="display:inline-block; vertical-align:top; height:20px;"></span>
</div>
<div style="height:800px;"></div>
</div>
<div id="c6" style="overflow-y:scroll; width:200px; height:200px; position:absolute; top:400px; left:200px;">
<div style="height:200px"></div>
<div style="height:100px; -moz-transform:scale(2); transform:scale(2)">
<span id="target6" style="display:inline-block; vertical-align:top; height:20px;">target</span>
<span id="target6" style="display:inline-block; vertical-align:top; height:20px;"></span>
</div>
<div style="height:800px;"></div>
</div>
@@ -54,7 +54,7 @@
<div style="overflow:auto; height:200px; -moz-transform:translateY(400px); transform:translateY(400px)">
<div style="height:200px;"></div>
<div>
<span id="target7" style="display:inline-block; vertical-align:top; height:20px;">target</span>
<span id="target7" style="display:inline-block; vertical-align:top; height:20px;"></span>
</div>
<div style="height:800px;"></div>
</div>
+6
View File
@@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<div style="display: ruby-text; margin: 288230376151711740%"></div>
</body>
</html>
+9 -18
View File
@@ -113,36 +113,27 @@ nsAbsoluteContainingBlock::Reflow(nsContainerFrame* aDelegatingFrame,
const nsHTMLReflowState& aReflowState,
nsReflowStatus& aReflowStatus,
const nsRect& aContainingBlock,
bool aConstrainHeight,
bool aCBWidthChanged,
bool aCBHeightChanged,
AbsPosReflowFlags aFlags,
nsOverflowAreas* aOverflowAreas)
{
nsReflowStatus reflowStatus = NS_FRAME_COMPLETE;
bool reflowAll = aReflowState.ShouldReflowAllKids();
// The 'width' check below is an optimization to avoid the virtual GetType()
// call in most cases. 'aContainingBlock' isn't used for grid items,
// each item has its own CB on a frame property instead.
// @see nsGridContainerFrame::ReflowChildren
const bool isGrid =
aContainingBlock.width == nsGridContainerFrame::VERY_LIKELY_A_GRID_CONTAINER &&
aDelegatingFrame->GetType() == nsGkAtoms::gridContainerFrame;
const bool reflowAll = aReflowState.ShouldReflowAllKids();
const bool isGrid = !!(aFlags & AbsPosReflowFlags::eIsGridContainerCB);
nsIFrame* kidFrame;
nsOverflowContinuationTracker tracker(aDelegatingFrame, true);
for (kidFrame = mAbsoluteFrames.FirstChild(); kidFrame; kidFrame = kidFrame->GetNextSibling()) {
bool kidNeedsReflow = reflowAll || NS_SUBTREE_DIRTY(kidFrame) ||
FrameDependsOnContainer(kidFrame, aCBWidthChanged, aCBHeightChanged);
FrameDependsOnContainer(kidFrame,
!!(aFlags & AbsPosReflowFlags::eCBWidthChanged),
!!(aFlags & AbsPosReflowFlags::eCBHeightChanged));
if (kidNeedsReflow && !aPresContext->HasPendingInterrupt()) {
// Reflow the frame
nsReflowStatus kidStatus = NS_FRAME_COMPLETE;
const nsRect& cb = isGrid ? nsGridContainerFrame::GridItemCB(kidFrame)
: aContainingBlock;
ReflowAbsoluteFrame(aDelegatingFrame, aPresContext, aReflowState, cb,
aConstrainHeight, kidFrame, kidStatus,
aOverflowAreas);
aFlags, kidFrame, kidStatus, aOverflowAreas);
nsIFrame* nextFrame = kidFrame->GetNextInFlow();
if (!NS_FRAME_IS_FULLY_COMPLETE(kidStatus) &&
aDelegatingFrame->IsFrameOfType(nsIFrame::eCanContainOverflowContainers)) {
@@ -354,7 +345,7 @@ nsAbsoluteContainingBlock::ReflowAbsoluteFrame(nsIFrame* aDelegat
nsPresContext* aPresContext,
const nsHTMLReflowState& aReflowState,
const nsRect& aContainingBlock,
bool aConstrainBSize,
AbsPosReflowFlags aFlags,
nsIFrame* aKidFrame,
nsReflowStatus& aStatus,
nsOverflowAreas* aOverflowAreas)
@@ -404,7 +395,7 @@ nsAbsoluteContainingBlock::ReflowAbsoluteFrame(nsIFrame* aDelegat
const LogicalMargin margin =
kidReflowState.ComputedLogicalMargin().ConvertTo(outerWM, wm);
bool constrainBSize = (aReflowState.AvailableBSize() != NS_UNCONSTRAINEDSIZE)
&& aConstrainBSize
&& (aFlags & AbsPosReflowFlags::eConstrainHeight)
// Don't split if told not to (e.g. for fixed frames)
&& (aDelegatingFrame->GetType() != nsGkAtoms::inlineFrame)
//XXX we don't handle splitting frames for inline absolute containing blocks yet
+16 -4
View File
@@ -13,6 +13,7 @@
#include "nsFrameList.h"
#include "nsIFrame.h"
#include "mozilla/TypedEnumBits.h"
class nsContainerFrame;
struct nsHTMLReflowState;
@@ -68,6 +69,14 @@ public:
ChildListID aListID,
nsIFrame* aOldFrame);
enum class AbsPosReflowFlags {
eConstrainHeight = 0x1,
eCBWidthChanged = 0x2,
eCBHeightChanged = 0x4,
eCBWidthAndHeightChanged = eCBWidthChanged | eCBHeightChanged,
eIsGridContainerCB = 0x8,
};
/**
* Called by the delegating frame after it has done its reflow first. This
* function will reflow any absolutely positioned child frames that need to
@@ -81,15 +90,15 @@ public:
* @param aReflowStatus is assumed to be already-initialized, e.g. with the
* status of the delegating frame's main reflow. This function merges in the
* statuses of the absolutely positioned children's reflows.
*
* @param aFlags zero or more AbsPosReflowFlags
*/
void Reflow(nsContainerFrame* aDelegatingFrame,
nsPresContext* aPresContext,
const nsHTMLReflowState& aReflowState,
nsReflowStatus& aReflowStatus,
const nsRect& aContainingBlock,
bool aConstrainHeight,
bool aCBWidthChanged,
bool aCBHeightChanged,
AbsPosReflowFlags aFlags,
nsOverflowAreas* aOverflowAreas);
void DestroyFrames(nsIFrame* aDelegatingFrame,
@@ -121,7 +130,7 @@ protected:
nsPresContext* aPresContext,
const nsHTMLReflowState& aReflowState,
const nsRect& aContainingBlockRect,
bool aConstrainHeight,
AbsPosReflowFlags aFlags,
nsIFrame* aKidFrame,
nsReflowStatus& aStatus,
nsOverflowAreas* aOverflowAreas);
@@ -142,4 +151,7 @@ protected:
#endif
};
namespace mozilla {
MOZ_MAKE_ENUM_CLASS_BITWISE_OPERATORS(nsAbsoluteContainingBlock::AbsPosReflowFlags)
}
#endif /* nsnsAbsoluteContainingBlock_h___ */
+9 -2
View File
@@ -63,6 +63,7 @@ static const char16_t kDiscCharacter = 0x2022;
using namespace mozilla;
using namespace mozilla::css;
using namespace mozilla::layout;
typedef nsAbsoluteContainingBlock::AbsPosReflowFlags AbsPosReflowFlags;
static void MarkAllDescendantLinesDirty(nsBlockFrame* aBlock)
{
@@ -1399,10 +1400,16 @@ nsBlockFrame::Reflow(nsPresContext* aPresContext,
nsRect containingBlock(nsPoint(0, 0),
containingBlockSize.GetPhysicalSize(parentWM));
AbsPosReflowFlags flags = AbsPosReflowFlags::eConstrainHeight;
if (cbWidthChanged) {
flags |= AbsPosReflowFlags::eCBWidthChanged;
}
if (cbHeightChanged) {
flags |= AbsPosReflowFlags::eCBHeightChanged;
}
absoluteContainer->Reflow(this, aPresContext, *reflowState,
state.mReflowStatus,
containingBlock, true,
cbWidthChanged, cbHeightChanged,
containingBlock, flags,
&aMetrics.mOverflowAreas);
}
}
+8 -2
View File
@@ -1061,8 +1061,14 @@ nsColumnSetFrame::Reflow(nsPresContext* aPresContext,
//------------ Handle Incremental Reflow -----------------
ReflowConfig config = ChooseColumnStrategy(aReflowState);
// If inline size is unconstrained, set aForceAuto to true to allow
// the columns to expand in the inline direction. (This typically
// happens in orthogonal flows where the inline direction is the
// container's block direction).
ReflowConfig config =
ChooseColumnStrategy(aReflowState,
aReflowState.ComputedISize() == NS_UNCONSTRAINEDSIZE);
// If balancing, then we allow the last column to grow to unbounded
// height during the first reflow. This gives us a way to estimate
// what the average column height should be, because we can measure
+7 -2
View File
@@ -109,6 +109,7 @@ using namespace mozilla::dom;
using namespace mozilla::gfx;
using namespace mozilla::layers;
using namespace mozilla::layout;
typedef nsAbsoluteContainingBlock::AbsPosReflowFlags AbsPosReflowFlags;
namespace mozilla {
namespace gfx {
@@ -4660,9 +4661,13 @@ nsFrame::ReflowAbsoluteFrames(nsPresContext* aPresContext,
NS_ASSERTION(container, "Abs-pos children only supported on container frames for now");
nsRect containingBlock(0, 0, containingBlockWidth, containingBlockHeight);
AbsPosReflowFlags flags =
AbsPosReflowFlags::eCBWidthAndHeightChanged; // XXX could be optimized
if (aConstrainBSize) {
flags |= AbsPosReflowFlags::eConstrainHeight;
}
absoluteContainer->Reflow(container, aPresContext, aReflowState, aStatus,
containingBlock,
aConstrainBSize, true, true, // XXX could be optimized
containingBlock, flags,
&aDesiredSize.mOverflowAreas);
}
}
+2
View File
@@ -61,6 +61,7 @@
#include "nsPluginFrame.h"
#include <mozilla/layers/AxisPhysicsModel.h>
#include <mozilla/layers/AxisPhysicsMSDModel.h>
#include "mozilla/layers/ScrollLinkedEffectDetector.h"
#include "mozilla/unused.h"
#include <algorithm>
#include <cstdlib> // for std::abs(int/long)
@@ -4246,6 +4247,7 @@ ScrollFrameHelper::FireScrollEvent()
nsPresContext* prescontext = mOuter->PresContext();
// Fire viewport scroll events at the document (where they
// will bubble to the window)
mozilla::layers::ScrollLinkedEffectDetector detector(content->GetComposedDoc());
if (mIsRoot) {
nsIDocument* doc = content->GetCurrentDoc();
if (doc) {
+67 -28
View File
@@ -27,9 +27,10 @@
#include "nsStyleContext.h"
using namespace mozilla;
typedef nsAbsoluteContainingBlock::AbsPosReflowFlags AbsPosReflowFlags;
typedef nsGridContainerFrame::TrackSize TrackSize;
const uint32_t nsGridContainerFrame::kTranslatedMaxLine =
uint32_t(nsStyleGridLine::kMaxLine - nsStyleGridLine::kMinLine - 1);
uint32_t(nsStyleGridLine::kMaxLine - nsStyleGridLine::kMinLine);
const uint32_t nsGridContainerFrame::kAutoLine = kTranslatedMaxLine + 3457U;
MOZ_MAKE_ENUM_CLASS_BITWISE_OPERATORS(TrackSize::StateBits)
@@ -271,9 +272,11 @@ struct MOZ_STACK_CLASS nsGridContainerFrame::Tracks
const LineRange& aRange,
nsIFrame* aGridItem);
/**
* Collect the tracks which are growable (matching aSelector) and return
* aAvailableSpace minus the sum of mBase's in aPlan for the tracks
* in aRange, or 0 if this subtraction goes below 0.
* Collect the tracks which are growable (matching aSelector) into
* aGrowableTracks, and return the amount of space that can be used
* to grow those tracks. Specifically, we return aAvailableSpace minus
* the sum of mBase's in aPlan (clamped to 0) for the tracks in aRange,
* or zero when there are no growable tracks.
* @note aPlan[*].mBase represents a planned new base or limit.
*/
static nscoord CollectGrowable(nscoord aAvailableSpace,
@@ -288,16 +291,15 @@ struct MOZ_STACK_CLASS nsGridContainerFrame::Tracks
const uint32_t end = aRange.mEnd;
for (uint32_t i = start; i < end; ++i) {
const TrackSize& sz = aPlan[i];
MOZ_ASSERT(!sz.IsFrozen());
space -= sz.mBase;
if (space <= 0) {
return 0;
}
if (sz.mState & aSelector) {
if ((sz.mState & aSelector) && !sz.IsFrozen()) {
aGrowableTracks.AppendElement(i);
}
}
return space;
return aGrowableTracks.IsEmpty() ? 0 : space;
}
void SetupGrowthPlan(nsTArray<TrackSize>& aPlan,
@@ -908,15 +910,36 @@ AlignJustifySelf(uint8_t aAlignment, bool aOverflowSafe, LogicalAxis aAxis,
}
}
const auto& styleMargin = aRS.mStyleMargin->mMargin;
bool hasAutoMarginStart;
bool hasAutoMarginEnd;
if (aAxis == eLogicalAxisBlock) {
hasAutoMarginStart = styleMargin.GetBStartUnit(wm) == eStyleUnit_Auto;
hasAutoMarginEnd = styleMargin.GetBEndUnit(wm) == eStyleUnit_Auto;
} else {
hasAutoMarginStart = styleMargin.GetIStartUnit(wm) == eStyleUnit_Auto;
hasAutoMarginEnd = styleMargin.GetIEndUnit(wm) == eStyleUnit_Auto;
}
// https://drafts.csswg.org/css-align-3/#overflow-values
// This implements <overflow-position> = 'safe'.
if (MOZ_UNLIKELY(aOverflowSafe) && aAlignment != NS_STYLE_ALIGN_START) {
// And auto-margins: https://drafts.csswg.org/css-grid/#auto-margins
if ((MOZ_UNLIKELY(aOverflowSafe) && aAlignment != NS_STYLE_ALIGN_START) ||
hasAutoMarginStart || hasAutoMarginEnd) {
nscoord space = SpaceToFill(wm, aChildSize, marginStart + marginEnd,
aAxis, aCBSize);
// XXX we might want to include == 0 here as an optimization -
// I need to see what the baseline/last-baseline code looks like first.
if (space < 0) {
// "Overflowing elements ignore their auto margins and overflow
// in the end directions"
aAlignment = NS_STYLE_ALIGN_START;
} else if (hasAutoMarginEnd) {
aAlignment = hasAutoMarginStart ? NS_STYLE_ALIGN_CENTER
: (aSameSide ? NS_STYLE_ALIGN_START
: NS_STYLE_ALIGN_END);
} else if (hasAutoMarginStart) {
aAlignment = aSameSide ? NS_STYLE_ALIGN_END : NS_STYLE_ALIGN_START;
}
}
@@ -941,15 +964,11 @@ AlignJustifySelf(uint8_t aAlignment, bool aOverflowSafe, LogicalAxis aAxis,
aAxis, aCBSize) / 2;
break;
case NS_STYLE_ALIGN_STRETCH: {
MOZ_ASSERT(!hasAutoMarginStart && !hasAutoMarginEnd);
offset = marginStart;
const auto& styleMargin = aRS.mStyleMargin->mMargin;
if (aAxis == eLogicalAxisBlock
? (aRS.mStylePosition->BSize(wm).GetUnit() == eStyleUnit_Auto &&
styleMargin.GetBStartUnit(wm) != eStyleUnit_Auto &&
styleMargin.GetBEndUnit(wm) != eStyleUnit_Auto)
: (aRS.mStylePosition->ISize(wm).GetUnit() == eStyleUnit_Auto &&
styleMargin.GetIStartUnit(wm) != eStyleUnit_Auto &&
styleMargin.GetIEndUnit(wm) != eStyleUnit_Auto)) {
? (aRS.mStylePosition->BSize(wm).GetUnit() == eStyleUnit_Auto)
: (aRS.mStylePosition->ISize(wm).GetUnit() == eStyleUnit_Auto)) {
nscoord size = aAxis == eLogicalAxisBlock ? aChildSize.BSize(wm)
: aChildSize.ISize(wm);
nscoord gap = aCBSize - (size + marginStart + marginEnd);
@@ -1563,7 +1582,7 @@ nsGridContainerFrame::PlaceAutoCol(uint32_t aStartCol, GridArea* aArea) const
{
MOZ_ASSERT(aArea->mRows.IsDefinite() && aArea->mCols.IsAuto());
uint32_t col = FindAutoCol(aStartCol, aArea->mRows.mStart, aArea);
aArea->mCols.ResolveAutoPosition(col);
aArea->mCols.ResolveAutoPosition(col, mExplicitGridOffsetCol);
MOZ_ASSERT(aArea->IsDefinite());
}
@@ -1601,7 +1620,7 @@ nsGridContainerFrame::PlaceAutoRow(uint32_t aStartRow, GridArea* aArea) const
{
MOZ_ASSERT(aArea->mCols.IsDefinite() && aArea->mRows.IsAuto());
uint32_t row = FindAutoRow(aArea->mCols.mStart, aStartRow, aArea);
aArea->mRows.ResolveAutoPosition(row);
aArea->mRows.ResolveAutoPosition(row, mExplicitGridOffsetRow);
MOZ_ASSERT(aArea->IsDefinite());
}
@@ -1625,8 +1644,8 @@ nsGridContainerFrame::PlaceAutoAutoInRowOrder(uint32_t aStartCol,
}
MOZ_ASSERT(row < gridRowEnd || col == 0,
"expected column 0 for placing in a new row");
aArea->mCols.ResolveAutoPosition(col);
aArea->mRows.ResolveAutoPosition(row);
aArea->mCols.ResolveAutoPosition(col, mExplicitGridOffsetCol);
aArea->mRows.ResolveAutoPosition(row, mExplicitGridOffsetRow);
MOZ_ASSERT(aArea->IsDefinite());
}
@@ -1650,8 +1669,8 @@ nsGridContainerFrame::PlaceAutoAutoInColOrder(uint32_t aStartCol,
}
MOZ_ASSERT(col < gridColEnd || row == 0,
"expected row 0 for placing in a new column");
aArea->mCols.ResolveAutoPosition(col);
aArea->mRows.ResolveAutoPosition(row);
aArea->mCols.ResolveAutoPosition(col, mExplicitGridOffsetCol);
aArea->mRows.ResolveAutoPosition(row, mExplicitGridOffsetRow);
MOZ_ASSERT(aArea->IsDefinite());
}
@@ -1993,7 +2012,8 @@ ContentContribution(nsIFrame* aChild,
#endif
// XXX this will give mostly correct results for now (until bug 1174569).
LogicalSize availableSize(wm, INFINITE_ISIZE_COORD, NS_UNCONSTRAINEDSIZE);
nsHTMLReflowState childRS(pc, *rs, aChild, availableSize);
nsHTMLReflowState childRS(pc, *rs, aChild, availableSize, nullptr,
nsHTMLReflowState::COMPUTE_SIZE_SHRINK_WRAP);
nsHTMLReflowMetrics childSize(childRS);
nsReflowStatus childStatus;
const uint32_t flags = NS_FRAME_NO_MOVE_FRAME | NS_FRAME_NO_SIZE_VIEW;
@@ -2933,13 +2953,16 @@ nsGridContainerFrame::ReflowChildren(GridReflowState& aState,
}
*cb = itemCB.GetPhysicalRect(wm, gridCBPhysicalSize);
}
// This rect isn't used at all for layout so we use it to optimize
// away the virtual GetType() call in the callee in most cases.
// @see nsAbsoluteContainingBlock::Reflow
nsRect dummyRect(0, 0, VERY_LIKELY_A_GRID_CONTAINER, 0);
// We pass a dummy rect as CB because each child has its own CB rect.
// The eIsGridContainerCB flag tells nsAbsoluteContainingBlock::Reflow to
// use those instead.
nsRect dummyRect;
AbsPosReflowFlags flags =
AbsPosReflowFlags::eCBWidthAndHeightChanged; // XXX could be optimized
flags |= AbsPosReflowFlags::eConstrainHeight;
flags |= AbsPosReflowFlags::eIsGridContainerCB;
GetAbsoluteContainingBlock()->Reflow(this, pc, *aState.mReflowState,
aStatus, dummyRect, true,
true, true, // XXX could be optimized
aStatus, dummyRect, flags,
&aDesiredSize.mOverflowAreas);
}
}
@@ -2979,11 +3002,27 @@ nsGridContainerFrame::Reflow(nsPresContext* aPresContext,
LogicalSize(wm, computedISize, computedBSize),
nsLayoutUtils::PREF_ISIZE);
// FIXME bug 1229180: Instead of doing this on every reflow, we should only
// set these properties if they are needed.
nsTArray<nscoord> colTrackSizes(gridReflowState.mCols.mSizes.Length());
for (const TrackSize& sz : gridReflowState.mCols.mSizes) {
colTrackSizes.AppendElement(sz.mBase);
}
Properties().Set(GridColTrackSizes(),
new nsTArray<nscoord>(mozilla::Move(colTrackSizes)));
nsTArray<nscoord> rowTrackSizes(gridReflowState.mRows.mSizes.Length());
for (const TrackSize& sz : gridReflowState.mRows.mSizes) {
rowTrackSizes.AppendElement(sz.mBase);
}
Properties().Set(GridRowTrackSizes(),
new nsTArray<nscoord>(mozilla::Move(rowTrackSizes)));
nscoord bSize = 0;
if (computedBSize == NS_AUTOHEIGHT) {
for (uint32_t i = 0; i < mGridRowEnd; ++i) {
bSize += gridReflowState.mRows.mSizes[i].mBase;
}
bSize += gridReflowState.mRows.SumOfGridGaps();
} else {
bSize = computedBSize;
}
+25 -13
View File
@@ -86,11 +86,22 @@ public:
StateBits mState;
};
// @see nsAbsoluteContainingBlock::Reflow about this magic number
static const nscoord VERY_LIKELY_A_GRID_CONTAINER = -123456789;
NS_DECLARE_FRAME_PROPERTY(GridItemContainingBlockRect, DeleteValue<nsRect>)
NS_DECLARE_FRAME_PROPERTY(GridColTrackSizes, DeleteValue<nsTArray<nscoord>>)
const nsTArray<nscoord>* GetComputedTemplateColumns()
{
return static_cast<nsTArray<nscoord>*>(Properties().Get(GridColTrackSizes()));
}
NS_DECLARE_FRAME_PROPERTY(GridRowTrackSizes, DeleteValue<nsTArray<nscoord>>)
const nsTArray<nscoord>* GetComputedTemplateRows()
{
return static_cast<nsTArray<nscoord>*>(Properties().Get(GridRowTrackSizes()));
}
protected:
static const uint32_t kAutoLine;
// The maximum line number, in the zero-based translated grid.
@@ -161,17 +172,19 @@ protected:
* Resolve this auto range to start at aStart, making it definite.
* Precondition: this range IsAuto()
*/
void ResolveAutoPosition(uint32_t aStart)
void ResolveAutoPosition(uint32_t aStart, uint32_t aExplicitGridOffset)
{
MOZ_ASSERT(IsAuto(), "Why call me?");
mStart = aStart;
mEnd += aStart;
// Clamping per http://dev.w3.org/csswg/css-grid/#overlarge-grids :
if (MOZ_UNLIKELY(mStart >= kTranslatedMaxLine)) {
mEnd = kTranslatedMaxLine;
// Clamping to where kMaxLine is in the explicit grid, per
// http://dev.w3.org/csswg/css-grid/#overlarge-grids :
uint32_t translatedMax = aExplicitGridOffset + nsStyleGridLine::kMaxLine;
if (MOZ_UNLIKELY(mStart >= translatedMax)) {
mEnd = translatedMax;
mStart = mEnd - 1;
} else if (MOZ_UNLIKELY(mEnd > kTranslatedMaxLine)) {
mEnd = kTranslatedMaxLine;
} else if (MOZ_UNLIKELY(mEnd > translatedMax)) {
mEnd = translatedMax;
}
}
/**
@@ -233,15 +246,14 @@ protected:
};
/**
* Return aLine if it's inside the aMin..aMax range (inclusive), otherwise
* return kAutoLine. If the range is empty (aMin == aMax, i.e. there are
* no tracks in the grid) then aLine is outside.
* Return aLine if it's inside the aMin..aMax range (inclusive),
* otherwise return kAutoLine.
*/
static int32_t
AutoIfOutside(int32_t aLine, int32_t aMin, int32_t aMax)
{
MOZ_ASSERT(aMin <= aMax);
if (aLine < aMin || aLine > aMax || aMin == aMax) {
if (aLine < aMin || aLine > aMax) {
return kAutoLine;
}
return aLine;
+121 -123
View File
@@ -79,6 +79,9 @@ nsHTMLReflowState::nsHTMLReflowState(nsPresContext* aPresContext,
if (aFlags & DUMMY_PARENT_REFLOW_STATE) {
mFlags.mDummyParentReflowState = true;
}
if (aFlags & COMPUTE_SIZE_SHRINK_WRAP) {
mFlags.mShrinkWrap = true;
}
if (!(aFlags & CALLER_WILL_INIT)) {
Init(aPresContext);
@@ -219,6 +222,7 @@ nsHTMLReflowState::nsHTMLReflowState(
mFlags.mIsColumnBalancing = false;
mFlags.mIsFlexContainerMeasuringHeight = false;
mFlags.mDummyParentReflowState = false;
mFlags.mShrinkWrap = !!(aFlags & COMPUTE_SIZE_SHRINK_WRAP);
mDiscoveredClearance = nullptr;
mPercentBSizeObserver = (aParentReflowState.mPercentBSizeObserver &&
@@ -444,11 +448,19 @@ nsHTMLReflowState::Init(nsPresContext* aPresContext,
}
}
if (AvailableBSize() != NS_UNCONSTRAINEDSIZE && parentReflowState &&
if (parentReflowState &&
parentReflowState->GetWritingMode().IsOrthogonalTo(mWritingMode)) {
// Orthogonal frames are always reflowed with unconstrained block-size,
// to avoid incomplete reflow across an orthogonal boundary.
AvailableBSize() = NS_UNCONSTRAINEDSIZE;
// Orthogonal frames are always reflowed with an unconstrained
// dimension to avoid incomplete reflow across an orthogonal
// boundary. Normally this is the block-size, but for column sets
// with auto-height it's the inline-size, so that they can add
// columns in the container's block direction
if (type == nsGkAtoms::columnSetFrame &&
eStyleUnit_Auto == mStylePosition->ISize(mWritingMode).GetUnit()) {
ComputedISize() = NS_UNCONSTRAINEDSIZE;
} else {
AvailableBSize() = NS_UNCONSTRAINEDSIZE;
}
}
LAYOUT_WARN_IF_FALSE((mFrameType == NS_CSS_FRAME_TYPE_INLINE &&
@@ -621,7 +633,7 @@ nsHTMLReflowState::InitResizeFlags(nsPresContext* aPresContext, nsIAtom* aFrameT
// mCBReflowState->IsBResize() is set correctly below when
// reflowing descendant.
SetBResize(true);
} else if (mCBReflowState && !nsLayoutUtils::IsNonWrapperBlock(frame)) {
} else if (mCBReflowState && frame->IsBlockWrapper()) {
// XXX Is this problematic for relatively positioned inlines acting
// as containing block for absolutely positioned elements?
// Possibly; in that case we should at least be checking
@@ -1017,11 +1029,10 @@ nsHTMLReflowState::GetHypotheticalBoxContainer(nsIFrame* aFrame,
state = nullptr;
}
WritingMode wm = aFrame->GetWritingMode();
if (state) {
WritingMode stateWM = state->GetWritingMode();
aCBIStartEdge =
state->ComputedLogicalBorderPadding().ConvertTo(wm, stateWM).IStart(wm);
WritingMode wm = state->GetWritingMode();
NS_ASSERTION(wm == aFrame->GetWritingMode(), "unexpected writing mode");
aCBIStartEdge = state->ComputedLogicalBorderPadding().IStart(wm);
aCBSize = state->ComputedSize(wm);
} else {
/* Didn't find a reflow state for aFrame. Just compute the information we
@@ -1029,6 +1040,7 @@ nsHTMLReflowState::GetHypotheticalBoxContainer(nsIFrame* aFrame,
ought to be true by now. */
NS_ASSERTION(!(aFrame->GetStateBits() & NS_FRAME_IN_REFLOW),
"aFrame shouldn't be in reflow; we'll lie if it is");
WritingMode wm = aFrame->GetWritingMode();
LogicalMargin borderPadding = aFrame->GetLogicalUsedBorderAndPadding(wm);
aCBIStartEdge = borderPadding.IStart(wm);
aCBSize = aFrame->GetLogicalSize(wm) - borderPadding.Size(wm);
@@ -1037,27 +1049,12 @@ nsHTMLReflowState::GetHypotheticalBoxContainer(nsIFrame* aFrame,
return aFrame;
}
// When determining the hypothetical box that would have been if the element
// had been in the flow we may not be able to exactly determine both the IStart
// and IEnd edges. For example, if the element is a non-replaced inline-level
// element we would have to reflow it in order to determine its desired ISize.
// In that case depending on the progression direction either the IStart or
// IEnd edge would be marked as not being exact.
struct nsHypotheticalBox {
// offsets from inline-start edge of containing block (which is a padding edge)
nscoord mIStart, mIEnd;
struct nsHypotheticalPosition {
// offset from inline-start edge of containing block (which is a padding edge)
nscoord mIStart;
// offset from block-start edge of containing block (which is a padding edge)
nscoord mBStart;
WritingMode mWritingMode;
#ifdef DEBUG
bool mIStartIsExact, mIEndIsExact;
#endif
nsHypotheticalBox() {
#ifdef DEBUG
mIStartIsExact = mIEndIsExact = false;
#endif
}
};
static bool
@@ -1191,20 +1188,22 @@ static bool AreAllEarlierInFlowFramesEmpty(nsIFrame* aFrame,
return true;
}
// Calculate the hypothetical box that the element would have if it were in
// the flow. The values returned are relative to the padding edge of the
// absolute containing block. The writing-mode of the hypothetical box will
// Calculate the position of the hypothetical box that the element would have
// if it were in the flow.
// The values returned are relative to the padding edge of the absolute
// containing block. The writing-mode of the hypothetical box position will
// have the same block direction as the absolute containing block, but may
// differ in inline-bidi direction.
// In the code below, |cbrs->frame| is the absolute containing block, while
// |containingBlock| is the nearest block container of the placeholder frame,
// which may be different from the absolute containing block.
void
nsHTMLReflowState::CalculateHypotheticalBox(nsPresContext* aPresContext,
nsIFrame* aPlaceholderFrame,
const nsHTMLReflowState* cbrs,
nsHypotheticalBox& aHypotheticalBox,
nsIAtom* aFrameType)
nsHTMLReflowState::CalculateHypotheticalPosition
(nsPresContext* aPresContext,
nsIFrame* aPlaceholderFrame,
const nsHTMLReflowState* cbrs,
nsHypotheticalPosition& aHypotheticalPos,
nsIAtom* aFrameType)
{
NS_ASSERTION(mStyleDisplay->mOriginalDisplay != NS_STYLE_DISPLAY_NONE,
"mOriginalDisplay has not been properly initialized");
@@ -1311,7 +1310,7 @@ nsHTMLReflowState::CalculateHypotheticalBox(nsPresContext* aPresContext,
if (!isValid) {
// Give up. We're probably dealing with somebody using
// position:absolute inside native-anonymous content anyway.
aHypotheticalBox.mBStart = placeholderOffset.B(wm);
aHypotheticalPos.mBStart = placeholderOffset.B(wm);
} else {
NS_ASSERTION(iter.GetContainer() == blockFrame,
"Found placeholder in wrong block!");
@@ -1325,7 +1324,7 @@ nsHTMLReflowState::CalculateHypotheticalBox(nsPresContext* aPresContext,
if (mStyleDisplay->IsOriginalDisplayInlineOutsideStyle()) {
// Use the block-start of the inline box which the placeholder lives in
// as the hypothetical box's block-start.
aHypotheticalBox.mBStart = lineBounds.BStart(wm) + blockOffset.B(wm);
aHypotheticalPos.mBStart = lineBounds.BStart(wm) + blockOffset.B(wm);
} else {
// The element would have been block-level which means it would
// be below the line containing the placeholder frame, unless
@@ -1350,15 +1349,17 @@ nsHTMLReflowState::CalculateHypotheticalBox(nsPresContext* aPresContext,
// The top of the hypothetical box is the top of the line
// containing the placeholder, since there is nothing in the
// line before our placeholder except empty frames.
aHypotheticalBox.mBStart = lineBounds.BStart(wm) + blockOffset.B(wm);
aHypotheticalPos.mBStart =
lineBounds.BStart(wm) + blockOffset.B(wm);
} else {
// The top of the hypothetical box is just below the line
// containing the placeholder.
aHypotheticalBox.mBStart = lineBounds.BEnd(wm) + blockOffset.B(wm);
aHypotheticalPos.mBStart =
lineBounds.BEnd(wm) + blockOffset.B(wm);
}
} else {
// Just use the placeholder's block-offset wrt the containing block
aHypotheticalBox.mBStart = placeholderOffset.B(wm);
aHypotheticalPos.mBStart = placeholderOffset.B(wm);
}
}
}
@@ -1366,36 +1367,17 @@ nsHTMLReflowState::CalculateHypotheticalBox(nsPresContext* aPresContext,
// The containing block is not a block, so it's probably something
// like a XUL box, etc.
// Just use the placeholder's block-offset
aHypotheticalBox.mBStart = placeholderOffset.B(wm);
aHypotheticalPos.mBStart = placeholderOffset.B(wm);
}
// Second, determine the hypothetical box's mIStart & mIEnd.
// Second, determine the hypothetical box's mIStart.
// How we determine the hypothetical box depends on whether the element
// would have been inline-level or block-level
if (mStyleDisplay->IsOriginalDisplayInlineOutsideStyle()) {
// The placeholder represents the left edge of the hypothetical box
aHypotheticalBox.mIStart = placeholderOffset.I(wm);
aHypotheticalPos.mIStart = placeholderOffset.I(wm);
} else {
aHypotheticalBox.mIStart = blockIStartContentEdge;
}
#ifdef DEBUG
aHypotheticalBox.mIStartIsExact = true;
#endif
if (knowBoxISize) {
aHypotheticalBox.mIEnd = aHypotheticalBox.mIStart + boxISize;
#ifdef DEBUG
aHypotheticalBox.mIEndIsExact = true;
#endif
} else {
// We can't compute the inline-end edge because we don't know the desired
// inline-size. So instead use the end content edge of the block parent,
// but remember it's not exact
aHypotheticalBox.mIEnd =
blockIStartContentEdge + blockContentSize.ISize(wm);
#ifdef DEBUG
aHypotheticalBox.mIEndIsExact = false;
#endif
aHypotheticalPos.mIStart = blockIStartContentEdge;
}
// The current coordinate space is that of the nearest block to the placeholder.
@@ -1437,9 +1419,8 @@ nsHTMLReflowState::CalculateHypotheticalBox(nsPresContext* aPresContext,
}
nsSize cbrsSize = cbrs->ComputedSizeAsContainerIfConstrained();
LogicalPoint logCBOffs(wm, cbOffset, cbrsSize - containerSize);
aHypotheticalBox.mIStart += logCBOffs.I(wm);
aHypotheticalBox.mIEnd += logCBOffs.I(wm);
aHypotheticalBox.mBStart += logCBOffs.B(wm);
aHypotheticalPos.mIStart += logCBOffs.I(wm);
aHypotheticalPos.mBStart += logCBOffs.B(wm);
// The specified offsets are relative to the absolute containing block's
// padding edge and our current values are relative to the border edge, so
@@ -1447,20 +1428,19 @@ nsHTMLReflowState::CalculateHypotheticalBox(nsPresContext* aPresContext,
LogicalMargin border =
cbrs->ComputedLogicalBorderPadding() - cbrs->ComputedLogicalPadding();
border = border.ConvertTo(wm, cbrs->GetWritingMode());
aHypotheticalBox.mIStart -= border.IStart(wm);
aHypotheticalBox.mIEnd -= border.IStart(wm);
aHypotheticalBox.mBStart -= border.BStart(wm);
aHypotheticalPos.mIStart -= border.IStart(wm);
aHypotheticalPos.mBStart -= border.BStart(wm);
// At this point, we have computed aHypotheticalBox using the writing mode
// At this point, we have computed aHypotheticalPos using the writing mode
// of the placeholder's containing block.
if (cbwm.GetBlockDir() != wm.GetBlockDir()) {
// If the block direction we used in calculating aHypotheticalBox does not
// If the block direction we used in calculating aHypotheticalPos does not
// match the absolute containing block's, we need to convert here so that
// aHypotheticalBox is usable in relation to the absolute containing block.
// aHypotheticalPos is usable in relation to the absolute containing block.
// This requires computing or measuring the abspos frame's block-size,
// which is not otherwise required/used here (as aHypotheticalBox records
// only the block-start coordinate).
// which is not otherwise required/used here (as aHypotheticalPos
// records only the block-start coordinate).
// This is similar to the inline-size calculation for a replaced
// inline-level element or a block-level element (above), except that
@@ -1502,21 +1482,16 @@ nsHTMLReflowState::CalculateHypotheticalBox(nsPresContext* aPresContext,
LogicalSize boxSize(wm, knowBoxISize ? boxISize : 0, boxBSize);
LogicalPoint origin(wm, aHypotheticalBox.mIStart,
aHypotheticalBox.mBStart);
LogicalPoint origin(wm, aHypotheticalPos.mIStart,
aHypotheticalPos.mBStart);
origin = origin.ConvertTo(cbwm, wm, cbrsSize -
boxSize.GetPhysicalSize(wm));
aHypotheticalBox.mIStart = origin.I(cbwm);
aHypotheticalBox.mIEnd = aHypotheticalBox.mIStart +
boxSize.ConvertTo(cbwm, wm).ISize(cbwm);
#ifdef DEBUG
aHypotheticalBox.mIEndIsExact = false; // it may be fake
#endif
aHypotheticalBox.mBStart = origin.B(cbwm);
aHypotheticalBox.mWritingMode = cbwm;
aHypotheticalPos.mIStart = origin.I(cbwm);
aHypotheticalPos.mBStart = origin.B(cbwm);
aHypotheticalPos.mWritingMode = cbwm;
} else {
aHypotheticalBox.mWritingMode = wm;
aHypotheticalPos.mWritingMode = wm;
}
}
@@ -1543,15 +1518,15 @@ nsHTMLReflowState::InitAbsoluteConstraints(nsPresContext* aPresContext,
NS_ASSERTION(nullptr != placeholderFrame, "no placeholder frame");
// If both 'left' and 'right' are 'auto' or both 'top' and 'bottom' are
// 'auto', then compute the hypothetical box of where the element would
// 'auto', then compute the hypothetical box position where the element would
// have been if it had been in the flow
nsHypotheticalBox hypotheticalBox;
nsHypotheticalPosition hypotheticalPos;
if (((eStyleUnit_Auto == mStylePosition->mOffset.GetLeftUnit()) &&
(eStyleUnit_Auto == mStylePosition->mOffset.GetRightUnit())) ||
((eStyleUnit_Auto == mStylePosition->mOffset.GetTopUnit()) &&
(eStyleUnit_Auto == mStylePosition->mOffset.GetBottomUnit()))) {
CalculateHypotheticalBox(aPresContext, placeholderFrame, cbrs,
hypotheticalBox, aFrameType);
CalculateHypotheticalPosition(aPresContext, placeholderFrame, cbrs,
hypotheticalPos, aFrameType);
}
// Initialize the 'left' and 'right' computed offsets
@@ -1583,13 +1558,11 @@ nsHTMLReflowState::InitAbsoluteConstraints(nsPresContext* aPresContext,
}
if (iStartIsAuto && iEndIsAuto) {
NS_ASSERTION(hypotheticalBox.mIStartIsExact, "should always have "
"exact value on containing block's start side");
if (cbwm.IsBidiLTR() != hypotheticalBox.mWritingMode.IsBidiLTR()) {
offsets.IEnd(cbwm) = hypotheticalBox.mIStart;
if (cbwm.IsBidiLTR() != hypotheticalPos.mWritingMode.IsBidiLTR()) {
offsets.IEnd(cbwm) = hypotheticalPos.mIStart;
iEndIsAuto = false;
} else {
offsets.IStart(cbwm) = hypotheticalBox.mIStart;
offsets.IStart(cbwm) = hypotheticalPos.mIStart;
iStartIsAuto = false;
}
}
@@ -1613,7 +1586,7 @@ nsHTMLReflowState::InitAbsoluteConstraints(nsPresContext* aPresContext,
if (bStartIsAuto && bEndIsAuto) {
// Treat 'top' like 'static-position'
offsets.BStart(cbwm) = hypotheticalBox.mBStart;
offsets.BStart(cbwm) = hypotheticalPos.mBStart;
bStartIsAuto = false;
}
@@ -1624,6 +1597,10 @@ nsHTMLReflowState::InitAbsoluteConstraints(nsPresContext* aPresContext,
typedef nsIFrame::ComputeSizeFlags ComputeSizeFlags;
ComputeSizeFlags computeSizeFlags = ComputeSizeFlags::eDefault;
if (mFlags.mShrinkWrap) {
computeSizeFlags =
ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eShrinkWrap);
}
if (wm.IsOrthogonalTo(cbwm)) {
if (bStartIsAuto || bEndIsAuto) {
computeSizeFlags =
@@ -2026,11 +2003,11 @@ nsHTMLReflowState::ComputeContainingBlockRectangle(
cbSize.ISize(wm) = aContainingBlockRS->frame->ISize(wm) -
computedBorder.IStartEnd(wm);
NS_ASSERTION(cbSize.ISize(wm) >= 0,
"Negative containing block width!");
"Negative containing block isize!");
cbSize.BSize(wm) = aContainingBlockRS->frame->BSize(wm) -
computedBorder.BStartEnd(wm);
NS_ASSERTION(cbSize.BSize(wm) >= 0,
"Negative containing block height!");
"Negative containing block bsize!");
} else {
// If the ancestor is block-level, the containing block is formed by the
// padding edge of the ancestor
@@ -2254,11 +2231,12 @@ nsHTMLReflowState::InitConstraints(nsPresContext* aPresContext,
// this MUST come after we've computed our border and padding.
ComputeMinMaxValues(cbSize);
// Calculate the computed width and blockSize. This varies by frame type
// Calculate the computed inlineSize and blockSize.
// This varies by frame type.
if (NS_CSS_FRAME_TYPE_INTERNAL_TABLE == mFrameType) {
// Internal table elements. The rules vary depending on the type.
// Calculate the computed width
// Calculate the computed isize
bool rowOrRowGroup = false;
const nsStyleCoord &inlineSize = mStylePosition->ISize(wm);
nsStyleUnit inlineSizeUnit = inlineSize.GetUnit();
@@ -2281,11 +2259,11 @@ nsHTMLReflowState::InitConstraints(nsPresContext* aPresContext,
if (ComputedISize() < 0)
ComputedISize() = 0;
}
NS_ASSERTION(ComputedISize() >= 0, "Bogus computed width");
NS_ASSERTION(ComputedISize() >= 0, "Bogus computed isize");
} else {
NS_ASSERTION(inlineSizeUnit == inlineSize.GetUnit(),
"unexpected width unit change");
"unexpected inline size unit change");
ComputedISize() = ComputeISizeValue(cbSize.ISize(wm),
mStylePosition->mBoxSizing,
inlineSize);
@@ -2323,37 +2301,57 @@ nsHTMLReflowState::InitConstraints(nsPresContext* aPresContext,
typedef nsIFrame::ComputeSizeFlags ComputeSizeFlags;
ComputeSizeFlags computeSizeFlags =
isBlock ? ComputeSizeFlags::eDefault : ComputeSizeFlags::eShrinkWrap;
// Make sure legend frames with display:block and width:auto still
// shrink-wrap.
// Also shrink-wrap blocks that are orthogonal to their container.
if (isBlock &&
((aFrameType == nsGkAtoms::legendFrame &&
frame->StyleContext()->GetPseudo() != nsCSSAnonBoxes::scrolledContent) ||
(aFrameType == nsGkAtoms::scrollFrame &&
frame->GetContentInsertionFrame()->GetType() == nsGkAtoms::legendFrame) ||
(mCBReflowState &&
mCBReflowState->GetWritingMode().IsOrthogonalTo(mWritingMode)))) {
if (mFlags.mShrinkWrap) {
computeSizeFlags =
ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eShrinkWrap);
}
nsIFrame* parent = frame->GetParent();
nsIAtom* parentFrameType = parent ? parent->GetType() : nullptr;
if (parentFrameType == nsGkAtoms::flexContainerFrame) {
computeSizeFlags =
ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eShrinkWrap);
// If we're inside of a flex container that needs to measure our
// auto height, pass that information along to ComputeSize().
if (mFlags.mIsFlexContainerMeasuringHeight) {
if (parentFrameType == nsGkAtoms::gridContainerFrame) {
// Shrink-wrap grid items that will be aligned (rather than stretched)
// in its inline axis.
auto inlineAxisAlignment = wm.IsOrthogonalTo(cbwm) ?
mStylePosition->ComputedAlignSelf(mStyleDisplay,
frame->StyleContext()->GetParent()) :
mStylePosition->ComputedJustifySelf(mStyleDisplay,
frame->StyleContext()->GetParent());
if (inlineAxisAlignment != NS_STYLE_ALIGN_STRETCH ||
mStyleMargin->mMargin.GetIStartUnit(wm) == eStyleUnit_Auto ||
mStyleMargin->mMargin.GetIEndUnit(wm) == eStyleUnit_Auto) {
computeSizeFlags =
ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eUseAutoHeight);
ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eShrinkWrap);
}
} else {
MOZ_ASSERT(!mFlags.mIsFlexContainerMeasuringHeight,
"We're not in a flex container, so the flag "
"'mIsFlexContainerMeasuringHeight' shouldn't be set");
// Make sure legend frames with display:block and width:auto still
// shrink-wrap.
// Also shrink-wrap blocks that are orthogonal to their container.
if (isBlock &&
((aFrameType == nsGkAtoms::legendFrame &&
frame->StyleContext()->GetPseudo() != nsCSSAnonBoxes::scrolledContent) ||
(aFrameType == nsGkAtoms::scrollFrame &&
frame->GetContentInsertionFrame()->GetType() == nsGkAtoms::legendFrame) ||
(mCBReflowState &&
mCBReflowState->GetWritingMode().IsOrthogonalTo(mWritingMode)))) {
computeSizeFlags =
ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eShrinkWrap);
}
if (parentFrameType == nsGkAtoms::flexContainerFrame) {
computeSizeFlags =
ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eShrinkWrap);
// If we're inside of a flex container that needs to measure our
// auto height, pass that information along to ComputeSize().
if (mFlags.mIsFlexContainerMeasuringHeight) {
computeSizeFlags =
ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eUseAutoHeight);
}
} else {
MOZ_ASSERT(!mFlags.mIsFlexContainerMeasuringHeight,
"We're not in a flex container, so the flag "
"'mIsFlexContainerMeasuringHeight' shouldn't be set");
}
}
if (cbSize.ISize(wm) == NS_UNCONSTRAINEDSIZE) {
+15 -10
View File
@@ -19,7 +19,7 @@ class nsRenderingContext;
class nsFloatManager;
class nsLineLayout;
class nsIPercentBSizeObserver;
struct nsHypotheticalBox;
struct nsHypotheticalPosition;
/**
* @return aValue clamped to [aMinValue, aMaxValue].
@@ -583,6 +583,7 @@ public:
// but its in a paginated environment
// (e.g. columns), it should always
// reflow its placeholder children.
uint16_t mShrinkWrap:1; // stores the COMPUTE_SIZE_SHRINK_WRAP ctor flag
} mFlags;
// Logical and physical accessors for the resize flags. All users should go
@@ -673,7 +674,11 @@ public:
// Indicates that the calling function will initialize the reflow state, and
// that the constructor should not call Init().
CALLER_WILL_INIT = (1<<1)
CALLER_WILL_INIT = (1<<1),
// The caller wants shrink-wrap behavior (i.e. ComputeSizeFlags::eShrinkWrap
// will be passed to ComputeSize()).
COMPUTE_SIZE_SHRINK_WRAP = (1<<2),
};
// This method initializes various data members. It is automatically
@@ -918,14 +923,14 @@ protected:
// Calculate a "hypothetical box" position where the placeholder frame
// (for a position:fixed/absolute element) would have been placed if it were
// positioned statically. The hypothetical box will have a writing mode with
// the same block direction as the absolute containing block (cbrs->frame),
// though it may differ in inline-bidi direction.
void CalculateHypotheticalBox(nsPresContext* aPresContext,
nsIFrame* aPlaceholderFrame,
const nsHTMLReflowState* cbrs,
nsHypotheticalBox& aHypotheticalBox,
nsIAtom* aFrameType);
// positioned statically. The hypothetical box position will have a writing
// mode with the same block direction as the absolute containing block
// (cbrs->frame), though it may differ in inline direction.
void CalculateHypotheticalPosition(nsPresContext* aPresContext,
nsIFrame* aPlaceholderFrame,
const nsHTMLReflowState* cbrs,
nsHypotheticalPosition& aHypotheticalPos,
nsIAtom* aFrameType);
void InitAbsoluteConstraints(nsPresContext* aPresContext,
const nsHTMLReflowState* cbrs,
+23 -8
View File
@@ -1435,11 +1435,17 @@ nsLineLayout::PlaceFrame(PerFrameData* pfd, nsHTMLReflowMetrics& aMetrics)
{
WritingMode lineWM = mRootSpan->mWritingMode;
// Record ascent and update max-ascent and max-descent values
if (aMetrics.BlockStartAscent() == nsHTMLReflowMetrics::ASK_FOR_BASELINE) {
pfd->mAscent = pfd->mFrame->GetLogicalBaseline(lineWM);
// If the frame's block direction does not match the line's, we can't use
// its ascent; instead, treat it as a block with baseline at the block-end
// edge (or block-begin in the case of an "inverted" line).
if (pfd->mFrame->GetWritingMode().GetBlockDir() != lineWM.GetBlockDir()) {
pfd->mAscent = lineWM.IsLineInverted() ? 0 : aMetrics.BSize(lineWM);
} else {
pfd->mAscent = aMetrics.BlockStartAscent();
if (aMetrics.BlockStartAscent() == nsHTMLReflowMetrics::ASK_FOR_BASELINE) {
pfd->mAscent = pfd->mFrame->GetLogicalBaseline(lineWM);
} else {
pfd->mAscent = aMetrics.BlockStartAscent();
}
}
// Advance to next inline coordinate
@@ -2199,9 +2205,18 @@ nsLineLayout::VerticalAlignFrames(PerSpanData* psd)
// "raises" the box by the given distance while a negative value
// "lowers" the box by the given distance (with zero being the
// baseline). Since Y coordinates increase towards the bottom of
// the screen we reverse the sign.
nscoord revisedBaselineBCoord = baselineBCoord - offset;
pfd->mBounds.BStart(lineWM) = revisedBaselineBCoord - pfd->mAscent;
// the screen we reverse the sign, unless the line orientation is
// inverted relative to block direction.
nscoord revisedBaselineBCoord = baselineBCoord - offset *
lineWM.FlowRelativeToLineRelativeFactor();
if (lineWM.IsVertical() && !lineWM.IsSideways()) {
// If we're using a dominant center baseline, we align with the center
// of the frame being placed (bug 1133945).
pfd->mBounds.BStart(lineWM) =
revisedBaselineBCoord - pfd->mBounds.BSize(lineWM)/2;
} else {
pfd->mBounds.BStart(lineWM) = revisedBaselineBCoord - pfd->mAscent;
}
pfd->mBlockDirAlign = VALIGN_OTHER;
}
@@ -2958,7 +2973,7 @@ FindNearestRubyBaseAncestor(nsIFrame* aFrame)
// XXX It is possible that no ruby base ancestor is found because of
// some edge cases like form control or canvas inside ruby text.
// See bug 1138092 comment 4.
NS_ASSERTION(aFrame, "No ruby base ancestor?");
NS_WARN_IF_FALSE(aFrame, "no ruby base ancestor?");
return aFrame;
}
+2 -2
View File
@@ -404,12 +404,12 @@ protected:
// XXX remove this when landing bug 154892 (splitting absolute positioned frames)
friend class nsInlineFrame;
nsBlockReflowState* mBlockRS;/* XXX hack! */
// XXX Take care that nsRubyBaseContainer would give nullptr to this
// member. It should not be a problem currently, since the only
// code use it is handling float, which does not affect ruby.
// See comment in nsLineLayout::AddFloat
nsBlockReflowState* mBlockRS;/* XXX hack! */
nsLineList::iterator mLineBox;
// Per-frame data recorded by the line-layout reflow logic. This
+4 -3
View File
@@ -340,9 +340,10 @@ nsRubyFrame::ReflowSegment(nsPresContext* aPresContext,
// Set block leadings of the base container
nscoord startLeading = baseRect.BStart(lineWM) - offsetRect.BStart(lineWM);
nscoord endLeading = offsetRect.BEnd(lineWM) - baseRect.BEnd(lineWM);
NS_ASSERTION(startLeading >= 0 && endLeading >= 0,
"Leadings should be non-negative (because adding "
"ruby annotation can only increase the size)");
// XXX When bug 765861 gets fixed, this warning should be upgraded.
NS_WARN_IF_FALSE(startLeading >= 0 && endLeading >= 0,
"Leadings should be non-negative (because adding "
"ruby annotation can only increase the size)");
mBStartLeading = std::max(mBStartLeading, startLeading);
mBEndLeading = std::max(mBEndLeading, endLeading);
}
+24 -20
View File
@@ -1914,29 +1914,21 @@ nsFrameSelection::GetFrameForNodeOffset(nsIContent* aNode,
theNode = childNode;
}
#ifdef DONT_DO_THIS_YET
// XXX: We can't use this code yet because the hinting
// can cause us to attach to the wrong line frame.
// Now that we have the child node, check if it too
// can contain children. If so, call this method again!
if (theNode->IsElement())
if (theNode->IsElement() &&
theNode->GetChildCount() &&
!theNode->HasIndependentSelection())
{
int32_t newOffset = 0;
if (aOffset > childIndex)
{
if (aOffset > childIndex) {
numChildren = theNode->GetChildCount();
newOffset = numChildren;
}
return GetFrameForNodeOffset(theNode, newOffset, aHint, aReturnOffset);
}
else
#endif // DONT_DO_THIS_YET
{
} else {
// Check to see if theNode is a text node. If it is, translate
// aOffset into an offset into the text node.
@@ -1958,13 +1950,25 @@ nsFrameSelection::GetFrameForNodeOffset(nsIContent* aNode,
}
else
*aReturnOffset = 0;
}
else
{
// If we're at a collapsed whitespace content node (which
// does not have a primary frame), just use the original node
// to get the frame on which we should put the caret.
theNode = aNode;
} else {
int32_t numChildren = aNode->GetChildCount();
int32_t newChildIndex =
aHint == CARET_ASSOCIATE_BEFORE ? childIndex - 1 : childIndex + 1;
if (newChildIndex >= 0 && newChildIndex < numChildren) {
nsCOMPtr<nsIContent> newChildNode = aNode->GetChildAt(newChildIndex);
if (!newChildNode)
return nullptr;
theNode = newChildNode;
int32_t newOffset =
aHint == CARET_ASSOCIATE_BEFORE ? theNode->GetChildCount() : 0;
return GetFrameForNodeOffset(theNode, newOffset, aHint, aReturnOffset);
} else {
// newChildIndex is illegal which means we're at first or last
// child. Just use original node to get the frame.
theNode = aNode;
}
}
}
}
+4 -3
View File
@@ -18,6 +18,7 @@
#include "nsIMozBrowserFrame.h"
using namespace mozilla;
typedef nsAbsoluteContainingBlock::AbsPosReflowFlags AbsPosReflowFlags;
ViewportFrame*
NS_NewViewportFrame(nsIPresShell* aPresShell, nsStyleContext* aContext)
@@ -350,10 +351,10 @@ ViewportFrame::Reflow(nsPresContext* aPresContext,
if (rootScrollFrame && !rootScrollFrame->IsIgnoringViewportClipping()) {
overflowAreas = nullptr;
}
AbsPosReflowFlags flags =
AbsPosReflowFlags::eCBWidthAndHeightChanged; // XXX could be optimized
GetAbsoluteContainingBlock()->Reflow(this, aPresContext, reflowState, aStatus,
rect,
false, true, true, // XXX could be optimized
overflowAreas);
rect, flags, overflowAreas);
}
if (mFrames.NotEmpty()) {
+24 -1
View File
@@ -318,7 +318,7 @@ inDOMUtils::GetRelativeRuleLine(nsIDOMCSSRule* aRule, uint32_t* _retval)
uint32_t lineNumber = rule->GetLineNumber();
CSSStyleSheet* sheet = rule->GetStyleSheet();
if (sheet) {
if (sheet && lineNumber != 0) {
nsINode* owningNode = sheet->GetOwnerNode();
if (owningNode) {
nsCOMPtr<nsIStyleSheetLinkingElement> link =
@@ -1187,6 +1187,29 @@ GetStatesForPseudoClass(const nsAString& aStatePseudo)
return sPseudoClassStates[nsCSSPseudoClasses::GetPseudoType(atom)];
}
NS_IMETHODIMP
inDOMUtils::GetCSSPseudoElementNames(uint32_t* aLength, char16_t*** aNames)
{
nsTArray<nsIAtom*> array;
for (int i = 0; i < nsCSSPseudoElements::ePseudo_PseudoElementCount; ++i) {
nsCSSPseudoElements::Type type = static_cast<nsCSSPseudoElements::Type>(i);
if (!nsCSSPseudoElements::PseudoElementIsUASheetOnly(type)) {
nsIAtom* atom = nsCSSPseudoElements::GetPseudoAtom(type);
array.AppendElement(atom);
}
}
*aLength = array.Length();
char16_t** ret =
static_cast<char16_t**>(moz_xmalloc(*aLength * sizeof(char16_t*)));
for (uint32_t i = 0; i < *aLength; ++i) {
ret[i] = ToNewUnicode(nsDependentAtomString(array[i]));
}
*aNames = ret;
return NS_OK;
}
NS_IMETHODIMP
inDOMUtils::AddPseudoClassLock(nsIDOMElement *aElement,
const nsAString &aPseudoClass)
+12 -1
View File
@@ -17,7 +17,7 @@ interface nsIDOMFontFaceList;
interface nsIDOMRange;
interface nsIDOMCSSStyleSheet;
[scriptable, uuid(60b4cbf7-2a08-4419-8937-6ef495417824)]
[scriptable, uuid(ec3dc3d5-41d1-4d08-ace5-7e944de6614d)]
interface inIDOMUtils : nsISupports
{
// CSS utilities
@@ -162,6 +162,17 @@ interface inIDOMUtils : nsISupports
nsIDOMFontFaceList getUsedFontFaces(in nsIDOMRange aRange);
/**
* Get the names of all the supported pseudo-elements.
* Pseudo-elements which are only accepted in UA style sheets are
* not included.
*
* @param {unsigned long} aCount the number of items returned
* @param {wstring[]} aNames the names
*/
void getCSSPseudoElementNames([optional] out unsigned long aCount,
[retval, array, size_is(aCount)] out wstring aNames);
// pseudo-class style locking methods. aPseudoClass must be a valid pseudo-class
// selector string, e.g. ":hover". ":-moz-any-link" and non-event-state
// pseudo-classes are ignored.
+1
View File
@@ -19,6 +19,7 @@ support-files =
[test_color_to_rgba.html]
[test_css_property_is_shorthand.html]
[test_css_property_is_valid.html]
[test_getCSSPseudoElementNames.html]
[test_getRelativeRuleLine.html]
[test_get_all_style_sheets.html]
[test_is_valid_css_color.html]
@@ -0,0 +1,57 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test inDOMUtils::getCSSPseudoElementNames</title>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<script type="application/javascript;version=1.8">
let utils = SpecialPowers.Cc["@mozilla.org/inspector/dom-utils;1"]
.getService(SpecialPowers.Ci.inIDOMUtils);
let expected = new Set([
":after",
":before",
":first-letter",
":first-line",
":-moz-color-swatch",
":-moz-focus-inner",
":-moz-focus-outer",
":-moz-list-bullet",
":-moz-list-number",
":-moz-math-anonymous",
":-moz-meter-bar",
":-moz-placeholder",
":-moz-progress-bar",
":-moz-range-progress",
":-moz-range-thumb",
":-moz-range-track",
":-moz-selection",
]);
let names = utils.getCSSPseudoElementNames();
for (let name of names) {
ok(expected.has(name), name + " is included");
expected.delete(name);
}
if (expected.size > 0) {
todo_is(expected.size, 0,
"ideally all pseudo-element names would be listed in this test");
for (let extra of expected) {
info("extra element: " + extra);
}
}
</script>
</head>
<body>
<h1>Test inDOMUtils::getCSSPseudoElementNames</h1>
<p id="display"></p>
<div id="content" style="display: none">
</div>
<pre id="test">
</pre>
</body>
</html>
@@ -34,10 +34,12 @@
{ sheetNo: 1, ruleNo: 0, lineNo: 2, columnNo: 15 },
{ sheetNo: 1, ruleNo: 1, lineNo: 8, columnNo: 5 },
{ sheetNo: 2, ruleNo: 0, lineNo: 1, columnNo: 1 },
{ sheetNo: 2, ruleNo: 1, lineNo: 0, columnNo: 1 },
{ sheetNo: 3, ruleNo: 0, lineNo: 5, columnNo: 6 },
];
function doTest() {
document.styleSheets[2].insertRule("body{}", 1);
for (let test of tests) {
let sheet = document.styleSheets[test.sheetNo];
let rule = sheet.cssRules[test.ruleNo];
+17
View File
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<style>
div {
height: 240px;
}
#f {
height: auto;
overflow: hidden;
padding: 0;
border: none;
}
</style>
There should be a visible fieldset below:
<div>
<fieldset id="f">This is fieldset</fieldset>
</div>
+21
View File
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<style>
div {
height: 240px;
}
#f {
height: 0;
overflow: hidden;
padding: 0;
border: none;
}
</style>
There should be a visible fieldset below:
<div>
<fieldset id="f">This is fieldset</fieldset>
</div>
<script>
h = document.body.clientHeight;
f.style.height = "auto";
</script>
+17
View File
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<style>
div {
height: 240px;
}
#f {
height: auto;
overflow: hidden;
padding: 0;
border: none;
}
</style>
There should be a visible button below:
<div>
<button id="f">This is button</button>
</div>
+21
View File
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<style>
div {
height: 240px;
}
#f {
height: 0;
overflow: hidden;
padding: 0;
border: none;
}
</style>
There should be a visible button below:
<div>
<button id="f">This is button</button>
</div>
<script>
h = document.body.clientHeight;
f.style.height = "auto";
</script>
+17
View File
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<style>
div {
height: 240px;
}
#f {
height: auto;
overflow: hidden;
padding: 0;
border: none;
}
</style>
There should be a visible table below:
<div>
<table id="f">This is a table</table>
</div>
+21
View File
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<style>
div {
height: 240px;
}
#f {
height: 0;
overflow: hidden;
padding: 0;
border: none;
}
</style>
There should be a visible table below:
<div>
<table id="f">This is a table</table>
</div>
<script>
h = document.body.clientHeight;
f.style.height = "auto";
</script>
+17
View File
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<style>
div {
height: 240px;
}
#f {
height: auto;
overflow: hidden;
padding: 0;
border: none;
}
</style>
There should be a visible select below:
<div>
<select id="f"><option>This is a select</option></select>
</div>
+21
View File
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<style>
div {
height: 240px;
}
#f {
height: 0;
overflow: hidden;
padding: 0;
border: none;
}
</style>
There should be a visible select below:
<div>
<select id="f"><option>This is a select</option></select>
</div>
<script>
h = document.body.clientHeight;
f.style.height = "auto";
</script>
+4
View File
@@ -1935,4 +1935,8 @@ fuzzy(1,74) fuzzy-if(gtkWidget,6,79) == 1174332-1.html 1174332-1-ref.html
== 1190635-1.html 1190635-1-ref.html
!= 1207326-1.html about:blank
== 1209603-1.html 1209603-1-ref.html
== 1209994-1.html 1209994-1-ref.html
== 1209994-2.html 1209994-2-ref.html
== 1209994-3.html 1209994-3-ref.html
== 1209994-4.html 1209994-4-ref.html
== 1222226-1.html 1222226-1-ref.html
@@ -163,17 +163,17 @@ span {
</div>
<div class="grid" style="width:43px; height:53px">
<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">a</span>
<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">b</span>
<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">c</span>
<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">d</span>
<span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span>
<span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span>
<span class="abs" style="left:1px; bottom:1px; height:58px; width:5px;">c</span>
<span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span>
</div>
<div class="grid" style="width:43px; height:28px; border-width:0;">
<span class="abs" style="right:48px; top:3px; height:22px; width:12px;"></span>
<span class="abs" style="right:48px; top:3px; height:11px; width:12px;"></span>
</div>
<div class="grid" style="width:43px; height:28px; border-width:0;">
<span class="abs" style="left:1px; bottom:57px; height:22px; width:12px;"></span>
<span class="abs" style="left:1px; bottom:57px; height:22px; width:5px;"></span>
</div>
<div class="grid" style="width:43px; height:28px; border-width:0;">
<span class="abs" style="right:48px; bottom:85px; height:22px; width:12px;"></span>
@@ -164,10 +164,10 @@ span {
</div>
<div class="grid" style="width:43px; height:53px">
<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">a</span>
<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">b</span>
<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">c</span>
<span class="abs" style="width:auto;height:auto; top:3px; left:1px; bottom:1px; right:5px">d</span>
<span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span>
<span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span>
<span class="abs" style="left:1px; bottom:1px; height:58px; width:5px;">c</span>
<span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span>
</div>
</div>
@@ -1,54 +0,0 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: abs pos areas in empty grid</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
<style type="text/css">
div {
display: block;
position: relative;
float: left;
width: 20px;
height: 20px;
background: red;
}
span {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lime;
}
</style>
</head>
<body>
There should be no red areas.
<br clear="all">
<div><span class="cs"></span></div>
<div><span class="ce"></span></div>
<div><span class="rs"></span></div>
<div><span class="rs"></span></div>
<div><span class="cs ce"></span></div>
<div><span class="cs rs"></span></div>
<div><span class="cs re"></span></div>
<div><span class="ce rs"></span></div>
<div><span class="ce re"></span></div>
<div><span class="rs re"></span></div>
<div><span class="cs ce rs"></span></div>
<div><span class="cs ce re"></span></div>
<div><span class="rs re cs"></span></div>
<div><span class="rs re ce"></span></div>
<div><span class="cs ce rs re"></span></div>
</body>
</html>
@@ -1,61 +0,0 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: abs pos areas in empty grid</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
<link rel="match" href="grid-abspos-items-011-ref.html">
<style type="text/css">
div {
display: grid;
position: relative;
float: left;
width: 20px;
height: 20px;
background: red;
}
span {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lime;
}
.cs { grid-column-start: 1; }
.ce { grid-column-end: 1; }
.rs { grid-row-start: 1; }
.re { grid-row-end: 1; }
</style>
</head>
<body>
There should be no red areas.
<br clear="all">
<div><span class="cs"></span></div>
<div><span class="ce"></span></div>
<div><span class="rs"></span></div>
<div><span class="rs"></span></div>
<div><span class="cs ce"></span></div>
<div><span class="cs rs"></span></div>
<div><span class="cs re"></span></div>
<div><span class="ce rs"></span></div>
<div><span class="ce re"></span></div>
<div><span class="rs re"></span></div>
<div><span class="cs ce rs"></span></div>
<div><span class="cs ce re"></span></div>
<div><span class="rs re cs"></span></div>
<div><span class="rs re ce"></span></div>
<div><span class="cs ce rs re"></span></div>
</body>
</html>
@@ -0,0 +1,45 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: margin:auto on grid abs.pos. child</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
<style type="text/css">
div {
display: block;
position: relative;
grid-template-columns: 100px;
grid-template-rows: 100px;
width: 100px;
height: 100px;
border: 1px solid;
}
span {
display: block;
position: absolute;
background: lime;
width: 20px;
height: 20px;
margin: 5px 7px 11px 13px;
top:0; left:0; right:0; bottom:0;
}
</style>
</head>
<body>
<div><span style="margin-left:auto"></span></div>
<div><span style="margin-right:auto"></span></div>
<div><span style="margin-left:auto; margin-right:auto"></span></div>
<div><span style="margin-top:auto"></span></div>
<div><span style="margin-bottom:auto"></span></div>
<div><span style="margin-top:auto; margin-bottom:auto"></span></div>
<div><span style="margin:auto"></span></div>
</body>
</html>
@@ -0,0 +1,47 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: margin:auto on grid abs.pos. child</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos">
<link rel="match" href="grid-abspos-items-012-ref.html">
<style type="text/css">
div {
display: grid;
position: relative;
grid-template-columns: 100px;
grid-template-rows: 100px;
width: 100px;
height: 100px;
border: 1px solid;
}
span {
display: block;
position: absolute;
background: lime;
width: 20px;
height: 20px;
margin: 5px 7px 11px 13px;
top:0; left:0; right:0; bottom:0;
}
</style>
</head>
<body>
<div><span style="margin-left:auto"></span></div>
<div><span style="margin-right:auto"></span></div>
<div><span style="margin-left:auto; margin-right:auto"></span></div>
<div><span style="margin-top:auto"></span></div>
<div><span style="margin-bottom:auto"></span></div>
<div><span style="margin-top:auto; margin-bottom:auto"></span></div>
<div><span style="margin:auto"></span></div>
</body>
</html>
@@ -0,0 +1,117 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: margin-left:auto + justify-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-inline-start: 2px solid lime; */
border-inline-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */
align-self: start;
}
.hl span { justify-self: right!important; }
.hr span { justify-self: right!important; }
.vl span { align-self: end!important; }
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.jstart { justify-self:start; }
.jend { justify-self:end; }
.jflexstart { justify-self:flex-start; }
.jflexend { justify-self:flex-end; }
.jselfstart { justify-self:self-start; }
.jselfend { justify-self:self-end; }
.jcenter { justify-self:center; }
.jleft { justify-self:left; }
.jright { justify-self:right; }
.jstretch1 { justify-self:stretch; }
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
.jstretch3 { justify-self:stretch; height:auto; }
.jstretch4 { justify-self:stretch; width:auto; }
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.jauto { justify-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " j" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,116 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: margin-left:auto + justify-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
<link rel="match" href="grid-item-margin-left-auto-001-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-inline-start: 2px solid lime; */
border-inline-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */
margin-left: auto;
align-self: start;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.jstart { justify-self:start; }
.jend { justify-self:end; }
.jflexstart { justify-self:flex-start; }
.jflexend { justify-self:flex-end; }
.jselfstart { justify-self:self-start; }
.jselfend { justify-self:self-end; }
.jcenter { justify-self:center; }
.jleft { justify-self:left; }
.jright { justify-self:right; }
.jstretch1 { justify-self:stretch; }
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
.jstretch3 { justify-self:stretch; height:auto; }
.jstretch4 { justify-self:stretch; width:auto; }
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.jauto { justify-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " j" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,115 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: margin-left:auto + justify-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-inline-start: 2px solid lime; */
border-inline-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 0px;
align-self: start;
}
.vlr span { align-self: end!important; }
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.jstart { justify-self:start; }
.jend { justify-self:end; }
.jflexstart { justify-self:flex-start; }
.jflexend { justify-self:flex-end; }
.jselfstart { justify-self:self-start; }
.jselfend { justify-self:self-end; }
.jcenter { justify-self:center; }
.jleft { justify-self:left; }
.jright { justify-self:right; }
.jstretch1 { justify-self:stretch; }
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
.jstretch3 { justify-self:stretch; height:auto; }
.jstretch4 { justify-self:stretch; width:auto; }
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.jauto { justify-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " j" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,116 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: margin-left:auto + justify-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
<link rel="match" href="grid-item-margin-left-auto-002-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-inline-start: 2px solid lime; */
border-inline-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px;
margin-left: auto;
align-self: start;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.jstart { justify-self:start; }
.jend { justify-self:end; }
.jflexstart { justify-self:flex-start; }
.jflexend { justify-self:flex-end; }
.jselfstart { justify-self:self-start; }
.jselfend { justify-self:self-end; }
.jcenter { justify-self:center; }
.jleft { justify-self:left; }
.jright { justify-self:right; }
.jstretch1 { justify-self:stretch; }
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
.jstretch3 { justify-self:stretch; height:auto; }
.jstretch4 { justify-self:stretch; width:auto; }
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.jauto { justify-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " j" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,116 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: margin-left:auto + align-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
border-block-start: 2px solid blue;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 0px;
justify-self: start;
}
.hl span { justify-self:end!important; }
.hr span { justify-self:start!important; }
.vl span { align-self:end!important; }
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.astart { align-self:start; }
.aend { align-self:end; }
.aflexstart { align-self:flex-start; }
.aflexend { align-self:flex-end; }
.aselfstart { align-self:self-start; }
.aselfend { align-self:self-end; }
.acenter { align-self:center; }
.aleft { align-self:left; }
.aright { align-self:right; }
.astretch1 { align-self:stretch; }
.astretch2 { align-self:stretch; width:13px; height:auto; }
.astretch3 { align-self:stretch; height:auto; }
.astretch4 { align-self:stretch; width:auto; }
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
.astretch6 { align-self:stretch; height:auto; max-height:9px; }
.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.aauto { align-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " a" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,115 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: margin-left:auto + align-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
<link rel="match" href="grid-item-margin-left-auto-003-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
border-block-start: 2px solid blue;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px;
margin-left: auto;
justify-self: start;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.astart { align-self:start; }
.aend { align-self:end; }
.aflexstart { align-self:flex-start; }
.aflexend { align-self:flex-end; }
.aselfstart { align-self:self-start; }
.aselfend { align-self:self-end; }
.acenter { align-self:center; }
.aleft { align-self:left; }
.aright { align-self:right; }
.astretch1 { align-self:stretch; }
.astretch2 { align-self:stretch; width:13px; height:auto; }
.astretch3 { align-self:stretch; height:auto; }
.astretch4 { align-self:stretch; width:auto; }
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
.astretch6 { align-self:stretch; height:auto; max-height:9px; }
.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.aauto { align-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " a" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,117 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: margin-left:auto + align-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-block-start: 2px solid blue; */
border-block-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 0px;
justify-self: start;
}
.vr span { align-self:start!important; }
.vlr span { align-self:end!important; }
.vrl span { align-self:start!important; }
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.astart { align-self:start; }
.aend { align-self:end; }
.aflexstart { align-self:flex-start; }
.aflexend { align-self:flex-end; }
.aselfstart { align-self:self-start; }
.aselfend { align-self:self-end; }
.acenter { align-self:center; }
.aleft { align-self:left; }
.aright { align-self:right; }
.astretch1 { align-self:stretch; }
.astretch2 { align-self:stretch; width:13px; height:auto; }
.astretch3 { align-self:stretch; height:auto; }
.astretch4 { align-self:stretch; width:auto; }
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
.astretch6 { align-self:stretch; height:auto; max-height:9px; }
.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.aauto { align-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " a" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,116 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: margin-left:auto + align-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
<link rel="match" href="grid-item-margin-left-auto-004-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-block-start: 2px solid blue; */
border-block-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px;
margin-left: auto;
justify-self: start;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.astart { align-self:start; }
.aend { align-self:end; }
.aflexstart { align-self:flex-start; }
.aflexend { align-self:flex-end; }
.aselfstart { align-self:self-start; }
.aselfend { align-self:self-end; }
.acenter { align-self:center; }
.aleft { align-self:left; }
.aright { align-self:right; }
.astretch1 { align-self:stretch; }
.astretch2 { align-self:stretch; width:13px; height:auto; }
.astretch3 { align-self:stretch; height:auto; }
.astretch4 { align-self:stretch; width:auto; }
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
.astretch6 { align-self:stretch; height:auto; max-height:9px; }
.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.aauto { align-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " a" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,117 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: margin-left/right:auto + justify-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-inline-start: 2px solid lime; */
border-inline-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 0px 2px 0px; /* overconstrained - we'll fix that below */
align-self: start;
}
.hl span { justify-self: center!important; }
.hr span { justify-self: center!important; }
.vl span { align-self: center!important; }
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.jstart { justify-self:start; }
.jend { justify-self:end; }
.jflexstart { justify-self:flex-start; }
.jflexend { justify-self:flex-end; }
.jselfstart { justify-self:self-start; }
.jselfend { justify-self:self-end; }
.jcenter { justify-self:center; }
.jleft { justify-self:left; }
.jright { justify-self:right; }
.jstretch1 { justify-self:stretch; }
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
.jstretch3 { justify-self:stretch; height:auto; }
.jstretch4 { justify-self:stretch; width:auto; }
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.jauto { justify-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " j" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,117 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: margin-left/right:auto + justify-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
<link rel="match" href="grid-item-margin-left-right-auto-001-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-inline-start: 2px solid lime; */
border-inline-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */
margin-left: auto;
margin-right: auto;
align-self: start;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.jstart { justify-self:start; }
.jend { justify-self:end; }
.jflexstart { justify-self:flex-start; }
.jflexend { justify-self:flex-end; }
.jselfstart { justify-self:self-start; }
.jselfend { justify-self:self-end; }
.jcenter { justify-self:center; }
.jleft { justify-self:left; }
.jright { justify-self:right; }
.jstretch1 { justify-self:stretch; }
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
.jstretch3 { justify-self:stretch; height:auto; }
.jstretch4 { justify-self:stretch; width:auto; }
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.jauto { justify-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " j" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,115 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: margin-left/right:auto + justify-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-inline-start: 2px solid lime; */
border-inline-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 0px 2px 0px;
align-self: start;
}
span { align-self: center!important; }
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.jstart { justify-self:start; }
.jend { justify-self:end; }
.jflexstart { justify-self:flex-start; }
.jflexend { justify-self:flex-end; }
.jselfstart { justify-self:self-start; }
.jselfend { justify-self:self-end; }
.jcenter { justify-self:center; }
.jleft { justify-self:left; }
.jright { justify-self:right; }
.jstretch1 { justify-self:stretch; }
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
.jstretch3 { justify-self:stretch; height:auto; }
.jstretch4 { justify-self:stretch; width:auto; }
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.jauto { justify-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " j" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,117 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: margin-left/right:auto + justify-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
<link rel="match" href="grid-item-margin-left-right-auto-002-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-inline-start: 2px solid lime; */
border-inline-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px;
margin-left: auto;
margin-right: auto;
align-self: start;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.jstart { justify-self:start; }
.jend { justify-self:end; }
.jflexstart { justify-self:flex-start; }
.jflexend { justify-self:flex-end; }
.jselfstart { justify-self:self-start; }
.jselfend { justify-self:self-end; }
.jcenter { justify-self:center; }
.jleft { justify-self:left; }
.jright { justify-self:right; }
.jstretch1 { justify-self:stretch; }
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
.jstretch3 { justify-self:stretch; height:auto; }
.jstretch4 { justify-self:stretch; width:auto; }
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.jauto { justify-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " j" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,116 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: margin-left/right:auto + align-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
border-block-start: 2px solid blue;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 0px 2px 0px;
justify-self: start;
}
.hl span { justify-self:center!important; }
.hr span { justify-self:center!important; }
.vl span { align-self:center!important; }
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.astart { align-self:start; }
.aend { align-self:end; }
.aflexstart { align-self:flex-start; }
.aflexend { align-self:flex-end; }
.aselfstart { align-self:self-start; }
.aselfend { align-self:self-end; }
.acenter { align-self:center; }
.aleft { align-self:left; }
.aright { align-self:right; }
.astretch1 { align-self:stretch; }
.astretch2 { align-self:stretch; width:13px; height:auto; }
.astretch3 { align-self:stretch; height:auto; }
.astretch4 { align-self:stretch; width:auto; }
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
.astretch6 { align-self:stretch; height:auto; max-height:9px; }
.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.aauto { align-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " a" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,116 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: margin-left/right:auto + align-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
<link rel="match" href="grid-item-margin-left-right-auto-003-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
border-block-start: 2px solid blue;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px;
margin-left: auto;
margin-right: auto;
justify-self: start;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.astart { align-self:start; }
.aend { align-self:end; }
.aflexstart { align-self:flex-start; }
.aflexend { align-self:flex-end; }
.aselfstart { align-self:self-start; }
.aselfend { align-self:self-end; }
.acenter { align-self:center; }
.aleft { align-self:left; }
.aright { align-self:right; }
.astretch1 { align-self:stretch; }
.astretch2 { align-self:stretch; width:13px; height:auto; }
.astretch3 { align-self:stretch; height:auto; }
.astretch4 { align-self:stretch; width:auto; }
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
.astretch6 { align-self:stretch; height:auto; max-height:9px; }
.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.aauto { align-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " a" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,115 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: margin-left/right:auto + align-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-block-start: 2px solid blue; */
border-block-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 0px 2px 0px;
justify-self: start;
}
span { align-self: center!important; }
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.astart { align-self:start; }
.aend { align-self:end; }
.aflexstart { align-self:flex-start; }
.aflexend { align-self:flex-end; }
.aselfstart { align-self:self-start; }
.aselfend { align-self:self-end; }
.acenter { align-self:center; }
.aleft { align-self:left; }
.aright { align-self:right; }
.astretch1 { align-self:stretch; }
.astretch2 { align-self:stretch; width:13px; height:auto; }
.astretch3 { align-self:stretch; height:auto; }
.astretch4 { align-self:stretch; width:auto; }
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
.astretch6 { align-self:stretch; height:auto; max-height:9px; }
.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.aauto { align-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " a" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,117 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: margin-left/right:auto + align-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
<link rel="match" href="grid-item-margin-left-right-auto-004-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-block-start: 2px solid blue; */
border-block-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px;
margin-left: auto;
margin-right: auto;
justify-self: start;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.astart { align-self:start; }
.aend { align-self:end; }
.aflexstart { align-self:flex-start; }
.aflexend { align-self:flex-end; }
.aselfstart { align-self:self-start; }
.aselfend { align-self:self-end; }
.acenter { align-self:center; }
.aleft { align-self:left; }
.aright { align-self:right; }
.astretch1 { align-self:stretch; }
.astretch2 { align-self:stretch; width:13px; height:auto; }
.astretch3 { align-self:stretch; height:auto; }
.astretch4 { align-self:stretch; width:auto; }
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
.astretch6 { align-self:stretch; height:auto; max-height:9px; }
.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.aauto { align-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " a" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,117 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: margin-right:auto + justify-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-inline-start: 2px solid lime; */
border-inline-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */
align-self: start;
}
.hl span { justify-self: left!important; }
.hr span { justify-self: left!important; }
.vl span { align-self: start!important; }
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.jstart { justify-self:start; }
.jend { justify-self:end; }
.jflexstart { justify-self:flex-start; }
.jflexend { justify-self:flex-end; }
.jselfstart { justify-self:self-start; }
.jselfend { justify-self:self-end; }
.jcenter { justify-self:center; }
.jleft { justify-self:left; }
.jright { justify-self:right; }
.jstretch1 { justify-self:stretch; }
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
.jstretch3 { justify-self:stretch; height:auto; }
.jstretch4 { justify-self:stretch; width:auto; }
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.jauto { justify-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " j" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,116 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: margin-right:auto + justify-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
<link rel="match" href="grid-item-margin-right-auto-001-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-inline-start: 2px solid lime; */
border-inline-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */
margin-right: auto;
align-self: start;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.jstart { justify-self:start; }
.jend { justify-self:end; }
.jflexstart { justify-self:flex-start; }
.jflexend { justify-self:flex-end; }
.jselfstart { justify-self:self-start; }
.jselfend { justify-self:self-end; }
.jcenter { justify-self:center; }
.jleft { justify-self:left; }
.jright { justify-self:right; }
.jstretch1 { justify-self:stretch; }
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
.jstretch3 { justify-self:stretch; height:auto; }
.jstretch4 { justify-self:stretch; width:auto; }
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.jauto { justify-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "hl", "hr", "vl" ]; // *-002.html tests vr/vlr/vrl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " j" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,118 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: margin-right:auto + justify-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
<link rel="match" href="grid-item-margin-right-auto-002-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-inline-start: 2px solid lime; */
border-inline-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 0px 2px 2px;
align-self: start;
}
.vr span { align-self: end!important; }
.vrl span { align-self: end!important; }
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.jstart { justify-self:start; }
.jend { justify-self:end; }
.jflexstart { justify-self:flex-start; }
.jflexend { justify-self:flex-end; }
.jselfstart { justify-self:self-start; }
.jselfend { justify-self:self-end; }
.jcenter { justify-self:center; }
.jleft { justify-self:left; }
.jright { justify-self:right; }
.jstretch1 { justify-self:stretch; }
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
.jstretch3 { justify-self:stretch; height:auto; }
.jstretch4 { justify-self:stretch; width:auto; }
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.jauto { justify-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " j" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,116 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: margin-right:auto + justify-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
<link rel="match" href="grid-item-margin-right-auto-002-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-inline-start: 2px solid lime; */
border-inline-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px;
margin-right: auto;
align-self: start;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.jstart { justify-self:start; }
.jend { justify-self:end; }
.jflexstart { justify-self:flex-start; }
.jflexend { justify-self:flex-end; }
.jselfstart { justify-self:self-start; }
.jselfend { justify-self:self-end; }
.jcenter { justify-self:center; }
.jleft { justify-self:left; }
.jright { justify-self:right; }
.jstretch1 { justify-self:stretch; }
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
.jstretch3 { justify-self:stretch; height:auto; }
.jstretch4 { justify-self:stretch; width:auto; }
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.jauto { justify-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "vr", "vlr", "vrl" ]; // *-001.html tests hl/hr/vl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " j" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,116 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: margin-right:auto + align-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
border-block-start: 2px solid blue;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 0px 2px 2px;
justify-self: start;
}
.hl span { justify-self:start!important; }
.hr span { justify-self:end!important; }
.vl span { align-self:start!important; }
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.astart { align-self:start; }
.aend { align-self:end; }
.aflexstart { align-self:flex-start; }
.aflexend { align-self:flex-end; }
.aselfstart { align-self:self-start; }
.aselfend { align-self:self-end; }
.acenter { align-self:center; }
.aleft { align-self:left; }
.aright { align-self:right; }
.astretch1 { align-self:stretch; }
.astretch2 { align-self:stretch; width:13px; height:auto; }
.astretch3 { align-self:stretch; height:auto; }
.astretch4 { align-self:stretch; width:auto; }
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
.astretch6 { align-self:stretch; height:auto; max-height:9px; }
.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.aauto { align-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " a" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,115 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: margin-right:auto + align-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
<link rel="match" href="grid-item-margin-right-auto-003-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
border-block-start: 2px solid blue;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px;
margin-right: auto;
justify-self: start;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.astart { align-self:start; }
.aend { align-self:end; }
.aflexstart { align-self:flex-start; }
.aflexend { align-self:flex-end; }
.aselfstart { align-self:self-start; }
.aselfend { align-self:self-end; }
.acenter { align-self:center; }
.aleft { align-self:left; }
.aright { align-self:right; }
.astretch1 { align-self:stretch; }
.astretch2 { align-self:stretch; width:13px; height:auto; }
.astretch3 { align-self:stretch; height:auto; }
.astretch4 { align-self:stretch; width:auto; }
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
.astretch6 { align-self:stretch; height:auto; max-height:9px; }
.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.aauto { align-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "hl", "hr", "vl" ]; // *-004.html tests vr/vlr/vrl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " a" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,117 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: margin-right:auto + align-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-block-start: 2px solid blue; */
border-block-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 0px 2px 2px;
justify-self: start;
}
.vr span { align-self:end!important; }
.vlr span { align-self:start!important; }
.vrl span { align-self:end!important; }
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.astart { align-self:start; }
.aend { align-self:end; }
.aflexstart { align-self:flex-start; }
.aflexend { align-self:flex-end; }
.aselfstart { align-self:self-start; }
.aselfend { align-self:self-end; }
.acenter { align-self:center; }
.aleft { align-self:left; }
.aright { align-self:right; }
.astretch1 { align-self:stretch; }
.astretch2 { align-self:stretch; width:13px; height:auto; }
.astretch3 { align-self:stretch; height:auto; }
.astretch4 { align-self:stretch; width:auto; }
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
.astretch6 { align-self:stretch; height:auto; max-height:9px; }
.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.aauto { align-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " a" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -0,0 +1,116 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: margin-right:auto + align-self</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
<link rel="match" href="grid-item-margin-right-auto-004-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }
.grid {
display: grid;
float: left;
position: relative;
border: 1px solid;
/* border-block-start: 2px solid blue; */
border-block-start: 2px solid black;
grid-template: 1px 32px 3px / 3px 20px 2px;
margin-right: 4px;
}
span {
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
display: block;
width: 13px;
height: 9px;
background: grey;
border-block-start: 2px solid blue;
border-inline-start: 2px solid lime;
margin: 1px 1px 2px 2px;
margin-right: auto;
justify-self: start;
}
abs1,abs2,abs3,abs4 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: lightgrey;
}
abs1 { grid-area: 1 / 1 / 2 / 4; }
abs2 { grid-area: 1 / 1 / 4 / 2; }
abs3 { grid-area: 1 / 3 / 4 / 4; }
abs4 { grid-area: 3 / 1 / 4 / 4; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.hl { -webkit-writing-mode: horizontal-tb; direction:ltr; }
.hr { -webkit-writing-mode: horizontal-tb; direction:rtl; }
.vl { -webkit-writing-mode: vertical-lr; }
.vr { -webkit-writing-mode: vertical-rl; }
.vlr { -webkit-writing-mode: vertical-lr; direction:rtl; }
.vrl { -webkit-writing-mode: vertical-rl; direction:ltr; }
.astart { align-self:start; }
.aend { align-self:end; }
.aflexstart { align-self:flex-start; }
.aflexend { align-self:flex-end; }
.aselfstart { align-self:self-start; }
.aselfend { align-self:self-end; }
.acenter { align-self:center; }
.aleft { align-self:left; }
.aright { align-self:right; }
.astretch1 { align-self:stretch; }
.astretch2 { align-self:stretch; width:13px; height:auto; }
.astretch3 { align-self:stretch; height:auto; }
.astretch4 { align-self:stretch; width:auto; }
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
.astretch6 { align-self:stretch; height:auto; max-height:9px; }
.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.aauto { align-self:auto; }
</style>
</head>
<body>
<script>
var gridwm = [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
"stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
for (var j = 0; j < wm.length; ++j) {
for (var k = 0; k < test.length; ++k) {
var div = document.createElement("div");
div.className = "grid " + gridwm[i];
var span = document.createElement("span");
span.className = wm[j] + " a" + test[k];
div.appendChild(span);
div.appendChild(document.createElement("abs1"));
div.appendChild(document.createElement("abs2"));
div.appendChild(document.createElement("abs3"));
div.appendChild(document.createElement("abs4"));
document.body.appendChild(div)
}
document.body.appendChild(document.createElement("separator"));
}
}
</script>
</body>
</html>
@@ -5,7 +5,7 @@
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: Testing grid minmax(min-content,max-content) column/rows</title>
<title>Reference: Testing grid minmax(min-content,max-content) column/rows</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
<style type="text/css">
body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
@@ -0,0 +1,82 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: Testing grid minmax(min-content,max-content) column/rows</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227285">
<style type="text/css">
body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
.grid {
display: grid;
border: 2px solid green;
grid-template-columns: minmax(min-content,max-content);
grid-template-rows: minmax(min-content,max-content);
clear: both;
line-height: 0;
}
.grid > div {
border: 1px solid black;
min-height:0;
min-width:0;
}
img.t1 { }
img.t2 { }
x {
display: block;
border: 1px solid blue;
width: 2px;
}
.v {
writing-mode:vertical-lr;
-webkit-writing-mode:vertical-lr;
}
</style>
</head>
<body>
<div class="grid">
<div>
<img class="t1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
</div>
</div>
<div class="grid">
<div>
<img class="t2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
</div>
</div>
<div class="grid">
<div style="width:2px">
<x></x>
</div>
</div>
<div class="grid">
<div>
<img class="t1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
</div>
</div>
<div class="grid">
<div>
<img class="t2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
</div>
</div>
<div class="grid">
<div style="width:2px; height:2px">
<x style="width:0px; height:2px"></x>
</div>
</div>
</body>
</html>
@@ -0,0 +1,85 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: Testing grid minmax(min-content,max-content) column/rows</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227285">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#valdef-grid-template-columns-max-content">
<link rel="match" href="grid-min-max-content-sizing-002-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
.grid {
display: grid;
border: 2px solid green;
grid-template-columns: minmax(min-content,max-content);
grid-template-rows: minmax(min-content,max-content);
clear: both;
line-height: 0;
}
.grid > div {
border: 1px solid black;
min-height:0;
min-width:0;
}
img.t1 { width: 100%; }
img.t2 { height: 100%; }
x {
display: block;
border: 1px solid blue;
width: 100%;
height: 100%;
}
.v {
writing-mode:vertical-lr;
-webkit-writing-mode:vertical-lr;
}
</style>
</head>
<body>
<div class="grid">
<div>
<img class="t1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
</div>
</div>
<div class="grid">
<div>
<img class="t2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
</div>
</div>
<div class="grid">
<div>
<x></x>
</div>
</div>
<div class="grid">
<div class="v">
<img class="t1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
</div>
</div>
<div class="grid">
<div class="v">
<img class="t2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
</div>
</div>
<div class="grid">
<div class="v">
<x></x>
</div>
</div>
</body>
</html>
+15 -2
View File
@@ -21,7 +21,7 @@ fails == grid-whitespace-handling-1b.xhtml grid-whitespace-handling-1-ref.xhtml
== grid-abspos-items-008.html grid-abspos-items-008-ref.html
== grid-abspos-items-009.html grid-abspos-items-009-ref.html
== grid-abspos-items-010.html grid-abspos-items-010-ref.html
== grid-abspos-items-011.html grid-abspos-items-011-ref.html
== grid-abspos-items-012.html grid-abspos-items-012-ref.html
== grid-order-abspos-items-001.html grid-order-abspos-items-001-ref.html
== grid-order-placement-auto-001.html grid-order-placement-auto-001-ref.html
== grid-order-placement-definite-001.html grid-order-placement-definite-001-ref.html
@@ -40,7 +40,8 @@ pref(layout.css.vertical-text.enabled,true) == vrl-grid-placement-auto-row-spars
fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-001.html grid-col-max-sizing-max-content-001-ref.html
fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-max-content-002.html grid-col-max-sizing-max-content-002-ref.html
== grid-min-max-content-sizing-001.html grid-min-max-content-sizing-001-ref.html
== grid-auto-min-sizing-definite-001.html grid-auto-min-sizing-definite-001-ref.html
== grid-min-max-content-sizing-002.html grid-min-max-content-sizing-002-ref.html
fuzzy-if(winWidget,1,36) == grid-auto-min-sizing-definite-001.html grid-auto-min-sizing-definite-001-ref.html
== grid-auto-min-sizing-intrinsic-001.html grid-auto-min-sizing-intrinsic-001-ref.html
== grid-auto-min-sizing-intrinsic-002.html grid-auto-min-sizing-intrinsic-002-ref.html
== grid-auto-min-sizing-intrinsic-003.html grid-auto-min-sizing-intrinsic-003-ref.html
@@ -72,3 +73,15 @@ fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-m
== grid-column-gap-002.html grid-column-gap-002-ref.html
== grid-column-gap-003.html grid-column-gap-003-ref.html
== grid-row-gap-001-ref.html grid-row-gap-001-ref.html
== grid-item-margin-left-auto-001.html grid-item-margin-left-auto-001-ref.html
== grid-item-margin-left-auto-002.html grid-item-margin-left-auto-002-ref.html
== grid-item-margin-left-auto-003.html grid-item-margin-left-auto-003-ref.html
== grid-item-margin-left-auto-004.html grid-item-margin-left-auto-004-ref.html
== grid-item-margin-left-right-auto-001.html grid-item-margin-left-right-auto-001-ref.html
== grid-item-margin-left-right-auto-002.html grid-item-margin-left-right-auto-002-ref.html
== grid-item-margin-left-right-auto-003.html grid-item-margin-left-right-auto-003-ref.html
== grid-item-margin-left-right-auto-004.html grid-item-margin-left-right-auto-004-ref.html
== grid-item-margin-right-auto-001.html grid-item-margin-right-auto-001-ref.html
== grid-item-margin-right-auto-002.html grid-item-margin-right-auto-002-ref.html
== grid-item-margin-right-auto-003.html grid-item-margin-right-auto-003-ref.html
== grid-item-margin-right-auto-004.html grid-item-margin-right-auto-004-ref.html
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<html style="writing-mode:vertical-lr;">
<body>
<input type="text" style="-moz-appearance:none; height:200px;" value="123">
<!-- div to cover spin box area -->
<div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; left:0px;">
</body>
</html>
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<html style="writing-mode:vertical-lr;">
<body>
<input type="number" style="-moz-appearance:none; height:200px;" value="123">
<!-- div to cover spin box area -->
<div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; left:0px;">
</body>
</html>
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<html style="writing-mode:vertical-rl;">
<body>
<input type="text" style="-moz-appearance:none; height:200px;" value="123">
<!-- div to cover spin box area -->
<div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; right:0px;">
</body>
</html>
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<html style="writing-mode:vertical-rl;">
<body>
<input type="number" style="-moz-appearance:none; height:200px;" value="123">
<!-- div to cover spin box area -->
<div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; right:0px;">
</body>
</html>
@@ -10,6 +10,8 @@ skip-if(!Android&&!B2G&&!Mulet) == number-same-as-text-unthemed.html number-same
# should look the same as type=text, except for the spin box
== number-similar-to-text-unthemed.html number-similar-to-text-unthemed-ref.html
== number-similar-to-text-unthemed-rtl.html number-similar-to-text-unthemed-rtl-ref.html
pref(layout.css.vertical-text.enabled,true) == number-similar-to-text-unthemed-vertical-lr.html number-similar-to-text-unthemed-vertical-lr-ref.html
pref(layout.css.vertical-text.enabled,true) == number-similar-to-text-unthemed-vertical-rl.html number-similar-to-text-unthemed-vertical-rl-ref.html
# dynamic type changes:
fuzzy-if(/^Windows\x20NT\x205\.1/.test(http.oscpu),64,4) fuzzy-if(cocoaWidget,63,4) == to-number-from-other-type-unthemed-1.html to-number-from-other-type-unthemed-1-ref.html
+3
View File
@@ -311,6 +311,9 @@ include table-bordercollapse/reftest.list
# table-dom/
include table-dom/reftest.list
# table-html/
include table-html/reftest.list
include table-overflow/reftest.list
# table-width/
@@ -58,3 +58,5 @@ skip-if(B2G||Mulet) == border-separate-opacity-table.html border-separate-opacit
== scrollable-rowgroup-separate-border.html scrollable-rowgroup-separate-notref.html # scrolling rowgroups were removed in bug 28800
== empty-cells-default-1.html empty-cells-default-1-ref.html
== empty-cells-default-2.html empty-cells-default-2-ref.html
fuzzy-if(OSX,1,113) fuzzy-if(winWidget,1,12) fuzzy-if(Android,1,39) == table-row-opacity-dynamic-1.html table-row-opacity-dynamic-1-ref.html
== table-row-opacity-dynamic-2.html table-row-opacity-dynamic-2-ref.html
@@ -0,0 +1,28 @@
<!DOCTYPE HTML>
<html>
<title>Test for bug 1224253</title>
<style>
body { background: white; color: black }
table {
padding: 0;
border-spacing: 0;
border: none;
width: 15em;
}
tr {
background: rgba(0, 0, 255, 0.8);
}
td {
border: none;
}
</style>
<table>
<tr style="opacity: 0.8"><td>cell</td></tr>
</table>
@@ -0,0 +1,55 @@
<!DOCTYPE HTML>
<html class="reftest-wait">
<title>Test for bug 1224253</title>
<style>
body { background: white; color: black }
table {
padding: 0;
border-spacing: 0;
border: none;
width: 15em;
}
tr {
background: rgba(0, 0, 255, 0.8);
}
td {
border: none;
}
</style>
<table>
<tr><td>cell</td></tr>
</table>
<script>
var tr = document.getElementsByTagName("tr")[0];
document.addEventListener("MozReftestInvalidate", step1, false);
function step1(event) {
requestAnimationFrame(step2);
}
function step2(now) {
tr.style.opacity = "0.8";
setTimeout(step3, 0);
}
function step3() {
tr.style.opacity = "0.8";
setTimeout(step4, 0);
}
function step4() {
tr.style.opacity = "0.8";
document.documentElement.classList.remove("reftest-wait");
}
</script>
@@ -0,0 +1,28 @@
<!DOCTYPE HTML>
<html>
<title>Test for bug 1224253</title>
<style>
body { background: white; color: black }
table {
padding: 0;
border-spacing: 0;
border: none;
width: 15em;
}
tr {
background: rgba(0, 0, 255, 0.8);
}
td {
border: none;
}
</style>
<table>
<tr><td>cell</td></tr>
</table>
@@ -0,0 +1,54 @@
<!DOCTYPE HTML>
<html class="reftest-wait">
<title>Test for bug 1224251</title>
<style>
body { background: white; color: black }
table {
padding: 0;
border-spacing: 0;
border: none;
width: 15em;
}
tr {
background: rgba(0, 0, 255, 0.8);
}
td {
border: none;
}
</style>
<table>
<tr style="opacity: 0.8"><td>cell</td></tr>
</table>
<script>
var tr = document.getElementsByTagName("tr")[0];
// Not sure why, but to make this test fail without the patch, this has to
// be a setTimeout(0) rather than waiting for MozReftestInvalidate.
setTimeout(step1, 0);
function step1() {
tr.style.opacity = "0.8";
setTimeout(step2, 0);
}
function step2() {
tr.style.opacity = "0.8";
setTimeout(step3, 0);
}
function step3() {
tr.style.opacity = "";
document.documentElement.classList.remove("reftest-wait");
}
</script>
@@ -0,0 +1,31 @@
<title>Testcase, bug 196292</title>
<meta charset="UTF-8">
<table border width="500">
<tr>
<td>
<p style="text-align: left">Left</p>
<table border width="300">
<tr><th>Center</th></tr>
<tr><td>Left</td></tr>
</table>
</td>
</tr>
<tr>
<td>
<p style="text-align: center">Center</p>
<table border width="300" style="margin-left: auto; margin-right: auto">
<tr><th>Center</th></tr>
<tr><td>Left</td></tr>
</table>
</td>
</tr>
<tr>
<td>
<p style="text-align: right">Right</p>
<table border width="300" style="margin-left: auto">
<tr><th>Center</th></tr>
<tr><td>Left</td></tr>
</table>
</td>
</tr>
@@ -0,0 +1,31 @@
<title>Testcase, bug 196292</title>
<meta charset="UTF-8">
<table border width="500">
<tr>
<td align="left">
<p>Left</p>
<table border width="300">
<tr><th>Center</th></tr>
<tr><td>Left</td></tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<p>Center</p>
<table border width="300">
<tr><th>Center</th></tr>
<tr><td>Left</td></tr>
</table>
</td>
</tr>
<tr>
<td align="right">
<p>Right</p>
<table border width="300">
<tr><th>Center</th></tr>
<tr><td>Left</td></tr>
</table>
</td>
</tr>
@@ -0,0 +1,32 @@
<!DOCTYPE HTML>
<title>Testcase, bug 196292</title>
<meta charset="UTF-8">
<table border width="500">
<tr>
<td>
<p style="text-align: left">Left</p>
<table border width="300">
<tr><th>Center</th></tr>
<tr><td>Left</td></tr>
</table>
</td>
</tr>
<tr>
<td>
<p style="text-align: center">Center</p>
<table border width="300" style="margin-left: auto; margin-right: auto">
<tr><th>Center</th></tr>
<tr><td>Left</td></tr>
</table>
</td>
</tr>
<tr>
<td>
<p style="text-align: right">Right</p>
<table border width="300" style="margin-left: auto">
<tr><th>Center</th></tr>
<tr><td>Left</td></tr>
</table>
</td>
</tr>
@@ -0,0 +1,32 @@
<!DOCTYPE HTML>
<title>Testcase, bug 196292</title>
<meta charset="UTF-8">
<table border width="500">
<tr>
<td align="left">
<p>Left</p>
<table border width="300">
<tr><th>Center</th></tr>
<tr><td>Left</td></tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<p>Center</p>
<table border width="300">
<tr><th>Center</th></tr>
<tr><td>Left</td></tr>
</table>
</td>
</tr>
<tr>
<td align="right">
<p>Right</p>
<table border width="300">
<tr><th>Center</th></tr>
<tr><td>Left</td></tr>
</table>
</td>
</tr>
+2
View File
@@ -0,0 +1,2 @@
== cell-align-stopped-at-table-1-standards.html cell-align-stopped-at-table-1-standards-ref.html
== cell-align-stopped-at-table-1-quirks.html cell-align-stopped-at-table-1-quirks-ref.html
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p {
font: 12px Impact, Times, serif;
}
span {
background: black;
}
</style>
</head>
<body>
<p>
<span>abcxyz</span>
</p>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More