mirror of
https://github.com/roytam1/palemoon27.git
synced 2026-05-26 13:23:07 +00:00
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:
@@ -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
@@ -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)
|
||||
{
|
||||
|
||||
@@ -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!
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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 */
|
||||
@@ -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',
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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.
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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)) {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<div style="display: ruby-text; margin: 288230376151711740%"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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
|
||||
|
||||
@@ -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___ */
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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()) {
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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];
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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
|
||||
|
||||
+8
@@ -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>
|
||||
+8
@@ -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
|
||||
|
||||
@@ -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>
|
||||
@@ -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
Reference in New Issue
Block a user