mirror of
https://github.com/servo/servo.git
synced 2025-06-29 03:23:41 +01:00
Update web-platform-tests to revision d55d764f159f5d8dd3e0b30e9d38f75af4feb438
This commit is contained in:
parent
bb5cd02da3
commit
865f7c03e9
228 changed files with 6505 additions and 2813 deletions
|
@ -7,7 +7,7 @@
|
|||
expected: FAIL
|
||||
|
||||
[Opening a blob URL in a new window immediately before revoking it works.]
|
||||
expected: FAIL
|
||||
expected: TIMEOUT
|
||||
|
||||
[Opening a blob URL in a noopener about:blank window immediately before revoking it works.]
|
||||
expected: FAIL
|
||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -1,3 +0,0 @@
|
|||
[floats-placement-vertical-004-ref2.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[floats-wrap-top-below-bfc-001r.xht]
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-append-002-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-insert-003-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-insert-004-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-insert-006-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-insert-007-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-insert-009-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-insert-010-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-insert-011-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-insert-012-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-insert-013-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-insert-014-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-insert-015-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-remove-001-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-remove-003-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-remove-004-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-remove-005-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[block-in-inline-remove-006-ref.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
2
tests/wpt/metadata/css/CSS2/selectors/pseudo-007.xht.ini
Normal file
2
tests/wpt/metadata/css/CSS2/selectors/pseudo-007.xht.ini
Normal file
|
@ -0,0 +1,2 @@
|
|||
[pseudo-007.xht]
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[text-indent-115-ref-block-margin.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[text-indent-115-ref-inline-margin.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[text-indent-wrap-001-ref-float.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[text-decoration-skip-ink-003.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[text-decoration-skip-ink-upright-002.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[text-decoration-skip-ink-vertical-002.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[text-underline-offset-scroll-001.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-001-ref.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-002-ref.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-003-ref.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-008-ref.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-009-ref.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-010-ref.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-011-ref.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-020-ref.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-021-ref.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[shaping-023-ref.html]
|
||||
expected: FAIL
|
|
@ -1,2 +0,0 @@
|
|||
[shaping-001.html]
|
||||
expected: FAIL
|
|
@ -1,2 +0,0 @@
|
|||
[shaping-002.html]
|
||||
expected: FAIL
|
|
@ -1,2 +0,0 @@
|
|||
[shaping-003.html]
|
||||
expected: FAIL
|
|
@ -1,2 +0,0 @@
|
|||
[shaping-008.html]
|
||||
expected: FAIL
|
|
@ -1,2 +0,0 @@
|
|||
[shaping-009.html]
|
||||
expected: FAIL
|
|
@ -1,2 +0,0 @@
|
|||
[shaping-010.html]
|
||||
expected: FAIL
|
|
@ -1,2 +0,0 @@
|
|||
[shaping-011.html]
|
||||
expected: FAIL
|
|
@ -1,2 +0,0 @@
|
|||
[shaping-017.html]
|
||||
expected: FAIL
|
|
@ -1,2 +0,0 @@
|
|||
[shaping-018.html]
|
||||
expected: FAIL
|
|
@ -1,2 +0,0 @@
|
|||
[shaping-020.html]
|
||||
expected: FAIL
|
|
@ -1,2 +0,0 @@
|
|||
[shaping-021.html]
|
||||
expected: FAIL
|
|
@ -1,2 +0,0 @@
|
|||
[shaping-023.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[transform-background-006.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[transform-percent-008.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[transform-rotate-006.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[transform-table-001.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[transform-table-003.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[transform-table-011.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[transform3d-perspective-002.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[transform3d-rotatex-perspective-003.html]
|
||||
expected: FAIL
|
|
@ -1,4 +0,0 @@
|
|||
[CaretPosition-001.html]
|
||||
[Element at (400, 100)]
|
||||
expected: FAIL
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[elementFromPoint-001.html]
|
||||
[CSSOM View - 5 - extensions to the Document interface]
|
||||
expected: FAIL
|
||||
|
|
@ -315,18 +315,24 @@
|
|||
[<iframe>: combined response Content-Type: text/html */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html;x=" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: */* text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html */*]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html;" \\" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html;" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/plain */*]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/plain;charset=gbk text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;" \\" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
[traverse_the_history_4.html]
|
||||
[traverse_the_history_2.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[traverse_the_history_3.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[dir_auto-N-EN-ref.html]
|
||||
expected: FAIL
|
|
@ -1,2 +0,0 @@
|
|||
[dir_auto-N-EN.html]
|
||||
expected: FAIL
|
|
@ -4,7 +4,7 @@
|
|||
expected: FAIL
|
||||
|
||||
[Element with tabindex should support autofocus]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Host element with delegatesFocus including no focusable descendants should be skipped]
|
||||
expected: NOTRUN
|
||||
|
@ -16,5 +16,5 @@
|
|||
expected: NOTRUN
|
||||
|
||||
[Non-HTMLElement should not support autofocus]
|
||||
expected: NOTRUN
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
[iframe_sandbox_popups_escaping-2.html]
|
||||
expected: TIMEOUT
|
||||
[Check that popups from a sandboxed iframe escape the sandbox if\n allow-popups-to-escape-sandbox is used]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
[iframe_sandbox_popups_escaping-3.html]
|
||||
type: testharness
|
||||
expected: CRASH
|
||||
expected: TIMEOUT
|
||||
[Check that popups from a sandboxed iframe escape the sandbox if\n allow-popups-to-escape-sandbox is used]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
[image-decode-image-document.html]
|
||||
expected: ERROR
|
||||
[HTMLImageElement.prototype.decode(), image document tests. Decode from iframe with image document, succeeds (img not loaded)]
|
||||
expected: TIMEOUT
|
||||
|
|
@ -10,6 +10,3 @@
|
|||
[Verifies the resolution of entry.startTime is at least 20 microseconds.]
|
||||
expected: TIMEOUT
|
||||
|
||||
[Verifies the resolution of performance.now() is at least 5 microseconds.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
[crossorigin-sandwich-TAO.sub.html]
|
||||
expected: ERROR
|
||||
[There should be one entry.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,25 +0,0 @@
|
|||
[ready.https.html]
|
||||
[ready on a controlled document]
|
||||
expected: FAIL
|
||||
|
||||
[ready returns a Promise object in the context of the related document]
|
||||
expected: FAIL
|
||||
|
||||
[access ready after it has been resolved]
|
||||
expected: FAIL
|
||||
|
||||
[ready on a potential controlled document]
|
||||
expected: FAIL
|
||||
|
||||
[ready on an iframe that installs a new service worker]
|
||||
expected: FAIL
|
||||
|
||||
[ready after a longer matched registration registered]
|
||||
expected: FAIL
|
||||
|
||||
[access ready on uninstalling registration that is resurrected]
|
||||
expected: FAIL
|
||||
|
||||
[ready on an iframe whose parent registers a new service worker]
|
||||
expected: FAIL
|
||||
|
5
tests/wpt/metadata/webmessaging/with-ports/017.html.ini
Normal file
5
tests/wpt/metadata/webmessaging/with-ports/017.html.ini
Normal file
|
@ -0,0 +1,5 @@
|
|||
[017.html]
|
||||
expected: TIMEOUT
|
||||
[origin of the script that invoked the method, about:blank]
|
||||
expected: TIMEOUT
|
||||
|
|
@ -365,7 +365,8 @@ jobs:
|
|||
- template: tools/ci/azure/install_safari.yml
|
||||
- template: tools/ci/azure/update_hosts.yml
|
||||
- template: tools/ci/azure/update_manifest.yml
|
||||
- script: no_proxy='*' ./wpt run --no-manifest-update --no-restart-on-unexpected --no-fail-on-unexpected --this-chunk=$(System.JobPositionInPhase) --total-chunks=$(System.TotalJobsInPhase) --chunk-type hash --log-wptreport $(Build.ArtifactStagingDirectory)/wpt_report_$(System.JobPositionInPhase).json --log-wptscreenshot $(Build.ArtifactStagingDirectory)/wpt_screenshot_$(System.JobPositionInPhase).txt --log-mach - --log-mach-level info --channel preview safari
|
||||
# --exclude is a workaround for https://github.com/web-platform-tests/wpt/issues/18995 + https://github.com/web-platform-tests/wpt/issues/20887
|
||||
- script: no_proxy='*' ./wpt run --no-manifest-update --no-restart-on-unexpected --no-fail-on-unexpected --this-chunk=$(System.JobPositionInPhase) --total-chunks=$(System.TotalJobsInPhase) --chunk-type hash --log-wptreport $(Build.ArtifactStagingDirectory)/wpt_report_$(System.JobPositionInPhase).json --log-wptscreenshot $(Build.ArtifactStagingDirectory)/wpt_screenshot_$(System.JobPositionInPhase).txt --log-mach - --log-mach-level info --channel preview safari --exclude /pointerevents/pointerevent_pointercapture_in_frame.html --exclude /web-share/share-sharePromise-internal-slot.https.html
|
||||
displayName: 'Run tests'
|
||||
- task: PublishBuildArtifacts@1
|
||||
displayName: 'Publish results'
|
||||
|
|
61
tests/wpt/web-platform-tests/IndexedDB/file_support.sub.html
Normal file
61
tests/wpt/web-platform-tests/IndexedDB/file_support.sub.html
Normal file
|
@ -0,0 +1,61 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf8>
|
||||
<title>File support in IndexedDB</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<script src="support-promises.js"></script>
|
||||
<form id="form">
|
||||
<input id="file_input" name="file_input" type="file">
|
||||
</form>
|
||||
<script>
|
||||
|
||||
function assert_file_metadata_equal(file1, file2) {
|
||||
assert_true(file1 instanceof File);
|
||||
assert_true(file2 instanceof File)
|
||||
assert_equals(file1.lastModified, file2.lastModified);
|
||||
assert_equals(file1.name, file2.name);
|
||||
assert_equals(file1.size, file2.size);
|
||||
assert_equals(file1.type, file2.type);
|
||||
}
|
||||
|
||||
async function assert_file_contents_equals(file1, file2) {
|
||||
const file1_text = await file1.text();
|
||||
const file2_text = await file2.text();
|
||||
assert_equals(file1_text, file2_text);
|
||||
}
|
||||
|
||||
promise_test(async (testCase) => {
|
||||
const input = document.getElementById("file_input");
|
||||
await test_driver.send_keys(input, String.raw`{{fs_path(file_to_save.txt)}}`);
|
||||
assert_equals(input.files.length, 1);
|
||||
|
||||
const file = input.files[0];
|
||||
|
||||
const db = await createDatabase(testCase, db => {
|
||||
db.createObjectStore('objectStore');
|
||||
});
|
||||
|
||||
const txn = db.transaction(['objectStore'], 'readwrite');
|
||||
txn.objectStore('objectStore').add(file, 'key1');
|
||||
txn.objectStore('objectStore').add({file: file, other: 'data'}, 'key2');
|
||||
await promiseForTransaction(testCase, txn);
|
||||
|
||||
const readTxn = db.transaction(['objectStore'], 'readonly');
|
||||
const fileByItself = await promiseForRequest(
|
||||
testCase, readTxn.objectStore('objectStore').get('key1'));
|
||||
const fileInDict = await promiseForRequest(
|
||||
testCase, readTxn.objectStore('objectStore').get('key2'));
|
||||
|
||||
assert_file_metadata_equal(fileByItself, file);
|
||||
assert_file_metadata_equal(fileInDict.file, file);
|
||||
assert_file_metadata_equal(fileInDict.file, fileByItself);
|
||||
|
||||
await assert_file_contents_equals(fileByItself, file);
|
||||
await assert_file_contents_equals(fileInDict.file, file);
|
||||
|
||||
db.close();
|
||||
}, "Saves and loads back File objects from IndexedDB");
|
||||
|
||||
</script>
|
1
tests/wpt/web-platform-tests/IndexedDB/file_to_save.txt
Normal file
1
tests/wpt/web-platform-tests/IndexedDB/file_to_save.txt
Normal file
|
@ -0,0 +1 @@
|
|||
File to save to IndexedDB.
|
|
@ -0,0 +1,66 @@
|
|||
// META: title=Index Tombstones
|
||||
// META: script=support-promises.js
|
||||
|
||||
// This test is used to trigger a special case in Chrome with how it deals with
|
||||
// index creation & modification. This had caused issues before.
|
||||
// See https://crbug.com/1033996
|
||||
|
||||
async function iterateAndReturnAllCursorResult(testCase, cursorRequest) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let results = [];
|
||||
cursorRequest.onsuccess = testCase.step_func(function(event) {
|
||||
const cursor = event.target.result;
|
||||
if (!cursor) {
|
||||
resolve(results);
|
||||
return;
|
||||
}
|
||||
results.push(cursor.value);
|
||||
cursor.continue();
|
||||
});
|
||||
cursorRequest.onerror = reject;
|
||||
});
|
||||
}
|
||||
|
||||
async function createTombstones(testCase, db) {
|
||||
const txn1 = db.transaction(['objectStore'], 'readwrite');
|
||||
txn1.objectStore('objectStore').add({key: 'firstItem', indexedOn: 1});
|
||||
txn1.objectStore('objectStore').add({key: 'secondItem', indexedOn: 2});
|
||||
txn1.objectStore('objectStore').add({key: 'thirdItem', indexedOn: 3});
|
||||
const txn2 = db.transaction(['objectStore'], 'readwrite');
|
||||
txn2.objectStore('objectStore').put({key: 'firstItem', indexedOn: -10});
|
||||
txn2.objectStore('objectStore').put({key: 'secondItem', indexedOn: 4});
|
||||
txn2.objectStore('objectStore').put({key: 'thirdItem', indexedOn: 10});
|
||||
await promiseForTransaction(testCase, txn1);
|
||||
await promiseForTransaction(testCase, txn2);
|
||||
}
|
||||
|
||||
async function run_test(testCase, transactionMode, direction) {
|
||||
const db = await createDatabase(testCase, db => {
|
||||
db.createObjectStore('objectStore', {keyPath: 'key'})
|
||||
.createIndex('index', 'indexedOn');
|
||||
});
|
||||
await createTombstones(testCase, db);
|
||||
|
||||
const txn = db.transaction(['objectStore'], transactionMode);
|
||||
cursor = txn.objectStore('objectStore').index('index').openCursor(
|
||||
IDBKeyRange.bound(-11, 11), direction);
|
||||
let results = await iterateAndReturnAllCursorResult(testCase, cursor);
|
||||
assert_equals(results.length, 3);
|
||||
db.close();
|
||||
}
|
||||
|
||||
promise_test(async testCase => {
|
||||
await run_test(testCase, 'readonly', 'next');
|
||||
}, 'Forward iteration over an index in a readonly transaction');
|
||||
|
||||
promise_test(async testCase => {
|
||||
await run_test(testCase, 'readonly', 'prev');
|
||||
}, 'Backward iteration over an index in a readonly transaction');
|
||||
|
||||
promise_test(async testCase => {
|
||||
await run_test(testCase, 'readwrite', 'next');
|
||||
}, 'Forward iteration over an index in a readwrite transaction');
|
||||
|
||||
promise_test(async testCase => {
|
||||
await run_test(testCase, 'readwrite', 'prev');
|
||||
}, 'Backward iteration over an index in a readwrite transaction');
|
|
@ -5,7 +5,8 @@
|
|||
<link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"/>
|
||||
</head>
|
||||
<body>
|
||||
<div>Filler Text</div>
|
||||
<p>Test passes if the "Filler Text" above is green.</p>
|
||||
<div>Filler Text</div>
|
||||
<p>Test passes if there is a blue border around the viewport and
|
||||
around "Filler Text" above.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -4,13 +4,14 @@
|
|||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"/>
|
||||
<style type="text/css">
|
||||
div {
|
||||
color: green;
|
||||
html, div {
|
||||
border: 10px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>Filler Text</div>
|
||||
<p>Test passes if the "Filler Text" above is green.</p>
|
||||
<div>Filler Text</div>
|
||||
<p>Test passes if there is a blue border around the viewport and
|
||||
around "Filler Text" above.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -11,12 +11,14 @@
|
|||
<style type="text/css">
|
||||
:first-child
|
||||
{
|
||||
color: green;
|
||||
/* This needs to be a non-inherited property, as :root always matches :first-child */
|
||||
border: 10px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>Filler Text</div>
|
||||
<p>Test passes if the "Filler Text" above is green.</p>
|
||||
<p>Test passes if there is a blue border around the viewport and
|
||||
around "Filler Text" above.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference: max-height block fragmentation</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
width: 300px;
|
||||
}
|
||||
.columns {
|
||||
columns: 3;
|
||||
background: grey;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.columns > div { height:160px; background: yellow; }
|
||||
.columns > div > div { height:200px; width:50px; border:solid; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="columns">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:100px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:70px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:50px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: max-height block fragmentation</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-break">
|
||||
<link rel="match" href="block-max-height-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
width: 300px;
|
||||
}
|
||||
.columns {
|
||||
columns: 3;
|
||||
background: grey;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.columns > div { max-height:160px; background: yellow; }
|
||||
.columns > div > div { height:200px; width:50px; border:solid; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="columns">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:100px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:70px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:50px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference: max-height block fragmentation</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
width: 300px;
|
||||
}
|
||||
.columns {
|
||||
columns: 3;
|
||||
background: grey;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.columns > div {
|
||||
height: 128px;
|
||||
background: yellow;
|
||||
border: solid;
|
||||
border-width:10px 0 6px 0;
|
||||
padding: 5px 0 3px 0;
|
||||
}
|
||||
.columns > div > div { height:200px; width:50px; border:solid; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="columns">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:100px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:70px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:50px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: max-height block fragmentation</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-break">
|
||||
<link rel="match" href="block-max-height-001b-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
width: 300px;
|
||||
}
|
||||
.columns {
|
||||
columns: 3;
|
||||
background: grey;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.columns > div {
|
||||
max-height: 128px;
|
||||
background: yellow;
|
||||
border: solid;
|
||||
border-width:10px 0 6px 0;
|
||||
padding: 5px 0 3px 0;
|
||||
}
|
||||
.columns > div > div { height:200px; width:50px; border:solid; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="columns">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:100px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:70px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:50px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: min/max-height block fragmentation</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-break">
|
||||
<link rel="match" href="block-max-height-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
width: 300px;
|
||||
}
|
||||
.columns {
|
||||
columns: 3;
|
||||
background: grey;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.columns > div { min-height:120px; max-height:160px; background: yellow; }
|
||||
.columns > div > div { height:200px; width:50px; border:solid; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="columns">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:100px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:70px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:50px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: min/max-height block fragmentation</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-break">
|
||||
<link rel="match" href="block-max-height-001b-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
width: 300px;
|
||||
}
|
||||
.columns {
|
||||
columns: 3;
|
||||
background: grey;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.columns > div {
|
||||
min-height: 112px;
|
||||
max-height: 128px;
|
||||
background: yellow;
|
||||
border: solid;
|
||||
border-width:10px 0 6px 0;
|
||||
padding: 5px 0 3px 0;
|
||||
}
|
||||
.columns > div > div { height:200px; width:50px; border:solid; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="columns">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:100px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:70px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:50px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: min/max-height block fragmentation</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-break">
|
||||
<link rel="match" href="block-max-height-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
width: 300px;
|
||||
}
|
||||
.columns {
|
||||
columns: 3;
|
||||
background: grey;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.columns > div { min-height:160px; max-height:110px; background: yellow; }
|
||||
.columns > div > div { height:200px; width:50px; border:solid; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="columns">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:100px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:70px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:50px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: min/max-height block fragmentation</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-break">
|
||||
<link rel="match" href="block-max-height-001b-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
width: 300px;
|
||||
}
|
||||
.columns {
|
||||
columns: 3;
|
||||
background: grey;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.columns > div {
|
||||
min-height: 128px;
|
||||
max-height: 112px;
|
||||
background: yellow;
|
||||
border: solid;
|
||||
border-width:10px 0 6px 0;
|
||||
padding: 5px 0 3px 0;
|
||||
}
|
||||
.columns > div > div { height:200px; width:50px; border:solid; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="columns">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:100px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:70px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:50px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference: min-height block fragmentation</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
width: 300px;
|
||||
}
|
||||
.columns {
|
||||
columns: 3;
|
||||
background: grey;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.columns > div { height:200px; background: yellow; }
|
||||
.columns > div > div { height:160px; width:50px; border:solid; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="columns">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:100px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:70px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:50px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: min-height block fragmentation</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-break">
|
||||
<link rel="match" href="block-min-height-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
width: 300px;
|
||||
}
|
||||
.columns {
|
||||
columns: 3;
|
||||
background: grey;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.columns > div { min-height:200px; background: yellow; }
|
||||
.columns > div > div { height:160px; width:50px; border:solid; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="columns">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:100px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:70px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:50px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference: min-height block fragmentation</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
width: 300px;
|
||||
}
|
||||
.columns {
|
||||
columns: 3;
|
||||
background: grey;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.columns > div {
|
||||
height: 172px;
|
||||
background: yellow;
|
||||
border: solid;
|
||||
border-width:10px 0 6px 0;
|
||||
padding: 5px 0 3px 0;
|
||||
}
|
||||
.columns > div > div { height:150px; width:50px; border:solid; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="columns">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:100px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:70px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:50px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: min-height block fragmentation</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-break">
|
||||
<link rel="match" href="block-min-height-001b-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
width: 300px;
|
||||
}
|
||||
.columns {
|
||||
columns: 3;
|
||||
background: grey;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.columns > div {
|
||||
min-height: 172px;
|
||||
background: yellow;
|
||||
border: solid;
|
||||
border-width:10px 0 6px 0;
|
||||
padding: 5px 0 3px 0;
|
||||
}
|
||||
.columns > div > div { height:150px; width:50px; border:solid; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="columns">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:100px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:70px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
<div class="columns" style="height:50px">
|
||||
BEFORE
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
AFTER
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,358 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: aligned content distribution for vertical lr</title>
|
||||
<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
|
||||
<meta name="assert" content="This test checks that the align-content property is applied correctly when using content-distribution values for the vertical-lr writing mode.">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
grid-auto-columns: 20px;
|
||||
grid-auto-rows: 40px;
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.stretchedGrid {
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
|
||||
.thirdRowFirstColumn {
|
||||
background-color: green;
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.fourthRowFirstColumn {
|
||||
background-color: deepskyblue;
|
||||
grid-column: 1;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
.fourthRowSecondColumn {
|
||||
background-color: maroon;
|
||||
grid-column: 2;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
.thirdRowFirstColumn {
|
||||
background-color: green;
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.fourthRowFirstColumn {
|
||||
background-color: deepskyblue;
|
||||
grid-column: 1;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
.fourthRowSecondColumn {
|
||||
background-color: maroon;
|
||||
grid-column: 2;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<p>This test checks that the align-content property is applied correctly when using content-distribution values in vertical-lr writing mode.</p>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween verticalLR" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround verticalLR" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="80" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="280" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly verticalLR" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="107" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="107" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="253" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="253" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch verticalLR" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween verticalLR" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround verticalLR" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="47" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="47" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="313" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="313" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly verticalLR" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="290" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch verticalLR" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="133" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="133" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="267" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="267" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween verticalLR" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="240" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="240" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround verticalLR" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="130" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="230" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="330" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="330" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly verticalLR" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="48" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="48" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="136" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="136" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="224" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="224" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="312" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="312" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch verticalLR" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="300" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RTL direction. -->
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="280" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="280" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="107" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="107" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="253" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="253" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="47" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="47" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="313" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="313" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="290" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="290" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="133" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="133" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="267" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="267" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="120" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="240" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="240" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="130" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="130" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="230" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="230" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="330" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="330" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="48" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="48" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="136" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="136" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="224" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="224" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="312" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="312" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="300" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="300" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
|
@ -0,0 +1,358 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: aligned content distribution for vertical rl</title>
|
||||
<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
|
||||
<meta name="assert" content="This test checks that the align-content property is applied correctly when using content-distribution values for the vertical-rl writing mode.">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
grid-auto-columns: 20px;
|
||||
grid-auto-rows: 40px;
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.stretchedGrid {
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
|
||||
.thirdRowFirstColumn {
|
||||
background-color: green;
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.fourthRowFirstColumn {
|
||||
background-color: deepskyblue;
|
||||
grid-column: 1;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
.fourthRowSecondColumn {
|
||||
background-color: maroon;
|
||||
grid-column: 2;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
.thirdRowFirstColumn {
|
||||
background-color: green;
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.fourthRowFirstColumn {
|
||||
background-color: deepskyblue;
|
||||
grid-column: 1;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
.fourthRowSecondColumn {
|
||||
background-color: maroon;
|
||||
grid-column: 2;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<p>This test checks that the align-content property is applied correctly when using content-distribution values for vertical-rl mode.</p>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween verticalRL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround verticalRL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="280" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="80" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="253" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="253" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="107" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="107" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch verticalRL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween verticalRL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround verticalRL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="313" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="313" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="47" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="47" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="290" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="70" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="70" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch verticalRL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="267" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="267" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="133" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="133" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween verticalRL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="240" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround verticalRL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="330" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="330" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="230" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="130" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="30" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="312" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="312" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="224" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="224" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="136" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="136" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="48" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="48" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch verticalRL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="300" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RTL direction. -->
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="280" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="280" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="253" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="253" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="107" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="107" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="313" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="313" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="47" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="47" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="290" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="290" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="70" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="70" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="267" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="267" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="133" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="133" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="240" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="120" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="120" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="330" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="330" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="230" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="230" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="130" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="130" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="30" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="30" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="312" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="312" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="224" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="224" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="136" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="136" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="48" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="48" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="300" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="100" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="100" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
|
@ -0,0 +1,358 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: aligned content distribution</title>
|
||||
<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
|
||||
<meta name="assert" content="This test checks that the align-content property is applied correctly when using content-distribution values.">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
grid-auto-columns: 20px;
|
||||
grid-auto-rows: 40px;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.stretchedGrid {
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
|
||||
.thirdRowFirstColumn {
|
||||
background-color: green;
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.fourthRowFirstColumn {
|
||||
background-color: deepskyblue;
|
||||
grid-column: 1;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
.fourthRowSecondColumn {
|
||||
background-color: maroon;
|
||||
grid-column: 2;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
.thirdRowFirstColumn {
|
||||
background-color: green;
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.fourthRowFirstColumn {
|
||||
background-color: deepskyblue;
|
||||
grid-column: 1;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
.fourthRowSecondColumn {
|
||||
background-color: maroon;
|
||||
grid-column: 2;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<p>This test checks that the align-content property is applied correctly when using content-distribution values.</p>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RTL direction. -->
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-between'</p>
|
||||
<div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-around'</p>
|
||||
<div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'space-evenly'</p>
|
||||
<div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'stretch'</p>
|
||||
<div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div>
|
||||
<div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div>
|
||||
<div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div>
|
||||
<div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing">
|
||||
<link rel="match" href="absolute-ref.html">
|
||||
<link rel="match" href="auto-block-size-absolute-ref.html">
|
||||
<meta name="assert" content="This test checks that the absolute positioning respects the auto-block-size." />
|
||||
|
||||
<style>
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue