mirror of
https://github.com/servo/servo.git
synced 2025-07-23 07:13:52 +01:00
Auto merge of #26209 - servo-wpt-sync:wpt_update_17-04-2020, r=servo-wpt-sync
Sync WPT with upstream (17-04-2020) Automated downstream sync of changes from upstream as of 17-04-2020. [no-wpt-sync] r? @servo-wpt-sync
This commit is contained in:
bors-servo
GitHub
commit
9dbc6554f0
285 changed files with 5707 additions and 670 deletions
|
|
@ -0,0 +1,4 @@
|
|||
[2d.path.isPointInStroke.scaleddashes.html]
|
||||
[isPointInStroke() should return correct results on dashed paths at high scale factors]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
expected: TIMEOUT
|
||||
|
||||
[Opening a blob URL in a new window immediately before revoking it works.]
|
||||
expected: FAIL
|
||||
expected: TIMEOUT
|
||||
|
||||
[Fetching a blob URL immediately before revoking it works in an iframe.]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
[hit-test-floats-002.html]
|
||||
[Hit test float]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
[hit-test-floats-004.html]
|
||||
[hit-test-floats-003.html]
|
||||
[Miss float below something else]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[hit-test-floats-005.html]
|
||||
[Miss clipped float]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[break-spaces-newline-011.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[break-spaces-newline-012.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[break-spaces-newline-013.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[break-spaces-newline-014.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[break-spaces-newline-015.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[break-spaces-newline-016.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[elementFromPoint-001.html]
|
||||
[CSSOM View - 5 - extensions to the Document interface]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -312,15 +312,9 @@
|
|||
[Response: combined response Content-Type: text/html;" \\" text/plain ";charset=GBK]
|
||||
expected: NOTRUN
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html;x=" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: */* text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -330,3 +324,15 @@
|
|||
[<iframe>: combined 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 */*]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/plain */*]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -56,6 +56,3 @@
|
|||
[separate text/javascript;charset=windows-1252 error text/javascript]
|
||||
expected: FAIL
|
||||
|
||||
[separate text/javascript x/x]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,3 @@
|
|||
[X-Content-Type-Options%3A%20nosniff%0C]
|
||||
expected: FAIL
|
||||
|
||||
[X-Content-Type-Options%3A%20%40%23%24%23%25%25%26%5E%26%5E*()()11!%2Cnosniff]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
[traverse_the_history_1.html]
|
||||
[Multiple history traversals from the same task]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[traverse_the_history_3.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,8 +1,4 @@
|
|||
[skip-document-with-fragment.html]
|
||||
expected: TIMEOUT
|
||||
[Autofocus elements in iframed documents with URL fragments should be skipped.]
|
||||
expected: FAIL
|
||||
|
||||
[Autofocus elements in top-level browsing context's documents with URI fragments should be skipped.]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
[po-observe-type.any.html]
|
||||
[Calling observe() with type and entryTypes should throw a TypeError]
|
||||
expected: FAIL
|
||||
|
||||
[Calling observe() without 'type' or 'entryTypes' throws a TypeError]
|
||||
expected: FAIL
|
||||
|
||||
|
||||
[po-observe-type.any.worker.html]
|
||||
[Calling observe() with type and entryTypes should throw a TypeError]
|
||||
expected: FAIL
|
||||
|
||||
[Calling observe() without 'type' or 'entryTypes' throws a TypeError]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -83,3 +83,6 @@
|
|||
[X Rendered audio for channel 5 does not equal [0,0.0626220703125,0.125030517578125,0.18695068359375,0.24810791015625,0.308319091796875,0.3673095703125,0.42486572265625,0.480743408203125,0.53472900390625,0.58660888671875,0.636199951171875,0.68328857421875,0.727691650390625,0.76922607421875,0.8077392578125...\] with an element-wise tolerance of {"absoluteThreshold":0.000030517578125,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[1\]\t3.6732959747314453e-1\t6.2622070312500000e-2\t3.0470752716064453e-1\t4.8658168859649127e+0\t3.0517578125000000e-5\n\t[2\]\t6.8329977989196777e-1\t1.2503051757812500e-1\t5.5826926231384277e-1\t4.4650639949963384e+0\t3.0517578125000000e-5\n\t[3\]\t9.0373212099075317e-1\t1.8695068359375000e-1\t7.1678143739700317e-1\t3.8340669508039502e+0\t3.0517578125000000e-5\n\t[4\]\t9.9780619144439697e-1\t2.4810791015625000e-1\t7.4969828128814697e-1\t3.0216621502152523e+0\t3.0517578125000000e-5\n\t[5\]\t9.5236867666244507e-1\t3.0831909179687500e-1\t6.4404958486557007e-1\t2.0889059484187866e+0\t3.0517578125000000e-5\n\t...and 44051 more errors.\n\tMax AbsError of 1.9999794363975525e+0 at index of 19632.\n\t[19632\]\t9.9997943639755249e-1\t-1.0000000000000000e+0\t1.9999794363975525e+0\t1.9999794363975525e+0\t3.0517578125000000e-5\n\tMax RelError of Infinity at index of 12348.\n\t[12348\]\t9.5105654001235962e-1\t0.0000000000000000e+0\t9.5105654001235962e-1\tInfinity\t3.0517578125000000e-5\n]
|
||||
expected: FAIL
|
||||
|
||||
[X Rendered audio for channel 5 does not equal [0,0.0626220703125,0.125030517578125,0.18695068359375,0.24810791015625,0.308319091796875,0.3673095703125,0.42486572265625,0.480743408203125,0.53472900390625,0.58660888671875,0.636199951171875,0.68328857421875,0.727691650390625,0.76922607421875,0.8077392578125...\] with an element-wise tolerance of {"absoluteThreshold":0.000030517578125,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[1\]\t3.6732959747314453e-1\t6.2622070312500000e-2\t3.0470752716064453e-1\t4.8658168859649127e+0\t3.0517578125000000e-5\n\t[2\]\t6.8329977989196777e-1\t1.2503051757812500e-1\t5.5826926231384277e-1\t4.4650639949963384e+0\t3.0517578125000000e-5\n\t[3\]\t9.0373212099075317e-1\t1.8695068359375000e-1\t7.1678143739700317e-1\t3.8340669508039502e+0\t3.0517578125000000e-5\n\t[4\]\t9.9780619144439697e-1\t2.4810791015625000e-1\t7.4969828128814697e-1\t3.0216621502152523e+0\t3.0517578125000000e-5\n\t[5\]\t9.5236867666244507e-1\t3.0831909179687500e-1\t6.4404958486557007e-1\t2.0889059484187866e+0\t3.0517578125000000e-5\n\t...and 44047 more errors.\n\tMax AbsError of 1.9999794363975525e+0 at index of 37272.\n\t[37272\]\t9.9997943639755249e-1\t-1.0000000000000000e+0\t1.9999794363975525e+0\t1.9999794363975525e+0\t3.0517578125000000e-5\n\tMax RelError of Infinity at index of 12348.\n\t[12348\]\t9.5105654001235962e-1\t0.0000000000000000e+0\t9.5105654001235962e-1\tInfinity\t3.0517578125000000e-5\n]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
[005.html]
|
||||
expected: ERROR
|
||||
[dedicated worker in shared worker in dedicated worker]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
[2d.path.isPointInStroke.scaleddashes.html]
|
||||
[isPointInStroke() should return correct results on dashed paths at high scale factors]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -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: TIMEOUT
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,4 @@
|
|||
[hit-test-floats-002.html]
|
||||
[Hit test float]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
[hit-test-floats-004.html]
|
||||
[hit-test-floats-003.html]
|
||||
[Miss float below something else]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[hit-test-floats-005.html]
|
||||
[Miss clipped float]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[break-spaces-newline-011.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[break-spaces-newline-012.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[break-spaces-newline-013.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[break-spaces-newline-014.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[break-spaces-newline-015.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[break-spaces-newline-016.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[elementFromPoint-001.html]
|
||||
[CSSOM View - 5 - extensions to the Document interface]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -312,15 +312,9 @@
|
|||
[fetch(): separate response Content-Type: text/plain ]
|
||||
expected: NOTRUN
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html;x=" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: */* text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -330,3 +324,15 @@
|
|||
[<iframe>: combined 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 */*]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/plain */*]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -56,6 +56,3 @@
|
|||
[separate text/javascript;charset=windows-1252 error text/javascript]
|
||||
expected: FAIL
|
||||
|
||||
[separate text/javascript x/x]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,3 @@
|
|||
[X-Content-Type-Options%3A%20nosniff%2C%2C%40%23%24%23%25%25%26%5E%26%5E*()()11!]
|
||||
expected: FAIL
|
||||
|
||||
[X-Content-Type-Options%3A%20%40%23%24%23%25%25%26%5E%26%5E*()()11!%2Cnosniff]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
[traverse_the_history_1.html]
|
||||
[Multiple history traversals from the same task]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[traverse_the_history_3.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,8 +1,4 @@
|
|||
[skip-document-with-fragment.html]
|
||||
expected: TIMEOUT
|
||||
[Autofocus elements in iframed documents with URL fragments should be skipped.]
|
||||
expected: FAIL
|
||||
|
||||
[Autofocus elements in top-level browsing context's documents with URI fragments should be skipped.]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
[po-observe-type.any.html]
|
||||
[Calling observe() with type and entryTypes should throw a TypeError]
|
||||
expected: FAIL
|
||||
|
||||
[Calling observe() without 'type' or 'entryTypes' throws a TypeError]
|
||||
expected: FAIL
|
||||
|
||||
|
||||
[po-observe-type.any.worker.html]
|
||||
[Calling observe() with type and entryTypes should throw a TypeError]
|
||||
expected: FAIL
|
||||
|
||||
[Calling observe() without 'type' or 'entryTypes' throws a TypeError]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -152,3 +152,6 @@
|
|||
[X Rendered audio for channel 5 does not equal [0,0.0626220703125,0.125030517578125,0.18695068359375,0.24810791015625,0.308319091796875,0.3673095703125,0.42486572265625,0.480743408203125,0.53472900390625,0.58660888671875,0.636199951171875,0.68328857421875,0.727691650390625,0.76922607421875,0.8077392578125...\] with an element-wise tolerance of {"absoluteThreshold":0.000030517578125,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[1\]\t3.6732959747314453e-1\t6.2622070312500000e-2\t3.0470752716064453e-1\t4.8658168859649127e+0\t3.0517578125000000e-5\n\t[2\]\t6.8329977989196777e-1\t1.2503051757812500e-1\t5.5826926231384277e-1\t4.4650639949963384e+0\t3.0517578125000000e-5\n\t[3\]\t9.0373212099075317e-1\t1.8695068359375000e-1\t7.1678143739700317e-1\t3.8340669508039502e+0\t3.0517578125000000e-5\n\t[4\]\t9.9780619144439697e-1\t2.4810791015625000e-1\t7.4969828128814697e-1\t3.0216621502152523e+0\t3.0517578125000000e-5\n\t[5\]\t9.5236867666244507e-1\t3.0831909179687500e-1\t6.4404958486557007e-1\t2.0889059484187866e+0\t3.0517578125000000e-5\n\t...and 44051 more errors.\n\tMax AbsError of 1.9999794363975525e+0 at index of 19632.\n\t[19632\]\t9.9997943639755249e-1\t-1.0000000000000000e+0\t1.9999794363975525e+0\t1.9999794363975525e+0\t3.0517578125000000e-5\n\tMax RelError of Infinity at index of 12348.\n\t[12348\]\t9.5105654001235962e-1\t0.0000000000000000e+0\t9.5105654001235962e-1\tInfinity\t3.0517578125000000e-5\n]
|
||||
expected: FAIL
|
||||
|
||||
[X Rendered audio for channel 5 does not equal [0,0.0626220703125,0.125030517578125,0.18695068359375,0.24810791015625,0.308319091796875,0.3673095703125,0.42486572265625,0.480743408203125,0.53472900390625,0.58660888671875,0.636199951171875,0.68328857421875,0.727691650390625,0.76922607421875,0.8077392578125...\] with an element-wise tolerance of {"absoluteThreshold":0.000030517578125,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[1\]\t3.6732959747314453e-1\t6.2622070312500000e-2\t3.0470752716064453e-1\t4.8658168859649127e+0\t3.0517578125000000e-5\n\t[2\]\t6.8329977989196777e-1\t1.2503051757812500e-1\t5.5826926231384277e-1\t4.4650639949963384e+0\t3.0517578125000000e-5\n\t[3\]\t9.0373212099075317e-1\t1.8695068359375000e-1\t7.1678143739700317e-1\t3.8340669508039502e+0\t3.0517578125000000e-5\n\t[4\]\t9.9780619144439697e-1\t2.4810791015625000e-1\t7.4969828128814697e-1\t3.0216621502152523e+0\t3.0517578125000000e-5\n\t[5\]\t9.5236867666244507e-1\t3.0831909179687500e-1\t6.4404958486557007e-1\t2.0889059484187866e+0\t3.0517578125000000e-5\n\t...and 44047 more errors.\n\tMax AbsError of 1.9999794363975525e+0 at index of 37272.\n\t[37272\]\t9.9997943639755249e-1\t-1.0000000000000000e+0\t1.9999794363975525e+0\t1.9999794363975525e+0\t3.0517578125000000e-5\n\tMax RelError of Infinity at index of 12348.\n\t[12348\]\t9.5105654001235962e-1\t0.0000000000000000e+0\t9.5105654001235962e-1\tInfinity\t3.0517578125000000e-5\n]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
[005.html]
|
||||
expected: ERROR
|
||||
[dedicated worker in shared worker in dedicated worker]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ tasks:
|
|||
owner: ${owner}
|
||||
source: ${event.repository.clone_url}
|
||||
payload:
|
||||
image: harjgam/web-platform-tests:0.33
|
||||
image: hexcles/web-platform-tests:0.35
|
||||
maxRunTime: 7200
|
||||
artifacts:
|
||||
public/results:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by /2dcontext/tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.path.isPointInStroke.scaleddashes</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/2dcontext/resources/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/2dcontext/resources/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.path.isPointInStroke.scaleddashes</h1>
|
||||
<p class="desc">isPointInStroke() should return correct results on dashed paths at high scale factors</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("isPointInStroke() should return correct results on dashed paths at high scale factors");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
var scale = 20;
|
||||
ctx.setLineDash([10, 21.4159]); // dash from t=0 to t=10 along the circle
|
||||
ctx.scale(scale, scale);
|
||||
ctx.ellipse(6, 10, 5, 5, 0, 2*Math.PI, false);
|
||||
ctx.stroke();
|
||||
|
||||
// hit-test the beginning of the dash (t=0)
|
||||
_assertSame(ctx.isPointInStroke(11*scale, 10*scale), true, "ctx.isPointInStroke(11*scale, 10*scale)", "true");
|
||||
// hit-test the middle of the dash (t=5)
|
||||
_assertSame(ctx.isPointInStroke(8.70*scale, 14.21*scale), true, "ctx.isPointInStroke(8.70*scale, 14.21*scale)", "true");
|
||||
// hit-test the end of the dash (t=9.8)
|
||||
_assertSame(ctx.isPointInStroke(4.10*scale, 14.63*scale), true, "ctx.isPointInStroke(4.10*scale, 14.63*scale)", "true");
|
||||
// hit-test past the end of the dash (t=10.2)
|
||||
_assertSame(ctx.isPointInStroke(3.74*scale, 14.46*scale), false, "ctx.isPointInStroke(3.74*scale, 14.46*scale)", "false");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -8646,6 +8646,27 @@
|
|||
@assert ctx.isPointInPath(NaN, NaN) === false;
|
||||
|
||||
|
||||
- name: 2d.path.isPointInStroke.scaleddashes
|
||||
desc: isPointInStroke() should return correct results on dashed paths at high scale factors
|
||||
testing:
|
||||
- 2d.path.isPointInStroke
|
||||
code: |
|
||||
var scale = 20;
|
||||
ctx.setLineDash([10, 21.4159]); // dash from t=0 to t=10 along the circle
|
||||
ctx.scale(scale, scale);
|
||||
ctx.ellipse(6, 10, 5, 5, 0, 2*Math.PI, false);
|
||||
ctx.stroke();
|
||||
|
||||
// hit-test the beginning of the dash (t=0)
|
||||
@assert ctx.isPointInStroke(11*scale, 10*scale) === true;
|
||||
// hit-test the middle of the dash (t=5)
|
||||
@assert ctx.isPointInStroke(8.70*scale, 14.21*scale) === true;
|
||||
// hit-test the end of the dash (t=9.8)
|
||||
@assert ctx.isPointInStroke(4.10*scale, 14.63*scale) === true;
|
||||
// hit-test past the end of the dash (t=10.2)
|
||||
@assert ctx.isPointInStroke(3.74*scale, 14.46*scale) === false;
|
||||
|
||||
|
||||
- name: 2d.drawImage.3arg
|
||||
testing:
|
||||
- 2d.drawImage.defaultsource
|
||||
|
|
|
|||
|
|
@ -6,10 +6,11 @@
|
|||
cookie_test(async t => {
|
||||
let eventPromise = observeNextCookieChangeEvent();
|
||||
await cookieStore.set('', 'first-value');
|
||||
assert_equals(
|
||||
(await cookieStore.getAll('')).map(({ value }) => value).join(';'),
|
||||
'first-value',
|
||||
'Cookie with no name and normal value should have been set');
|
||||
const initialCookies = await cookieStore.getAll('');
|
||||
assert_equals(initialCookies.length, 1);
|
||||
assert_equals(initialCookies[0].name, '');
|
||||
assert_equals(initialCookies[0].value, 'first-value');
|
||||
|
||||
await verifyCookieChangeEvent(
|
||||
eventPromise, {changed: [{name: '', value: 'first-value'}]},
|
||||
'Observed no-name change');
|
||||
|
|
@ -29,10 +30,11 @@ cookie_test(async t => {
|
|||
'Expected promise rejection when setting a cookie with' +
|
||||
' no name and "=" in value (via options)');
|
||||
|
||||
assert_equals(
|
||||
(await cookieStore.getAll('')).map(({ value }) => value).join(';'),
|
||||
'first-value',
|
||||
'Cookie with no name should still have previous value');
|
||||
const cookies = await cookieStore.getAll('');
|
||||
assert_equals(cookies.length, 1);
|
||||
assert_equals(cookies[0].name, '');
|
||||
assert_equals(cookies[0].value, 'first-value',
|
||||
'Cookie with no name should still have previous value.');
|
||||
|
||||
eventPromise = observeNextCookieChangeEvent();
|
||||
await cookieStore.delete('');
|
||||
|
|
|
|||
|
|
@ -14,6 +14,21 @@ promise_test(async testCase => {
|
|||
assert_equals(cookie.value, 'cookie-value');
|
||||
}, 'cookieStore.get with no arguments');
|
||||
|
||||
promise_test(async testCase => {
|
||||
await cookieStore.set('cookie-name-1', 'cookie-value-1');
|
||||
testCase.add_cleanup(async () => {
|
||||
await cookieStore.delete('cookie-name-1');
|
||||
});
|
||||
await cookieStore.set('cookie-name-2', 'cookie-value-2');
|
||||
testCase.add_cleanup(async () => {
|
||||
await cookieStore.delete('cookie-name-2');
|
||||
});
|
||||
|
||||
const cookie = await cookieStore.get();
|
||||
assert_equals(cookie.name, 'cookie-name-1');
|
||||
assert_equals(cookie.value, 'cookie-value-1');
|
||||
},'cookieStore.get with no args and multiple matches');
|
||||
|
||||
promise_test(async testCase => {
|
||||
await cookieStore.set('cookie-name', 'cookie-value');
|
||||
testCase.add_cleanup(async () => {
|
||||
|
|
@ -44,6 +59,8 @@ promise_test(async testCase => {
|
|||
|
||||
const cookie = await cookieStore.get('cookie-name',
|
||||
{ name: 'wrong-cookie-name' });
|
||||
assert_equals(cookie.name, 'cookie-name');
|
||||
assert_equals(cookie.value, 'cookie-value');
|
||||
}, 'cookieStore.get with name in both positional arguments and options');
|
||||
|
||||
promise_test(async testCase => {
|
||||
|
|
|
|||
|
|
@ -40,6 +40,22 @@ promise_test(async testCase => {
|
|||
assert_equals(cookie.value, 'cookie-value');
|
||||
}, 'cookieStore.set with name in both positional arguments and options');
|
||||
|
||||
promise_test(async testCase => {
|
||||
await promise_rejects_js(testCase, TypeError,
|
||||
cookieStore.set('', 'suspicious-value=resembles-name-and-value'));
|
||||
}, "cookieStore.set with empty name and an '=' in value");
|
||||
|
||||
promise_test(async testCase => {
|
||||
await cookieStore.delete('cookie-name');
|
||||
cookieStore.set('cookie-name', 'suspicious-value=resembles-name-and-value');
|
||||
testCase.add_cleanup(async () => {
|
||||
await cookieStore.delete('cookie-name');
|
||||
});
|
||||
const cookie = await cookieStore.get('cookie-name');
|
||||
assert_equals(cookie.name, 'cookie-name');
|
||||
assert_equals(cookie.value, 'suspicious-value=resembles-name-and-value');
|
||||
}, "cookieStore.set with normal name and an '=' in value");
|
||||
|
||||
promise_test(async testCase => {
|
||||
await cookieStore.delete('cookie-name');
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<!doctype HTML>
|
||||
<html style="font-size: 200px">
|
||||
TEST
|
||||
</html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype HTML>
|
||||
<html class="test-wait" style="font-size: 200px; opacity: 0.5">
|
||||
<link rel="help" href="https://drafts.fxtf.org/compositing/#pagebackdrop">
|
||||
<link rel="match" href="root-element-opacity-change-ref.html">
|
||||
<meta name="assert" content="View background should be white after opacity changes from 0.5 to 1">
|
||||
<script src="/common/rendering-utils.js"></script>
|
||||
TEST
|
||||
<script>
|
||||
waitForAtLeastOneFrame().then(() => {
|
||||
document.documentElement.style.opacity=1;
|
||||
document.documentElement.classList.remove('test-wait');
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
</div>
|
||||
|
||||
<div class="grid" style="grid: calc(50px - 10%) / calc(100px + 20%);"
|
||||
data-expected-width="100" data-expected-height="50">
|
||||
data-expected-width="0" data-expected-height="0">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: fit-content(50px) / fit-content(100px);"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,210 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Size containment on grid containers with percentages</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
|
||||
<meta name="assert" content="Checks that grid containers with size containment and their grid items are sized correctly when the track sizing functions contain percentages.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
contain: size;
|
||||
font: 75px/1 Ahem;
|
||||
}
|
||||
.min-content {
|
||||
height: min-content;
|
||||
width: min-content;
|
||||
}
|
||||
.max-content {
|
||||
height: max-content;
|
||||
width: max-content;
|
||||
}
|
||||
.fixed {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.percent {
|
||||
grid: 50% / 200%;
|
||||
}
|
||||
.calc {
|
||||
grid: calc(100px + 50%) / calc(100px + 200%);
|
||||
}
|
||||
.minmax-percent-fixed {
|
||||
grid: minmax(50%, 100px) / minmax(200%, 100px);
|
||||
}
|
||||
.minmax-fixed-percent {
|
||||
grid: minmax(100px, 50%) / minmax(100px, 200%);
|
||||
}
|
||||
.minmax-percent-flex {
|
||||
grid: minmax(50%, 1fr) / minmax(200%, 1fr);
|
||||
}
|
||||
.minmax-percent-intrinsic {
|
||||
grid: minmax(50%, min-content) / minmax(200%, min-content);
|
||||
}
|
||||
.minmax-intrinsic-percent {
|
||||
grid: minmax(min-content, 50%) / minmax(min-content, 200%);
|
||||
}
|
||||
.fit-content {
|
||||
grid: fit-content(50%) / fit-content(200%);
|
||||
}
|
||||
</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')">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="grid percent min-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="0" data-expected-width="0"></div>
|
||||
</div>
|
||||
<div class="grid percent min-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="0" data-expected-width="0">XXXX</div>
|
||||
</div>
|
||||
<div class="grid percent max-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="0" data-expected-width="0"></div>
|
||||
</div>
|
||||
<div class="grid percent max-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="0" data-expected-width="0">XXXX</div>
|
||||
</div>
|
||||
<div class="grid percent fixed" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="50" data-expected-width="200"></div>
|
||||
</div>
|
||||
<div class="grid percent fixed" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="50" data-expected-width="200">XXXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid calc min-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="100" data-expected-width="100"></div>
|
||||
</div>
|
||||
<div class="grid calc min-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="100" data-expected-width="100">XXXX</div>
|
||||
</div>
|
||||
<div class="grid calc max-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="100" data-expected-width="100"></div>
|
||||
</div>
|
||||
<div class="grid calc max-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="100" data-expected-width="100">XXXX</div>
|
||||
</div>
|
||||
<div class="grid calc fixed" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="150" data-expected-width="300"></div>
|
||||
</div>
|
||||
<div class="grid calc fixed" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="150" data-expected-width="300">XXXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid minmax-percent-fixed min-content" data-expected-height="100" data-expected-width="0">
|
||||
<div data-expected-height="100" data-expected-width="0"></div>
|
||||
</div>
|
||||
<div class="grid minmax-percent-fixed min-content" data-expected-height="100" data-expected-width="0">
|
||||
<div data-expected-height="100" data-expected-width="0">XXXX</div>
|
||||
</div>
|
||||
<div class="grid minmax-percent-fixed max-content" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="100" data-expected-width="200"></div>
|
||||
</div>
|
||||
<div class="grid minmax-percent-fixed max-content" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="100" data-expected-width="200">XXXX</div>
|
||||
</div>
|
||||
<div class="grid minmax-percent-fixed fixed" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="100" data-expected-width="200"></div>
|
||||
</div>
|
||||
<div class="grid minmax-percent-fixed fixed" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="100" data-expected-width="200">XXXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid minmax-fixed-percent min-content" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="100" data-expected-width="100"></div>
|
||||
</div>
|
||||
<div class="grid minmax-fixed-percent min-content" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="100" data-expected-width="100">XXXX</div>
|
||||
</div>
|
||||
<div class="grid minmax-fixed-percent max-content" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="100" data-expected-width="100"></div>
|
||||
</div>
|
||||
<div class="grid minmax-fixed-percent max-content" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="100" data-expected-width="100">XXXX</div>
|
||||
</div>
|
||||
<div class="grid minmax-fixed-percent fixed" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="100" data-expected-width="100"></div>
|
||||
</div>
|
||||
<div class="grid minmax-fixed-percent fixed" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="100" data-expected-width="100">XXXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid minmax-percent-flex min-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="0" data-expected-width="0"></div>
|
||||
</div>
|
||||
<div class="grid minmax-percent-flex min-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="0" data-expected-width="0">XXXX</div>
|
||||
</div>
|
||||
<div class="grid minmax-percent-flex max-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="0" data-expected-width="0"></div>
|
||||
</div>
|
||||
<div class="grid minmax-percent-flex max-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="0" data-expected-width="0">XXXX</div>
|
||||
</div>
|
||||
<div class="grid minmax-percent-flex fixed" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="100" data-expected-width="200"></div>
|
||||
</div>
|
||||
<div class="grid minmax-percent-flex fixed" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="100" data-expected-width="200">XXXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid minmax-intrinsic-percent min-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="0" data-expected-width="0"></div>
|
||||
</div>
|
||||
<div class="grid minmax-intrinsic-percent min-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="75" data-expected-width="300">XXXX</div>
|
||||
</div>
|
||||
<div class="grid minmax-intrinsic-percent max-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="0" data-expected-width="0"></div>
|
||||
</div>
|
||||
<div class="grid minmax-intrinsic-percent max-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="75" data-expected-width="300">XXXX</div>
|
||||
</div>
|
||||
<div class="grid minmax-intrinsic-percent fixed" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="50" data-expected-width="100"></div>
|
||||
</div>
|
||||
<div class="grid minmax-intrinsic-percent fixed" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="75" data-expected-width="300">XXXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid minmax-percent-intrinsic min-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="0" data-expected-width="0"></div>
|
||||
</div>
|
||||
<div class="grid minmax-percent-intrinsic min-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="0" data-expected-width="0">XXXX</div>
|
||||
</div>
|
||||
<div class="grid minmax-percent-intrinsic max-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="0" data-expected-width="0"></div>
|
||||
</div>
|
||||
<div class="grid minmax-percent-intrinsic max-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="0" data-expected-width="0">XXXX</div>
|
||||
</div>
|
||||
<div class="grid minmax-percent-intrinsic fixed" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="50" data-expected-width="200"></div>
|
||||
</div>
|
||||
<div class="grid minmax-percent-intrinsic fixed" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="75" data-expected-width="200">XXXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid fit-content min-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="0" data-expected-width="0"></div>
|
||||
</div>
|
||||
<div class="grid fit-content min-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="75" data-expected-width="300">XXXX</div>
|
||||
</div>
|
||||
<div class="grid fit-content max-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="0" data-expected-width="0"></div>
|
||||
</div>
|
||||
<div class="grid fit-content max-content" data-expected-height="0" data-expected-width="0">
|
||||
<div data-expected-height="75" data-expected-width="300">XXXX</div>
|
||||
</div>
|
||||
<div class="grid fit-content fixed" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="0" data-expected-width="0"></div>
|
||||
</div>
|
||||
<div class="grid fit-content fixed" data-expected-height="100" data-expected-width="100">
|
||||
<div data-expected-height="75" data-expected-width="300">XXXX</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: large flex-shrink value</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#scaled-flex-shrink-factor">
|
||||
<link rel="help" href="https://crbug.com/543614">
|
||||
<meta name="assert" content="This test ensures that large flex-shrink value does crash due to the lost of precision.">
|
||||
<style>
|
||||
.flex {
|
||||
display: inline-flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.fractional {
|
||||
height: 50px;
|
||||
width: 50.5px;
|
||||
min-width: 50.5px;
|
||||
}
|
||||
|
||||
.high-shrink {
|
||||
flex-shrink: 130000000000000;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="flex">
|
||||
<div class="fractional"></div>
|
||||
<div class="high-shrink"></div>
|
||||
</div>
|
||||
|
||||
<p>The high flex shrink factor can lead to loss of precision as we calculate the
|
||||
<a href="https://drafts.csswg.org/css-flexbox/#scaled-flex-shrink-factor">sum of
|
||||
scaled flex shrink factors</a> as required by the spec, and as we later subtract
|
||||
the scaled flex factors for frozen violations, we can get to a negative value
|
||||
due to that lost precision.</p>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: inline-flex layout with editing operations</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
|
||||
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=77772">
|
||||
<link rel="help" href="https://crbug.com/118662">
|
||||
<meta name="assert" content="This test ensures that inline-flex layout does not crash with editing operations.">
|
||||
<style>#el0::first-letter, #el0:first-child { height: 100px; }</style>
|
||||
<div id='container' contentEditable>
|
||||
<a>
|
||||
<img>
|
||||
<div id="el0" style="display: inline-flex">
|
||||
<pre>AAAAA</pre>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<script>
|
||||
window.getSelection().selectAllChildren(document.getElementById('container'));
|
||||
document.execCommand('FormatBlock', false, '<h5>');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: inline-flex layout with updating text and editing operations</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
|
||||
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=77772">
|
||||
<link rel="help" href="https://crbug.com/118662">
|
||||
<meta name="assert" content="This test ensures that inline-flex layout does not crash with updating text and editing operations.">
|
||||
<style>#el0::first-letter, #el0:first-child { height: 10px; }</style>
|
||||
<div id='container' contentEditable>
|
||||
<a>
|
||||
<img>
|
||||
<div id="el0" style="display: inline-flex">
|
||||
<pre></pre>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<script>
|
||||
document.querySelector('pre').textContent = 'AA\u0605';
|
||||
window.getSelection().selectAllChildren(document.getElementById('container'));
|
||||
document.execCommand('FormatBlock', false, '<h1>');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<html style="display: inline-flex;">
|
||||
<title>CSS Flexbox: the main axis calculation with frameset</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#main-axis">
|
||||
<link rel="help" href="https://crbug.com/335121">
|
||||
<meta name="assert" content="This test ensures that frameset does not crash on computing the main axis.">
|
||||
<frameset></frameset>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid: Grid container baseline</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
||||
<link rel="help" href="https://crbug.com/234191">
|
||||
<link rel="match" href="references/grid-baseline-001-ref.html">
|
||||
<meta name="assert" content="Check the first baselines of a grid container."/>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.inline-grid {
|
||||
display: inline-grid;
|
||||
background-color: lightgrey;
|
||||
margin-top: 5px;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
background-color: grey;
|
||||
margin-top: 10px;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.empty {
|
||||
border-style: solid;
|
||||
border-width: 5px 0px 10px;
|
||||
padding: 2px 0px 4px;
|
||||
margin: 10px 0px 20px;
|
||||
}
|
||||
.column {
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
.firstRowFirstColumn {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body style="position: relative">
|
||||
|
||||
<!-- If any of the grid items whose areas intersect the grid container's first
|
||||
row/column participate in baseline alignment, the grid container's baseline is
|
||||
the baseline of those grid items. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-grid" style="grid-auto-rows: 50px;">
|
||||
<div style="align-self: end">below</div>
|
||||
<div style="align-self: baseline; margin-top: 15px">baseline</div>
|
||||
<div style="align-self: start">above</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<!-- This grid has a baseline item, it's orthogonal but it still participates
|
||||
in baseline alignment. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-grid" style="grid-auto-rows: 40px">
|
||||
<div style="align-self: end">below</div>
|
||||
<div style="align-self: baseline; margin-top: 20px; writing-mode: vertical-rl"></div>
|
||||
<div style="align-self: start">above</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-grid">
|
||||
<h2>h2 baseline</h2>
|
||||
<div>above</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-grid">
|
||||
<div>baseline</div>
|
||||
<h2>h2 below</h2>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<!-- If the first grid item has an orthogonal baseline, use the synthesized
|
||||
baseline (bottom of the content box of the first item). -->
|
||||
<div>
|
||||
should align with the middle
|
||||
<div class="inline-grid" style="width: 40px; height: 40px">
|
||||
<div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black"></div>
|
||||
</div>
|
||||
of the grey box
|
||||
</div>
|
||||
|
||||
<!-- If there are no griditems, align to the bottom of the margin box. -->
|
||||
<div>
|
||||
should align below the bottom
|
||||
<div class="empty inline-grid" style="width: 30px; height: 30px">
|
||||
</div>
|
||||
of the black line
|
||||
</div>
|
||||
|
||||
<div>
|
||||
should align with the bottom
|
||||
<div class="inline-grid" style="width: 40px; height: 40px;">
|
||||
<div style="width: 20px; height: 20px; border: 5px solid black; background: red;"></div>
|
||||
</div>
|
||||
of the red box
|
||||
</div>
|
||||
|
||||
<!-- column-axis test cases. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-grid column">
|
||||
<div>baseline</div>
|
||||
<div>below</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<!-- If the first grid item has an orthogonal baseline, use the synthesized
|
||||
baseline (bottom of the border box of the first item). -->
|
||||
<div>
|
||||
should align with the middle
|
||||
<div class="inline-grid column" style="width: 40px; height: 40px;">
|
||||
<div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black"></div>
|
||||
<div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div>
|
||||
</div>
|
||||
of the grey box
|
||||
</div>
|
||||
|
||||
<!-- More tests on the right side of the page. -->
|
||||
<div style="position: absolute; top: 0; left: 400px; width: 360px">
|
||||
|
||||
<!-- Ignore absolutely positioned grid items. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-grid">
|
||||
<div style="position: absolute">absolute</div>
|
||||
<div style="margin-top: 30px">baseline</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<!-- We don't participate in baseline alignment if there's an auto margin. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-grid" style="grid-auto-rows: 40px;">
|
||||
<div>baseline</div>
|
||||
<div style="align-self: baseline; margin-top: auto">below</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<div>
|
||||
before text
|
||||
<div style="display: inline-block">
|
||||
<div class="inline-grid" style="height: 40px;">
|
||||
<div>above</div>
|
||||
<div style="align-self: baseline; margin-top: 10px">baseline</div>
|
||||
<div>above</div>
|
||||
</div>
|
||||
after
|
||||
</div>
|
||||
text
|
||||
</div>
|
||||
|
||||
<!-- The spec is a little unclear what should happen here. For now,
|
||||
align to the last line box. -->
|
||||
<div>
|
||||
before text
|
||||
<div style="display: inline-block">
|
||||
<div class="grid" style="height: 30px;">
|
||||
baseline
|
||||
</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<table style="background-color: lightgrey; margin-top: 5px">
|
||||
<tr style="height: 50px">
|
||||
<td style="vertical-align: bottom">bottom</td>
|
||||
<td style="vertical-align: baseline">baseline</td>
|
||||
<td style="vertical-align: top">top</td>
|
||||
<td style="vertical-align: baseline"><div class="grid">
|
||||
<h2>h2 baseline</h2>
|
||||
<div>above</div>
|
||||
</div></td>
|
||||
</table>
|
||||
|
||||
<!-- If a box contributing a baseline has a scrollbar, the box must be treated
|
||||
as being in its initial scroll position when computing the baseline. -->
|
||||
<div>
|
||||
before text
|
||||
<div id="grid-with-scrollbar" class="inline-grid" style="height: 65px; width: 150px">
|
||||
<div id="griditem-with-scrollbar" style="align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;">
|
||||
The baseline is based on<br>
|
||||
the non-scrolled position;<br>
|
||||
this won't line up.
|
||||
</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById("griditem-with-scrollbar").scrollTop = 999;
|
||||
document.getElementById("grid-with-scrollbar").style.width = "auto";
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: Grid container baseline</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
||||
<link rel="help" href="https://crbug.com/234191">
|
||||
<link rel="match" href="references/grid-baseline-002-ref.html">
|
||||
<meta name="assert" content="Check that Baseline Alignment works for 1-dimensional Grid like in Flexible Box, even using margins, paddings and borders."/>
|
||||
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
.inline-block { display: inline-block; }
|
||||
.grid, .inline-grid {
|
||||
background-color: lightgrey;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.border { border: 11px solid pink; }
|
||||
.padding { padding: 13px; }
|
||||
.margin { margin: 8px 0; }
|
||||
</style>
|
||||
<div>
|
||||
before text
|
||||
<div class="border" style="display: inline-block; background-color: lightgrey">
|
||||
<div class="grid" style="height: 30px; margin-top: 7px; padding-top: 10px;">
|
||||
baseline
|
||||
</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Should align
|
||||
<div class="inline-block border">
|
||||
<div class="grid padding" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink">
|
||||
<div style="background-color: lightgrey"></div>
|
||||
</div>
|
||||
</div>
|
||||
with the
|
||||
<div class="inline-block margin">
|
||||
<div class="grid border" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink">
|
||||
<div style="background-color: lightgrey"></div>
|
||||
</div>
|
||||
</div>
|
||||
bottom of
|
||||
<div class="inline-block padding" style="padding-left: 0; padding-right: 0">
|
||||
<div class="grid margin border" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink">
|
||||
<div style="background-color: lightgrey;"></div>
|
||||
</div>
|
||||
</div>
|
||||
the grey box.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Should align with the
|
||||
<div class="inline-block">
|
||||
<div class="grid" style="background-color: white">
|
||||
<div class="border padding margin" style="background-color: lightgrey;"></div>
|
||||
</div>
|
||||
</div>
|
||||
bottom of the pink box.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Should align 8px
|
||||
<div class="inline-grid margin border" style="grid-template-columns: 30px; grid-template-rows: 30px;"></div>
|
||||
below the bottom
|
||||
<div class="inline-grid margin border padding"></div>
|
||||
of the pink box.
|
||||
</div>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: Grid container baseline</title>
|
||||
<link rel="author" title="Manuel Rego" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline">
|
||||
<link rel="help" href="https://crbug.com/234191">
|
||||
<link rel="match" href="references/grid-baseline-003-ref.html">
|
||||
<meta name="assert" content="Check that grid container baseline should be synthesized from the border edges when it has no baseline."/>
|
||||
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
.inline-block { display: inline-block; }
|
||||
.grid, .inline-grid {
|
||||
background-color: lightgrey;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.border { border: 11px solid pink; }
|
||||
.padding { padding: 13px; }
|
||||
.margin { margin: 8px 0; }
|
||||
</style>
|
||||
|
||||
<div>
|
||||
Should align with the bottom
|
||||
<div class="inline-block border margin padding" style="background-color: pink">
|
||||
<div class="grid border margin padding" style="grid-template-columns: 100px; grid-template-rows: 100px; background-color: pink">
|
||||
<div style="overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink;"></div>
|
||||
</div>
|
||||
</div>
|
||||
of the horizontal scrollbar.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Should align 10px below the
|
||||
<div class="inline-block" style="background-color: pink">
|
||||
<div class="grid" style="grid-template-columns: 100px; grid-template-rows: 100px; background-color: pink">
|
||||
<div style="overflow: scroll; padding-bottom: 10px; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
|
||||
</div>
|
||||
</div>
|
||||
horizontal scrollbar, if one is visible.
|
||||
</div>
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: Grid container baseline</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-order">
|
||||
<link rel="help" href="https://crbug.com/234191">
|
||||
<meta name="assert" content="Check that grid container must use its first item in grid-modified document order (grid order) to compute its baseline."/>
|
||||
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<link href="/css/support/alignment.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.container {
|
||||
position: relative;
|
||||
font: 10px/1 Ahem;
|
||||
border: 5px solid;
|
||||
width: 470px;
|
||||
}
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 50px 50px;
|
||||
width: 150px;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
}
|
||||
.twoRows { grid-template-rows: 50px 50px; }
|
||||
.threeRows { grid-template-rows: 50px 50px 50px; }
|
||||
.empty {
|
||||
border-color: black;
|
||||
border-style: solid;
|
||||
margin: 15px 0px 30px;
|
||||
border-width: 5px 0px 10px;
|
||||
padding: 10px 0px 20px;
|
||||
}
|
||||
.item {
|
||||
height: 25px;
|
||||
border-color: black;
|
||||
border-style: solid;
|
||||
}
|
||||
.style1 {
|
||||
border-width: 5px 0px 10px;
|
||||
padding: 10px 0px 20px;
|
||||
}
|
||||
.style2 {
|
||||
border-width: 10px 0px 5px;
|
||||
padding: 20px 0px 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.style3 {
|
||||
border-width: 10px 0px 20px;
|
||||
padding: 5px 0px 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.bothRowFirstColumn, .secondRowSecondColumn {
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
background-color: pink;
|
||||
}
|
||||
.firstRowBothColumn, .secondRowBothColumn {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid, container'); })">
|
||||
<div id="log"></div>
|
||||
<p>
|
||||
The test shows 3 grids each of them with 3 items sorted differently in the DOM.<br>
|
||||
Each grid container must use its first (grid order) item to compute its baseline, and using document-oder in case of element with same grid-order. Hence they might be baseline aligned each other accordingly.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This case shows 3 items located along the first row and in different columns, so grid baseline is computed using the one located at first column (blue item).
|
||||
</p>
|
||||
<div class="container" data-expected-width="480" data-expected-height="120">
|
||||
<div class="grid" data-offset-x="0" data-offset-y="20">
|
||||
<div class="item style1 firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item style2 firstRowSecondColumn" data-offset-x="50" data-offset-y="10"></div>
|
||||
<div class="item style3 firstRowThirdColumn" data-offset-x="100" data-offset-y="20"></div>
|
||||
</div>
|
||||
<div class="grid" data-offset-x="160" data-offset-y="10">
|
||||
<div class="item style1 firstRowThirdColumn" data-offset-x="100" data-offset-y="0"></div>
|
||||
<div class="item style2 firstRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="item style3 firstRowSecondColumn" data-offset-x="50" data-offset-y="20"></div>
|
||||
</div>
|
||||
<div class="grid" data-offset-x="320" data-offset-y="0">
|
||||
<div class="item style1 firstRowSecondColumn" data-offset-x="50" data-offset-y="0"></div>
|
||||
<div class="item style2 firstRowThirdColumn" data-offset-x="100" data-offset-y="10"></div>
|
||||
<div class="item style3 firstRowFirstColumn" data-offset-x="0" data-offset-y="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
This case shows 3 items located along the first row and in different columns, so such item is used to determine the grid's baseline instead of using the grid order.
|
||||
</p>
|
||||
<div class="container" data-expected-width="480" data-expected-height="120">
|
||||
<div class="grid" data-offset-x="0" data-offset-y="0">
|
||||
<div class="item style1 firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="item style2 firstRowSecondColumn" data-offset-x="50" data-offset-y="10"></div>
|
||||
<div class="item style3 firstRowThirdColumn alignSelfBaseline" data-offset-x="100" data-offset-y="20"></div>
|
||||
</div>
|
||||
<div class="grid" data-offset-x="160" data-offset-y="0">
|
||||
<div class="item style1 firstRowThirdColumn" data-offset-x="100" data-offset-y="0"></div>
|
||||
<div class="item style2 firstRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="item style3 firstRowSecondColumn alignSelfBaseline" data-offset-x="50" data-offset-y="20"></div>
|
||||
</div>
|
||||
<div class="grid" data-offset-x="320" data-offset-y="20">
|
||||
<div class="item style1 firstRowSecondColumn alignSelfBaseline" data-offset-x="50" data-offset-y="0"></div>
|
||||
<div class="item style2 firstRowThirdColumn" data-offset-x="100" data-offset-y="10"></div>
|
||||
<div class="item style3 firstRowFirstColumn" data-offset-x="0" data-offset-y="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
This case shows 3 items' areas intersecting the first row and first column, so the dom order must be used to determine each grid's baseline.
|
||||
</p>
|
||||
<div class="container" data-expected-width="480" data-expected-height="165">
|
||||
<div class="grid twoRows" data-offset-x="0" data-offset-y="40">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
</div>
|
||||
<div class="grid twoRows" data-offset-x="160" data-offset-y="0">
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
</div>
|
||||
<div class="grid twoRows" data-offset-x="320" data-offset-y="55">
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
This case shows 3 items' areas intersecting the first row and first column, but one of the items participates in baseline alignment, so such item is used to determine the grid's baseline instead of using the dom order.
|
||||
</p>
|
||||
<div class="container" data-expected-width="480" data-expected-height="165">
|
||||
<div class="grid twoRows" data-offset-x="0" data-offset-y="55">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="firstRowBothColumn alignSelfBaseline" style="width: 100px; height: 20px;" data-offset-x="0" data-offset-y="15"></div>
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
</div>
|
||||
<div class="grid twoRows" data-offset-x="160" data-offset-y="40">
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="firstRowFirstColumn alignSelfBaseline" style="width: 50px; height: 50px;" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
</div>
|
||||
<div class="grid twoRows" data-offset-x="320" data-offset-y="0">
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="bothRowFirstColumn alignSelfBaseline" style="width: 40px; height: 80px;" data-offset-x="0" data-offset-y="10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
This case shows one of the grids with no items, hence its baseline must be synthesized.
|
||||
</p>
|
||||
<div class="container" data-expected-width="480" data-expected-height="250">
|
||||
<div class="grid twoRows" data-offset-x="0" data-offset-y="140">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
</div>
|
||||
<div class="grid twoRows" data-offset-x="160" data-offset-y="100">
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
</div>
|
||||
<div class="grid empty twoRows" data-offset-x="320" data-offset-y="15">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
This case shows one of the grids with no items in the first row, hence its baseline must be synthesized.
|
||||
</p>
|
||||
<div class="container" data-expected-width="480" data-expected-height="300">
|
||||
<div class="grid twoRows" data-offset-x="0" data-offset-y="190">
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
</div>
|
||||
<div class="grid twoRows" data-offset-x="160" data-offset-y="150">
|
||||
<div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
|
||||
</div>
|
||||
<div class="grid empty threeRows" data-offset-x="320" data-offset-y="15">
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="60"></div>
|
||||
<div class="thirdRowSecondColumn" data-offset-x="50" data-offset-y="110"></div>
|
||||
<div class="secondRowBothColumn" data-offset-x="0" data-offset-y="75"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.inline-flexbox {
|
||||
display: inline-flex;
|
||||
background-color: lightgrey;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.flexbox {
|
||||
display: flex;
|
||||
background-color: grey;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.empty {
|
||||
border-style: solid;
|
||||
border-width: 5px 0px 10px;
|
||||
padding: 2px 0px 4px;
|
||||
margin: 10px 0px 20px;
|
||||
}
|
||||
.column {
|
||||
flex-flow: column;
|
||||
}
|
||||
.column-reverse {
|
||||
flex-flow: column-reverse;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body style="position: relative">
|
||||
|
||||
<!-- If any of the flex items on the flex container's first line participate
|
||||
in baseline alignment, the flex container's main-axis baseline is the baseline
|
||||
of those flex items. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-flexbox" style="height: 50px;">
|
||||
<div style="align-self: flex-end">below</div>
|
||||
<div style="align-self: baseline; margin-top: 15px">baseline</div>
|
||||
<div style="align-self: flex-start">above</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<!-- This grid has a baseline item, it's orthogonal but it still participates
|
||||
in baseline alignment. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-flexbox" style="height: 40px">
|
||||
<div style="align-self: flex-end">below</div>
|
||||
<div style="align-self: baseline; margin-top: 20px"></div>
|
||||
<div style="align-self: flex-start">above</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-flexbox">
|
||||
<h2>h2 baseline</h2>
|
||||
<div>above</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-flexbox">
|
||||
<div>baseline</div>
|
||||
<h2>h2 below</h2>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<!-- If the first flex item has an orthogonal baseline, use the synthesized
|
||||
baseline (bottom of the content box of the first item). -->
|
||||
<div>
|
||||
should align with the middle
|
||||
<div class="inline-flexbox" style="width: 40px; height: 40px">
|
||||
<div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black"></div>
|
||||
</div>
|
||||
of the grey box
|
||||
</div>
|
||||
|
||||
<!-- If there are no flexitems, align to the bottom of the margin box. -->
|
||||
<div>
|
||||
should align below the bottom
|
||||
<div class="empty inline-flexbox" style="width: 30px; height: 30px">
|
||||
</div>
|
||||
of the black line
|
||||
</div>
|
||||
|
||||
<!-- If the griditem has not a natural baseline, align to the bottom of the box. -->
|
||||
<div>
|
||||
should align with the bottom
|
||||
<div class="inline-flexbox" style="width: 40px; height: 40px;">
|
||||
<div style="width: 20px; height: 20px; border: 5px solid; background: red; "></div>
|
||||
</div>
|
||||
of the red box
|
||||
</div>
|
||||
|
||||
<!-- cross-axis (column) test cases. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-flexbox column">
|
||||
<div>baseline</div>
|
||||
<div>below</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<!-- If the first flex item has an orthogonal baseline, use the synthesized
|
||||
baseline (bottom of the content box of the first item). -->
|
||||
<div>
|
||||
should align with the middle
|
||||
<div class="inline-flexbox column" style="width: 40px; height: 40px;">
|
||||
<div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black"></div>
|
||||
<div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div>
|
||||
</div>
|
||||
of the grey box
|
||||
</div>
|
||||
|
||||
<!-- More tests on the right side of the page. -->
|
||||
<div style="position: absolute; top: 0; left: 400px; width: 360px">
|
||||
|
||||
<!-- Ignore absolutely positioned flex items. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-flexbox">
|
||||
<div style="position: absolute">absolute</div>
|
||||
<div style="margin-top: 30px">baseline</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<!-- We don't participate in baseline alignment if there's an auto margin. -->
|
||||
<div>
|
||||
before text
|
||||
<div class="inline-flexbox" style="height: 40px;">
|
||||
<div>baseline</div>
|
||||
<div style="align-self: baseline; margin-top: auto">below</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<div>
|
||||
before text
|
||||
<div style="display: inline-block">
|
||||
<div class="inline-flexbox" style="height: 40px;">
|
||||
<div>above</div>
|
||||
<div style="align-self: baseline; margin-top: 10px">baseline</div>
|
||||
<div>above</div>
|
||||
</div>
|
||||
after
|
||||
</div>
|
||||
text
|
||||
</div>
|
||||
|
||||
<!-- The spec is a little unclear what should happen here. For now, align to
|
||||
the last line box. -->
|
||||
<div>
|
||||
before text
|
||||
<div style="display: inline-block">
|
||||
<div class="flexbox" style="height: 30px;">
|
||||
baseline
|
||||
</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<table style="background-color: lightgrey; margin-top: 5px">
|
||||
<tr style="height: 50px">
|
||||
<td style="vertical-align: bottom">bottom</td>
|
||||
<td style="vertical-align: baseline">baseline</td>
|
||||
<td style="vertical-align: top">top</td>
|
||||
<td style="vertical-align: baseline"><div class="flexbox">
|
||||
<h2>h2 baseline</h2>
|
||||
<div>above</div>
|
||||
</div></td>
|
||||
</table>
|
||||
|
||||
<!-- If a box contributing a baseline has a scrollbar, the box must be treated
|
||||
as being in its initial scroll position when computing the baseline. -->
|
||||
<div>
|
||||
before text
|
||||
<div id="flexbox-with-scrollbar" class="inline-flexbox" style="height: 65px; width: 150px">
|
||||
<div id="flexitem-with-scrollbar" style="align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;">
|
||||
The baseline is based on<br>
|
||||
the non-scrolled position;<br>
|
||||
this won't line up.
|
||||
</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById("flexitem-with-scrollbar").scrollTop = 999;
|
||||
document.getElementById("flexbox-with-scrollbar").style.width = "auto";
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
}
|
||||
.inline-flexbox {
|
||||
display: inline-flex;
|
||||
}
|
||||
.flex-one {
|
||||
flex: 1;
|
||||
}
|
||||
.inline-block { display: inline-block; }
|
||||
.flexbox, .inline-flexbox { background-color: lightgrey; }
|
||||
.border { border: 11px solid pink; }
|
||||
.padding { padding: 13px; }
|
||||
.margin { margin: 8px 0; }
|
||||
.flexbox > div {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
before text
|
||||
<div class="border" style="display: inline-block; background-color: lightgrey">
|
||||
<div class="flexbox" style="height: 30px; margin-top: 7px; padding-top: 10px;">
|
||||
baseline
|
||||
</div>
|
||||
</div>
|
||||
after text
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Should align
|
||||
<div class="inline-block border">
|
||||
<div class="flexbox padding" style="width: 50px; height: 50px; background-color: pink">
|
||||
<div class="flex-one" style="background-color: lightgrey"></div>
|
||||
</div>
|
||||
</div>
|
||||
with the
|
||||
<div class="inline-block margin">
|
||||
<div class="flexbox border" style="width: 50px; height: 50px; background-color: pink">
|
||||
<div class="flex-one" style="background-color: lightgrey"></div>
|
||||
</div>
|
||||
</div>
|
||||
bottom of
|
||||
<div class="inline-block padding" style="padding-left: 0; padding-right: 0">
|
||||
<div class="flexbox margin border" style="width: 50px; height: 50px; background-color: pink">
|
||||
<div class="flex-one" style="background-color: lightgrey;"></div>
|
||||
</div>
|
||||
</div>
|
||||
the grey box.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Should align with the
|
||||
<div class="inline-block">
|
||||
<div class="flexbox" style="background-color: white">
|
||||
<div class="flex-one border padding margin" style="background-color: lightgrey;"></div>
|
||||
</div>
|
||||
</div>
|
||||
bottom of the pink box.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Should align 8px
|
||||
<div class="inline-flexbox margin border" style="width: 30px; height: 30px;"></div>
|
||||
below the bottom
|
||||
<div class="inline-flexbox margin border padding"></div>
|
||||
of the pink box.
|
||||
</div>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
}
|
||||
.inline-flexbox {
|
||||
display: inline-flex;
|
||||
}
|
||||
.flex-one {
|
||||
flex: 1;
|
||||
}
|
||||
.inline-block { display: inline-block; }
|
||||
.flexbox, .inline-flexbox { background-color: lightgrey; }
|
||||
.border { border: 11px solid pink; }
|
||||
.padding { padding: 13px; }
|
||||
.margin { margin: 8px 0; }
|
||||
.flexbox > div {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
Should align with the bottom
|
||||
<div class="inline-block border margin padding" style="background-color: pink">
|
||||
<div class="flexbox border margin padding" style="width: 100px; height: 100px; background-color: pink">
|
||||
<div style="width: 200px; overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink;"></div>
|
||||
</div>
|
||||
</div>
|
||||
of the horizontal scrollbar.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Should align 10px below the
|
||||
<div class="inline-block" style="background-color: pink">
|
||||
<div class="flexbox" style="width: 100px; height: 100px; background-color: pink">
|
||||
<div style="width: 200px; overflow: scroll; background-color: lightgrey; padding-bottom: 10px; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
|
||||
</div>
|
||||
</div>
|
||||
horizontal scrollbar, if one is visible.
|
||||
</div>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid Layout Test: Percentage rows resolution in a flex item grid container</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes">
|
||||
<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=617876">
|
||||
<link rel="match" href="../reference/flex-item-grid-container-percentage-rows-001-ref.html">
|
||||
<meta name="assert" content="This test ensures that percentage rows are properly resolved for a grid container that is a flex item with a definite height.">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 5px solid;
|
||||
}
|
||||
|
||||
.flexitem {
|
||||
flex: 1;
|
||||
background: magenta;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 50% / 1fr;
|
||||
}
|
||||
|
||||
.griditem {
|
||||
background: cyan;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if you see a 200x200 box with top half cyan and bottom half magenta.</p>
|
||||
|
||||
<div class="flex">
|
||||
<div class="flexitem grid">
|
||||
<div class="griditem"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: auto-fill rows</title>
|
||||
<link rel="author" title="Sergio Villar" href="mailto: svillar@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fill">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-row">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-grid-row-gap">
|
||||
<link rel="help" href="https://crbug.com/619930">
|
||||
<link rel="help" href="https://crbug.com/589460">
|
||||
<link rel="help" href="https://crbug.com/648814">
|
||||
<meta name="assert" content="Check that auto-fill rows are properly computed in a grid container"/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
border: 2px solid magenta;
|
||||
height: 200px;
|
||||
width: 25px;
|
||||
align-content: start;
|
||||
grid-auto-rows: 157px;
|
||||
grid-auto-columns: 25px;
|
||||
|
||||
float: left;
|
||||
position: relative;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.gridOnlyAutoRepeat { grid-template-rows: repeat(auto-fill, 30px [autobar]); }
|
||||
.gridAutoRepeatAndFixedBefore { grid-template-rows: 10px [foo] 20% [bar] repeat(auto-fill, [autofoo] 35px); }
|
||||
.gridAutoRepeatAndFixedAfter { grid-template-rows: repeat(auto-fill, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }
|
||||
.gridAutoRepeatAndFixed { grid-template-rows: [start] repeat(2, 50px [a]) [middle] repeat(auto-fill, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
|
||||
.gridMultipleNames { grid-template-rows: [start] 20px [foo] 50% repeat(auto-fill, [bar] 20px [start foo]) [foo] 10% [end bar]; }
|
||||
.gridMultipleTracks { grid-template-rows: [start] 20px repeat(auto-fill, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; }
|
||||
|
||||
.item { background-color: blue; }
|
||||
.item:nth-child(2) { background: green; }
|
||||
.item:nth-child(3) { background: orange; }
|
||||
|
||||
.gap { grid-row-gap: 20px; }
|
||||
|
||||
</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')">
|
||||
<div id="log"></div>
|
||||
|
||||
<p>This test checks that repeat(auto-fill, ) syntax works as expected.</p>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat">
|
||||
<div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat">
|
||||
<div class="item" style="grid-row: 1 / span 6 autobar" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat gap">
|
||||
<div class="item" style="grid-row: 1 / span 5" data-offset-y="0" data-offset-x="0" data-expected-height="357" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat gap">
|
||||
<div class="item" style="grid-row: autobar 2 / span 3" data-offset-y="100" data-offset-x="0" data-expected-height="257" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat gap" style="height: auto; max-height: 90px;" data-expected-height="94" data-expected-width="29">
|
||||
<div class="item" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
|
||||
<div class="item" data-offset-y="50" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
|
||||
<div class="item" data-offset-y="100" data-offset-x="0" data-expected-height="157" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat gap" style="height: auto; max-height: 90px; min-height: 130px;" data-expected-height="134" data-expected-width="29">
|
||||
<div class="item" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
|
||||
<div class="item" data-offset-y="50" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
|
||||
<div class="item" data-offset-y="100" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore">
|
||||
<div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="190" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore">
|
||||
<div class="item" style="grid-row: foo / autofoo" data-offset-y="10" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore">
|
||||
<div class="item" style="grid-row: bar / 5 autofoo" data-offset-y="50" data-offset-x="0" data-expected-height="297" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore gap">
|
||||
<div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore gap">
|
||||
<div class="item" style="grid-row: span 3 / 2 autofoo" data-offset-y="0" data-offset-x="0" data-expected-height="125" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore gap">
|
||||
<div class="item" style="grid-row: notPresent / 3 autofoo" data-offset-y="377" data-offset-x="0" data-expected-height="157" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter">
|
||||
<div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="185" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter">
|
||||
<div class="item" style="grid-row: first / last 2" data-offset-y="0" data-offset-x="0" data-expected-height="60" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter">
|
||||
<div class="item" style="grid-row: last 2 / foo" data-offset-y="60" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter gap">
|
||||
<div class="item" style="grid-row: 1 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter gap">
|
||||
<div class="item" style="grid-row: 3 / span 1 bar" data-offset-y="130" data-offset-x="0" data-expected-height="222" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter gap">
|
||||
<div class="item" style="grid-row: first / foo" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed">
|
||||
<div class="item" style="grid-row: 1 / span 8" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed">
|
||||
<div class="item" style="grid-row: a / autobar 2" data-offset-y="50" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed">
|
||||
<div class="item" style="grid-row: autofoo / end" data-offset-y="100" data-offset-x="0" data-expected-height="95" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed gap">
|
||||
<div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed gap">
|
||||
<div class="item" style="grid-row: autobar / -1" data-offset-y="175" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames">
|
||||
<div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="200" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames">
|
||||
<div class="item" style="grid-row: foo 3 / 4 bar" data-offset-y="160" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames">
|
||||
<div class="item" style="grid-row: -6 / span 2 start" data-offset-y="20" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames gap">
|
||||
<div class="item" style="grid-row: -4 / -2" data-offset-y="40" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames gap">
|
||||
<div class="item" style="grid-row: bar / foo 2" data-offset-y="160" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames gap">
|
||||
<div class="item" style="grid-row: foo / bar 2" data-offset-y="40" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleTracks">
|
||||
<div class="item" style="grid-row: a / 2 c" data-offset-y="20" data-offset-x="0" data-expected-height="84" data-expected-width="25"></div>
|
||||
<div class="item" style="grid-row: 3 / e; grid-column: 2;" data-offset-y="52" data-offset-x="25" data-expected-height="72" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleTracks gap">
|
||||
<div class="item" style="grid-row: a / c" data-offset-y="40" data-offset-x="0" data-expected-height="32" data-expected-width="25"></div>
|
||||
<div class="item" style="grid-row: 3 / last; grid-column: 2;" data-offset-y="92" data-offset-x="25" data-expected-height="115" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: auto-fit columns</title>
|
||||
<link rel="author" title="Sergio Villar" href="mailto: svillar@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-column">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-grid-column-gap">
|
||||
<link rel="help" href="https://crbug.com/619930">
|
||||
<link rel="help" href="https://crbug.com/589460">
|
||||
<link rel="help" href="https://crbug.com/645746">
|
||||
<meta name="assert" content="Check that auto-fit columns are properly computed in a grid container"/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
border: 2px solid magenta;
|
||||
width: 200px;
|
||||
position: relative;
|
||||
justify-content: start;
|
||||
grid-auto-columns: 157px;
|
||||
grid-auto-rows: 25px;
|
||||
}
|
||||
|
||||
.gridOnlyAutoRepeat { grid-template-columns: repeat(auto-fit, 30px [autobar]); }
|
||||
.gridAutoRepeatAndFixedBefore { grid-template-columns: 10px [foo] 20% [bar] repeat(auto-fit, [autofoo] 35px); }
|
||||
.gridAutoRepeatAndFixedAfter { grid-template-columns: repeat(auto-fit, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }
|
||||
.gridAutoRepeatAndFixed { grid-template-columns: [start] repeat(2, 50px [a]) [middle] repeat(auto-fit, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
|
||||
.gridMultipleNames { grid-template-columns: [start] 20px [foo] 50% repeat(auto-fit, [bar] 20px [start foo]) [foo] 10% [end bar]; }
|
||||
.gridMultipleTracks { grid-template-columns: [start] 20px repeat(auto-fit, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; }
|
||||
.gridMinMaxFixedFlex { grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); }
|
||||
|
||||
.item { background-color: cyan; }
|
||||
.item:nth-child(2n) { background-color: green; }
|
||||
|
||||
.gap { grid-column-gap: 20px; }
|
||||
|
||||
</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')">
|
||||
<div id="log"></div>
|
||||
|
||||
<p>This test checks that repeat(auto-fit, ) syntax works as expected.</p>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat">
|
||||
<div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat">
|
||||
<div class="item" style="grid-column: 1 / span 6 autobar" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat gap">
|
||||
<div class="item" style="grid-column: 1 / span 5" data-offset-x="0" data-offset-y="0" data-expected-width="357" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat gap">
|
||||
<div class="item" style="grid-column: autobar 2 / span 3" data-offset-x="0" data-offset-y="0" data-expected-width="257" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore">
|
||||
<div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore">
|
||||
<div class="item" style="grid-column: foo / autofoo" data-offset-x="10" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore">
|
||||
<div class="item" style="grid-column: bar / 5 autofoo" data-offset-x="50" data-offset-y="0" data-expected-width="297" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore gap">
|
||||
<div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore gap">
|
||||
<div class="item" style="grid-column: span 3 / 2 autofoo" data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore gap">
|
||||
<div class="item" style="grid-column: notPresent / 3 autofoo" data-offset-x="267" data-offset-y="0" data-expected-width="157" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter">
|
||||
<div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="185" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter">
|
||||
<div class="item" style="grid-column: first / last 2" data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter">
|
||||
<div class="item" style="grid-column: last 2 / foo" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter gap">
|
||||
<div class="item" style="grid-column: 1 / span 3" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter gap">
|
||||
<div class="item" style="grid-column: 3 / span 1 bar" data-offset-x="80" data-offset-y="0" data-expected-width="222" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter gap">
|
||||
<div class="item" style="grid-column: first / foo" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed">
|
||||
<div class="item" style="grid-column: 1 / span 8" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed">
|
||||
<div class="item" style="grid-column: a / autobar 2" data-offset-x="50" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed">
|
||||
<div class="item" style="grid-column: autofoo / end" data-offset-x="100" data-offset-y="0" data-expected-width="95" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed gap">
|
||||
<div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed gap">
|
||||
<div class="item" style="grid-column: autobar / -1" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames">
|
||||
<div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames">
|
||||
<div class="item" style="grid-column: foo 3 / 4 bar" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames">
|
||||
<div class="item" style="grid-column: -6 / span 2 start" data-offset-x="20" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames gap">
|
||||
<div class="item" style="grid-column: -4 / -2" data-offset-x="40" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames gap">
|
||||
<div class="item" style="grid-column: bar / foo 2" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames gap">
|
||||
<div class="item" style="grid-column: foo / bar 2" data-offset-x="40" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleTracks">
|
||||
<div class="item" style="grid-column: e / last;" data-offset-x="52" data-offset-y="0" data-expected-width="148" data-expected-height="25"></div>
|
||||
<div class="item" style="grid-column: start / b;" data-offset-x="0" data-offset-y="25" data-expected-width="52" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleTracks gap">
|
||||
<div class="item" style="grid-column: c / -1;" data-offset-x="40" data-offset-y="0" data-expected-width="160" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMinMaxFixedFlex gap">
|
||||
<div class="item" style="grid-column-start: 1" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMinMaxFixedFlex gap">
|
||||
<div class="item" style="grid-column-start: 1" data-offset-x="0" data-offset-y="0" data-expected-width="90" data-expected-height="25"></div>
|
||||
<div class="item" style="grid-column-start: 2" data-offset-x="110" data-offset-y="0" data-expected-width="90" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: auto-fit rows</title>
|
||||
<link rel="author" title="Sergio Villar" href="mailto: svillar@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-row">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-grid-row-gap">
|
||||
<link rel="help" href="https://crbug.com/619930">
|
||||
<link rel="help" href="https://crbug.com/589460">
|
||||
<meta name="assert" content="Check that auto-fit rows are properly computed in a grid container"/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
border: 2px solid magenta;
|
||||
height: 200px;
|
||||
width: 25px;
|
||||
align-content: start;
|
||||
grid-auto-rows: 157px;
|
||||
grid-auto-columns: 25px;
|
||||
|
||||
float: left;
|
||||
position: relative;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.gridOnlyAutoRepeat { grid-template-rows: repeat(auto-fit, 30px [autobar]); }
|
||||
.gridAutoRepeatAndFixedBefore { grid-template-rows: 10px [foo] 20% [bar] repeat(auto-fit, [autofoo] 35px); }
|
||||
.gridAutoRepeatAndFixedAfter { grid-template-rows: repeat(auto-fit, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }
|
||||
.gridAutoRepeatAndFixed { grid-template-rows: [start] repeat(2, 50px [a]) [middle] repeat(auto-fit, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
|
||||
.gridMultipleNames { grid-template-rows: [start] 20px [foo] 50% repeat(auto-fit, [bar] 20px [start foo]) [foo] 10% [end bar]; }
|
||||
.gridMultipleTracks { grid-template-rows: [start] 20px repeat(auto-fit, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; }
|
||||
|
||||
.item { background-color: cyan; }
|
||||
.item:nth-child(2n) { background-color: green; }
|
||||
|
||||
.gap { grid-row-gap: 20px; }
|
||||
|
||||
</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')">
|
||||
<div id="log"></div>
|
||||
|
||||
<p>This test checks that repeat(auto-fit, ) syntax works as expected.</p>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat">
|
||||
<div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat">
|
||||
<div class="item" style="grid-row: 1 / span 6 autobar" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat gap">
|
||||
<div class="item" style="grid-row: 1 / span 5" data-offset-y="0" data-offset-x="0" data-expected-height="357" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat gap">
|
||||
<div class="item" style="grid-row: autobar 2 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="257" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore">
|
||||
<div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="190" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore">
|
||||
<div class="item" style="grid-row: foo / autofoo" data-offset-y="10" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore">
|
||||
<div class="item" style="grid-row: bar / 5 autofoo" data-offset-y="50" data-offset-x="0" data-expected-height="297" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore gap">
|
||||
<div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore gap">
|
||||
<div class="item" style="grid-row: span 3 / 2 autofoo" data-offset-y="0" data-offset-x="0" data-expected-height="125" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore gap">
|
||||
<div class="item" style="grid-row: notPresent / 3 autofoo" data-offset-y="267" data-offset-x="0" data-expected-height="157" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter">
|
||||
<div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="185" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter">
|
||||
<div class="item" style="grid-row: first / last 2" data-offset-y="0" data-offset-x="0" data-expected-height="60" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter">
|
||||
<div class="item" style="grid-row: last 2 / foo" data-offset-y="0" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter gap">
|
||||
<div class="item" style="grid-row: 1 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter gap">
|
||||
<div class="item" style="grid-row: 3 / span 1 bar" data-offset-y="80" data-offset-x="0" data-expected-height="222" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter gap">
|
||||
<div class="item" style="grid-row: first / foo" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed">
|
||||
<div class="item" style="grid-row: 1 / span 8" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed">
|
||||
<div class="item" style="grid-row: a / autobar 2" data-offset-y="50" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed">
|
||||
<div class="item" style="grid-row: autofoo / end" data-offset-y="100" data-offset-x="0" data-expected-height="95" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed gap">
|
||||
<div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed gap">
|
||||
<div class="item" style="grid-row: autobar / -1" data-offset-y="140" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames">
|
||||
<div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="200" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames">
|
||||
<div class="item" style="grid-row: foo 3 / 4 bar" data-offset-y="120" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames">
|
||||
<div class="item" style="grid-row: -6 / span 2 start" data-offset-y="20" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames gap">
|
||||
<div class="item" style="grid-row: -4 / -2" data-offset-y="40" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames gap">
|
||||
<div class="item" style="grid-row: bar / foo 2" data-offset-y="160" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames gap">
|
||||
<div class="item" style="grid-row: foo / bar 2" data-offset-y="40" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleTracks">
|
||||
<div class="item" style="grid-row: e / last;" data-offset-y="52" data-offset-x="0" data-expected-height="148" data-expected-width="25"></div>
|
||||
<div class="item" style="grid-row: start / b;" data-offset-y="0" data-offset-x="0" data-expected-height="52" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleTracks gap">
|
||||
<div class="item" style="grid-row: c / -1;" data-offset-y="40" data-offset-x="0" data-expected-height="160" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: auto repeat computation for intrinsic sizes.</title>
|
||||
<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-notation"/>
|
||||
<meta name="assert" content="Checks that auto repeat tracks are properly recomputed and items are properly repositioned when grids have intrinsic inline sizes."/>
|
||||
<link rel="issue" href="https://crbug.com/621517"/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/>
|
||||
|
||||
<style>
|
||||
.grid {
|
||||
border: 2px solid black;
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: cyan;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.gridAutoFillFixed { grid-template-columns: repeat(auto-fill, 20px) minmax(min-content, 40px); }
|
||||
.gridAutoFillAuto { grid-template-columns: repeat(auto-fill, 10px) minmax(60px, auto); }
|
||||
.gridAutoFitFixed { grid-template-columns: repeat(auto-fit, 20px) minmax(min-content, 40px); }
|
||||
.gridAutoFitAuto { grid-template-columns: repeat(auto-fit, 10px) minmax(60px, auto); }
|
||||
|
||||
.paddingTop { padding-top: 10px; }
|
||||
|
||||
.abs {
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
</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')">
|
||||
|
||||
<div class="grid gridAutoFillFixed paddingTop max-content" data-expected-width="104" data-expected-height="34">
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoFillFixed paddingTop min-content" data-expected-width="104" data-expected-height="34">
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoFillAuto paddingTop max-content" data-expected-width="104" data-expected-height="34">
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoFillAuto paddingTop min-content" data-expected-width="74" data-expected-height="34">
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
|
||||
</div>
|
||||
|
||||
<!-- auto-fill -->
|
||||
|
||||
<div class="grid gridAutoFitFixed paddingTop max-content" data-expected-width="104" data-expected-height="34">
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoFitFixed paddingTop min-content" data-expected-width="104" data-expected-height="34">
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoFitAuto paddingTop max-content" data-expected-width="104" data-expected-height="34">
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoFitAuto paddingTop min-content" data-expected-width="74" data-expected-height="34">
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: auto-repeat tracks and intrinsic sizes.</title>
|
||||
<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-notation"/>
|
||||
<meta name="assert" content="Test ensure that grids properly recompute the number of auto repeat tracks when the min|max-content contributions of grid items changed."/>
|
||||
<link rel="issue" href="https://crbug.com/621517"/>
|
||||
<link rel="issue" href="https://crbug.com/633474"/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/>
|
||||
<style>
|
||||
.grid {
|
||||
border: 2px solid black;
|
||||
position: relative;
|
||||
min-width: 30px;
|
||||
|
||||
grid-auto-columns: 20px;
|
||||
|
||||
padding-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.abs { height: 5px; position: absolute; width: 100%; }
|
||||
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
function setGridTemplate(id, gridTemplateRows, gridTemplateColumns)
|
||||
{
|
||||
var gridElement = document.getElementById(id);
|
||||
gridElement.style.gridTemplateRows = gridTemplateRows;
|
||||
gridElement.style.gridTemplateColumns = gridTemplateColumns;
|
||||
}
|
||||
|
||||
function setItemSize(id, width, height)
|
||||
{
|
||||
var gridElement = document.getElementById(id);
|
||||
gridElement.style.width = width;
|
||||
gridElement.style.height = height;
|
||||
}
|
||||
|
||||
function testGridDefinitions(gridItemsData)
|
||||
{
|
||||
var length = gridItemsData.length;
|
||||
for (i = 0; i < length; ++i) {
|
||||
var item = document.getElementById(gridItemsData[i].id);
|
||||
item.setAttribute("data-expected-width", gridItemsData[i].width);
|
||||
item.setAttribute("data-expected-height", gridItemsData[i].height);
|
||||
item.setAttribute("data-offset-x", gridItemsData[i].x);
|
||||
item.setAttribute("data-offset-y", gridItemsData[i].y);
|
||||
}
|
||||
|
||||
checkLayout(".grid", false);
|
||||
}
|
||||
|
||||
function testChangingGridDefinitions()
|
||||
{
|
||||
setGridTemplate('grid1', 'none', 'repeat(auto-fill, 20px) minmax(min-content, 40px)');
|
||||
|
||||
setItemSize('item', '100px', '30px');
|
||||
testGridDefinitions([
|
||||
{ 'id': 'item', 'width': '100', 'height': '30', 'x': '0', 'y': '10' },
|
||||
{ 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
|
||||
{ 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
|
||||
{ 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' },
|
||||
{ 'id': 'a4', 'width': '40', 'height': '5', 'x': '60', 'y': '0' }
|
||||
]);
|
||||
|
||||
setItemSize('item', '80px', '30px');
|
||||
testGridDefinitions([
|
||||
{ 'id': 'item', 'width': '80', 'height': '30', 'x': '0', 'y': '10' },
|
||||
{ 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
|
||||
{ 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
|
||||
{ 'id': 'a3', 'width': '40', 'height': '5', 'x': '40', 'y': '0' },
|
||||
{ 'id': 'a4', 'width': '0', 'height': '5', 'x': '80', 'y': '0' }
|
||||
]);
|
||||
|
||||
setItemSize('item', '15px', '30px');
|
||||
testGridDefinitions([
|
||||
{ 'id': 'item', 'width': '15', 'height': '30', 'x': '0', 'y': '10' },
|
||||
{ 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
|
||||
{ 'id': 'a2', 'width': '40', 'height': '5', 'x': '20', 'y': '0' },
|
||||
{ 'id': 'a3', 'width': '0', 'height': '5', 'x': '60', 'y': '0' },
|
||||
{ 'id': 'a4', 'width': '60', 'height': '5', 'x': '0', 'y': '0' }
|
||||
]);
|
||||
|
||||
setItemSize('item', '120px', '30px');
|
||||
testGridDefinitions([
|
||||
{ 'id': 'item', 'width': '120', 'height': '30', 'x': '0', 'y': '10' },
|
||||
{ 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
|
||||
{ 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
|
||||
{ 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' },
|
||||
{ 'id': 'a4', 'width': '20', 'height': '5', 'x': '60', 'y': '0' }
|
||||
]);
|
||||
|
||||
var grid = document.getElementById('grid1');
|
||||
grid.className = grid.className.replace('max-content', 'min-content');
|
||||
|
||||
setItemSize('item', '100px', '30px');
|
||||
testGridDefinitions([
|
||||
{ 'id': 'item', 'width': '100', 'height': '30', 'x': '0', 'y': '10' },
|
||||
{ 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
|
||||
{ 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
|
||||
{ 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' },
|
||||
{ 'id': 'a4', 'width': '40', 'height': '5', 'x': '60', 'y': '0' }
|
||||
]);
|
||||
|
||||
setItemSize('item', '80px', '30px');
|
||||
testGridDefinitions([
|
||||
{ 'id': 'item', 'width': '80', 'height': '30', 'x': '0', 'y': '10' },
|
||||
{ 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
|
||||
{ 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
|
||||
{ 'id': 'a3', 'width': '40', 'height': '5', 'x': '40', 'y': '0' },
|
||||
{ 'id': 'a4', 'width': '0', 'height': '5', 'x': '80', 'y': '0' }
|
||||
]);
|
||||
|
||||
setItemSize('item', '15px', '30px');
|
||||
testGridDefinitions([
|
||||
{ 'id': 'item', 'width': '15', 'height': '30', 'x': '0', 'y': '10' },
|
||||
{ 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
|
||||
{ 'id': 'a2', 'width': '10', 'height': '5', 'x': '20', 'y': '0' },
|
||||
{ 'id': 'a3', 'width': '0', 'height': '5', 'x': '30', 'y': '0' },
|
||||
{ 'id': 'a4', 'width': '30', 'height': '5', 'x': '0', 'y': '0' }
|
||||
]);
|
||||
|
||||
setItemSize('item', '120px', '30px');
|
||||
testGridDefinitions([
|
||||
{ 'id': 'item', 'width': '120', 'height': '30', 'x': '0', 'y': '10' },
|
||||
{ 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
|
||||
{ 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
|
||||
{ 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' },
|
||||
{ 'id': 'a4', 'width': '20', 'height': '5', 'x': '60', 'y': '0' }
|
||||
]);
|
||||
|
||||
done();
|
||||
}
|
||||
|
||||
window.addEventListener("load", testChangingGridDefinitions, false);
|
||||
</script>
|
||||
|
||||
<div>This test checks that changing the min|max-content contributions of grid items properly recomputes both track sizes and grid positions in grids with auto repeat tracks.</div>
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="grid1" class="grid max-content">
|
||||
<div id="item" style="grid-column: 1 / -1; background: cyan;"></div>
|
||||
<div id="a1" class="abs" style="grid-column: 1 / 2; background: purple;"></div>
|
||||
<div id="a2" class="abs" style="grid-column: 2 / 3; background: orange;"></div>
|
||||
<div id="a3" class="abs" style="grid-column: 3 / 4; background: yellow;"></div>
|
||||
<div id="a4" class="abs" style="grid-column: 4 / 5; background: magenta;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,378 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid Layout Test: content distribution alignment and self alignment.</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-justify-content">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that content distribution alignment works fine in combination with self alignment and items in just one cell." />
|
||||
|
||||
<style>
|
||||
.grid {
|
||||
grid-template-columns: 200px 100px;
|
||||
grid-template-rows: 100px 50px;
|
||||
width: 500px;
|
||||
height: 350px;
|
||||
position: relative;
|
||||
font: 10px/1 Ahem;
|
||||
}
|
||||
|
||||
.gridGaps {
|
||||
grid-gap: 10px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
|
||||
<div class="grid contentSpaceBetween itemsCenter">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
|
||||
<div class="grid contentSpaceBetween itemsEnd">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: LTR | distribution: 'space-around' | self-alignment: center</p>
|
||||
<div class="grid contentSpaceAround itemsCenter">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="145" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="395" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="145" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="395" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
|
||||
<div class="grid contentSpaceAround itemsEnd">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="240" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="440" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="440" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p>
|
||||
<div class="grid contentSpaceEvenly itemsCenter">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="162" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="378" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="162" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="378" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
|
||||
<div class="grid contentSpaceEvenly itemsEnd">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="257" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="423" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="257" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="423" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p>
|
||||
<div class="grid gridGaps contentSpaceBetween itemsCenter">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p>
|
||||
<div class="grid gridGaps contentSpaceBetween itemsEnd">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p>
|
||||
<div class="grid gridGaps contentSpaceAround itemsCenter">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="140" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="400" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="140" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="400" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p>
|
||||
<div class="grid gridGaps contentSpaceAround itemsEnd">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="235" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="235" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p>
|
||||
<div class="grid gridGaps contentSpaceEvenly itemsCenter">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="155" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="385" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="155" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="385" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p>
|
||||
<div class="grid gridGaps contentSpaceEvenly itemsEnd">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="250" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="430" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="250" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="430" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<!-- RTL direction. -->
|
||||
|
||||
<p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
|
||||
<div class="grid directionRTL contentSpaceBetween itemsCenter">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
|
||||
<div class="grid directionRTL contentSpaceBetween itemsEnd">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: RTL | distribution: 'space-around' | self-alignment: center</p>
|
||||
<div class="grid directionRTL contentSpaceAround itemsCenter">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="345" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="95" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="345" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="95" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
|
||||
<div class="grid directionRTL contentSpaceAround itemsEnd">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="250" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="250" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p>
|
||||
<div class="grid directionRTL contentSpaceEvenly itemsCenter">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="328" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="112" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="328" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="112" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
|
||||
<div class="grid directionRTL contentSpaceEvenly itemsEnd">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="233" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="67" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="233" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="67" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p>
|
||||
<div class="grid directionRTL gridGaps contentSpaceBetween itemsCenter">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p>
|
||||
<div class="grid directionRTL gridGaps contentSpaceBetween itemsEnd">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p>
|
||||
<div class="grid directionRTL gridGaps contentSpaceAround itemsCenter">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="350" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="90" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="350" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="90" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p>
|
||||
<div class="grid directionRTL gridGaps contentSpaceAround itemsEnd">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="255" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="255" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p>
|
||||
<div class="grid directionRTL gridGaps contentSpaceEvenly itemsCenter">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="335" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="105" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="335" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="105" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p>
|
||||
<div class="grid directionRTL gridGaps contentSpaceEvenly itemsEnd">
|
||||
<!-- Dummy DIVs to help checking the result visually. -->
|
||||
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
|
||||
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
|
||||
|
||||
<div class="firstRowFirstColumn" data-offset-x="240" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="60" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="secondRowSecondColumn" data-offset-x="60" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>CSS Grid Layout Test: min and max size when computing the flex fraction</title>
|
||||
<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-flex-tracks"/>
|
||||
<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=660690"/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
|
||||
<meta name="assert" content="This test ensures that minimum and maximum sizes are used to compute the flex fraction for indefinite free spaces."/>
|
||||
<style>
|
||||
.grid {
|
||||
margin: 3px;
|
||||
grid: 50px / minmax(10px, 1fr) minmax(10px, 4fr);
|
||||
grid-column-gap: 33px;
|
||||
border: 5px dashed;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.float { float: left; }
|
||||
|
||||
.item:nth-child(1) { background-color: purple; }
|
||||
.item:nth-child(2) { background-color: blue; }
|
||||
</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 PASS if all the grids in the same row look the same.</p>
|
||||
|
||||
<div class="grid float" style="max-width: 70px" data-expected-height="64" data-expected-width="84">
|
||||
<div class="item" data-expected-height="50" data-expected-width="10"></div>
|
||||
<div class="item" data-expected-height="50" data-expected-width="27"></div>
|
||||
</div>
|
||||
<div class="grid float" style="min-width: 70px; max-width: 60px" data-expected-height="64" data-expected-width="84">
|
||||
<div class="item" data-expected-height="50" data-expected-width="10"></div>
|
||||
<div class="item" data-expected-height="50" data-expected-width="27"></div>
|
||||
</div>
|
||||
<div class="grid float" style="width: 70px" data-expected-height="64" data-expected-width="84">
|
||||
<div class="item" data-expected-height="50" data-expected-width="10"></div>
|
||||
<div class="item" data-expected-height="50" data-expected-width="27"></div>
|
||||
</div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid float" style="min-width: 108px" data-expected-height="64" data-expected-width="122">
|
||||
<div class="item" data-expected-height="50" data-expected-width="15"></div>
|
||||
<div class="item" data-expected-height="50" data-expected-width="60"></div>
|
||||
</div>
|
||||
<div class="grid float" style="min-width: 108px; max-width: 60px" data-expected-height="64" data-expected-width="122">
|
||||
<div class="item" data-expected-height="50" data-expected-width="15"></div>
|
||||
<div class="item" data-expected-height="50" data-expected-width="60"></div>
|
||||
</div>
|
||||
<div class="grid float" style="width: 108px" data-expected-height="64" data-expected-width="122">
|
||||
<div class="item" data-expected-height="50" data-expected-width="15"></div>
|
||||
<div class="item" data-expected-height="50" data-expected-width="60"></div>
|
||||
</div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid float min-width-max-content" data-expected-height="64" data-expected-width="97">
|
||||
<div class="item" data-expected-height="50" data-expected-width="10"></div>
|
||||
<div class="item" data-expected-height="50" data-expected-width="40"></div>
|
||||
</div>
|
||||
<div class="grid float min-width-max-content max-width-min-content" data-expected-height="64" data-expected-width="97">
|
||||
<div class="item" data-expected-height="50" data-expected-width="10"></div>
|
||||
<div class="item" data-expected-height="50" data-expected-width="40"></div>
|
||||
</div>
|
||||
<div class="grid float max-content" data-expected-height="64" data-expected-width="97">
|
||||
<div class="item" data-expected-height="50" data-expected-width="10"></div>
|
||||
<div class="item" data-expected-height="50" data-expected-width="40"></div>
|
||||
</div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="float min-content">
|
||||
<div class="grid min-width-max-content" data-expected-height="64" data-expected-width="97">
|
||||
<div class="item" data-expected-height="50" data-expected-width="10"></div>
|
||||
<div class="item" data-expected-height="50" data-expected-width="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float max-content">
|
||||
<div class="grid min-width-max-content max-width-min-content" data-expected-height="64" data-expected-width="97">
|
||||
<div class="item" data-expected-height="50" data-expected-width="10"></div>
|
||||
<div class="item" data-expected-height="50" data-expected-width="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float fit-content">
|
||||
<div class="grid max-content" data-expected-height="64" data-expected-width="97">
|
||||
<div class="item" data-expected-height="50" data-expected-width="10"></div>
|
||||
<div class="item" data-expected-height="50" data-expected-width="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>CSS Grid Layout Test: min and max height when computing the flex row</title>
|
||||
<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-flex-tracks"/>
|
||||
<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=660690"/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<link href="/css/support/height-keyword-classes.css" rel="stylesheet">
|
||||
<meta name="assert" content="This test ensures that minimum and maximum heights are used to compute the flex fraction for grid rows."/>
|
||||
<style>
|
||||
.grid {
|
||||
margin: 3px;
|
||||
grid: minmax(10px, 1fr) minmax(10px, 4fr) / 50px;
|
||||
grid-row-gap: 33px;
|
||||
border: 5px dashed;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.float { float: left; }
|
||||
|
||||
.item:nth-child(1) { background-color: purple; }
|
||||
.item:nth-child(2) { background-color: blue; }
|
||||
</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')">
|
||||
<div id="log"></div>
|
||||
|
||||
<p>This test PASS if all the grids in the same row look the same.</p>
|
||||
|
||||
<div class="grid float" style="max-height: 70px" data-expected-width="64" data-expected-height="84">
|
||||
<div class="item" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="item" data-expected-width="50" data-expected-height="27"></div>
|
||||
</div>
|
||||
<div class="grid float" style="min-height: 70px; max-height: 60px" data-expected-width="64" data-expected-height="84">
|
||||
<div class="item" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="item" data-expected-width="50" data-expected-height="27"></div>
|
||||
</div>
|
||||
<div class="grid float" style="height: 70px" data-expected-width="64" data-expected-height="84">
|
||||
<div class="item" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="item" data-expected-width="50" data-expected-height="27"></div>
|
||||
</div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid float" style="min-height: 108px" data-expected-width="64" data-expected-height="122">
|
||||
<div class="item" data-expected-width="50" data-expected-height="15"></div>
|
||||
<div class="item" data-expected-width="50" data-expected-height="60"></div>
|
||||
</div>
|
||||
<div class="grid float" style="min-height: 108px; max-height: 60px" data-expected-width="64" data-expected-height="122">
|
||||
<div class="item" data-expected-width="50" data-expected-height="15"></div>
|
||||
<div class="item" data-expected-width="50" data-expected-height="60"></div>
|
||||
</div>
|
||||
<div class="grid float" style="height: 108px" data-expected-width="64" data-expected-height="122">
|
||||
<div class="item" data-expected-width="50" data-expected-height="15"></div>
|
||||
<div class="item" data-expected-width="50" data-expected-height="60"></div>
|
||||
</div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="grid float min-height-max-content" data-expected-width="64" data-expected-height="97">
|
||||
<div class="item" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="item" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
<div class="grid float min-height-max-content max-height-min-content" data-expected-width="64" data-expected-height="97">
|
||||
<div class="item" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="item" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
<div class="grid float max-content" data-expected-width="64" data-expected-height="97">
|
||||
<div class="item" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="item" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="float min-content">
|
||||
<div class="grid min-height-max-content" data-expected-width="64" data-expected-height="97">
|
||||
<div class="item" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="item" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float max-content">
|
||||
<div class="grid min-height-max-content max-height-min-content" data-expected-width="64" data-expected-height="97">
|
||||
<div class="item" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="item" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float fit-content">
|
||||
<div class="grid max-content" data-expected-width="64" data-expected-height="97">
|
||||
<div class="item" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="item" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: indefinite grid container and percentage columns.</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-grid-template-columns-length-percentage"/>
|
||||
<meta name="assert" content="Checks that percentage columns are only indefinite during intrinsic size computation. Aftewards, they are properly resolved against the grid container intrinsic sizes."/>
|
||||
<link rel="issue" href="https://crbug.com/616716"/>
|
||||
<link rel="stylesheet" href="/css/support/grid.css"/>
|
||||
<link rel="stylesheet" href="/css/support/width-keyword-classes.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
|
||||
<style>
|
||||
.wrapper {
|
||||
position: relative;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.grid {
|
||||
font: 10px/1 Ahem;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.abspos {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.fixedSize {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.oneColumn100 {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
.oneColumn50 {
|
||||
grid-template-columns: 50%;
|
||||
}
|
||||
|
||||
.twoColumns {
|
||||
grid-template-columns: 50% 100px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div id="log"></div>
|
||||
<div class="wrapper">
|
||||
<div class="grid float oneColumn100" data-expected-width="40" data-expected-height="10">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
|
||||
XX X
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid abspos oneColumn100" data-expected-width="40" data-expected-height="10">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
|
||||
XX X
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid max-content oneColumn100" data-expected-width="40" data-expected-height="10">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
|
||||
XX X
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid fit-content oneColumn100" data-expected-width="40" data-expected-height="10">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
|
||||
XX X
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid min-content oneColumn100" data-expected-width="20" data-expected-height="20">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
|
||||
XX X
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid float oneColumn50" data-expected-width="40" data-expected-height="20">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
|
||||
XX X
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid abspos oneColumn50" data-expected-width="40" data-expected-height="20">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
|
||||
XX X
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid max-content oneColumn50" data-expected-width="40" data-expected-height="20">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
|
||||
XX X
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid fit-content oneColumn50" data-expected-width="40" data-expected-height="20">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
|
||||
XX X
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid min-content oneColumn50" data-expected-width="20" data-expected-height="20">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20">
|
||||
XX X
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid float twoColumns" data-expected-width="140" data-expected-height="10">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
|
||||
XX X
|
||||
</div>
|
||||
<div class="firstRowSecondColumn"
|
||||
data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid abspos twoColumns" data-expected-width="140" data-expected-height="10">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
|
||||
XX X
|
||||
</div>
|
||||
<div class="firstRowSecondColumn"
|
||||
data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid max-content twoColumns" data-expected-width="140" data-expected-height="10">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
|
||||
XX X
|
||||
</div>
|
||||
<div class="firstRowSecondColumn"
|
||||
data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid fit-content twoColumns" data-expected-width="140" data-expected-height="10">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
|
||||
XX X
|
||||
</div>
|
||||
<div class="firstRowSecondColumn"
|
||||
data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid min-content twoColumns" data-expected-width="120" data-expected-height="10">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10">
|
||||
XX X
|
||||
</div>
|
||||
<div class="firstRowSecondColumn"
|
||||
data-offset-x="60" data-offset-y="0" data-expected-width="100" data-expected-height="10">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid float twoColumns" data-expected-width="100" data-expected-height="10">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
|
||||
</div>
|
||||
<div class="firstRowSecondColumn"
|
||||
data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
|
||||
XX X
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid abspos twoColumns" data-expected-width="100" data-expected-height="10">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
|
||||
</div>
|
||||
<div class="firstRowSecondColumn"
|
||||
data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
|
||||
XX X
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid max-content twoColumns" data-expected-width="100" data-expected-height="10">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
|
||||
</div>
|
||||
<div class="firstRowSecondColumn"
|
||||
data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
|
||||
XX X
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid min-content twoColumns" data-expected-width="100" data-expected-height="10">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
|
||||
</div>
|
||||
<div class="firstRowSecondColumn"
|
||||
data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
|
||||
XX X
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid fit-content twoColumns" data-expected-width="100" data-expected-height="10">
|
||||
<div class="firstRowFirstColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
|
||||
</div>
|
||||
<div class="firstRowSecondColumn"
|
||||
data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
|
||||
XX X
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: 'auto' sizes with item's margins with vertical-lr</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=357419">
|
||||
<meta name="assert" content="Check that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins when using vertical-lr writing mode."/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
.grid {
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
.gridItem {
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.marginTop {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.marginBottom {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.borderTop {
|
||||
border-top: 5px solid;
|
||||
}
|
||||
|
||||
.borderBottom {
|
||||
border-bottom: 5px solid;
|
||||
}
|
||||
|
||||
.paddingTop {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.paddingBottom {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
</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')">
|
||||
<div>
|
||||
<div class="grid fit-content verticalLR" data-expected-width="40" data-expected-height="120">
|
||||
<div class="gridItem marginTop firstRowFirstColumn"></div>
|
||||
<div class="gridItem marginBottom firstRowSecondColumn"></div>
|
||||
<div class="gridItem secondRowFirstColumn"></div>
|
||||
<div class="gridItem secondRowSecondColumn"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="grid fit-content verticalLR" data-expected-width="40" data-expected-height="120">
|
||||
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
|
||||
<div class="gridItem borderTop borderBottom firstRowSecondColumn"></div>
|
||||
<div class="gridItem secondRowFirstColumn"></div>
|
||||
<div class="gridItem secondRowSecondColumn"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="grid fit-content verticalLR" data-expected-width="40" data-expected-height="120">
|
||||
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
|
||||
<div class="gridItem borderTop borderBottom firstRowSecondColumn"></div>
|
||||
<div class="gridItem secondRowFirstColumn"></div>
|
||||
<div class="gridItem secondRowSecondColumn"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="grid fit-content verticalLR" data-expected-width="40" data-expected-height="120">
|
||||
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
|
||||
<div class="gridItem paddingBottom firstRowSecondColumn"></div>
|
||||
<div class="gridItem secondRowFirstColumn"></div>
|
||||
<div class="gridItem secondRowSecondColumn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: 'auto' sizes with item's margins with vertical-rl</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=357419">
|
||||
<meta name="assert" content="Check that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins when using vertical-rl writing mode."/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
.grid {
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
.gridItem {
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.marginTop {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.marginBottom {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.borderTop {
|
||||
border-top: 5px solid;
|
||||
}
|
||||
|
||||
.borderBottom {
|
||||
border-bottom: 5px solid;
|
||||
}
|
||||
|
||||
.paddingTop {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.paddingBottom {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
</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')">
|
||||
<div style="position: relative">
|
||||
<div class="grid fit-content verticalRL" data-expected-width="40" data-expected-height="120">
|
||||
<div class="gridItem marginTop firstRowFirstColumn"></div>
|
||||
<div class="gridItem marginBottom firstRowSecondColumn"></div>
|
||||
<div class="gridItem secondRowFirstColumn"></div>
|
||||
<div class="gridItem secondRowSecondColumn"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<div class="grid fit-content verticalRL" data-expected-width="40" data-expected-height="120">
|
||||
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
|
||||
<div class="gridItem borderTop borderBottom firstRowSecondColumn"></div>
|
||||
<div class="gridItem secondRowFirstColumn"></div>
|
||||
<div class="gridItem secondRowSecondColumn"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<div class="grid fit-content verticalRL" data-expected-width="40" data-expected-height="120">
|
||||
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
|
||||
<div class="gridItem borderTop borderBottom firstRowSecondColumn"></div>
|
||||
<div class="gridItem secondRowFirstColumn"></div>
|
||||
<div class="gridItem secondRowSecondColumn"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<div class="grid fit-content verticalRL" data-expected-width="40" data-expected-height="120">
|
||||
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
|
||||
<div class="gridItem paddingBottom firstRowSecondColumn"></div>
|
||||
<div class="gridItem secondRowFirstColumn"></div>
|
||||
<div class="gridItem secondRowSecondColumn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: auto-placement with 'grid-auto-flow: column'</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-flow">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-placement-algo">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=384099">
|
||||
<meta name="assert" content="Check that the auto-placement algorithm is sparse by default.">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
|
||||
<style>
|
||||
.grid {
|
||||
grid-template-columns: 50px 100px 150px 200px;
|
||||
grid-template-rows: 50px 100px 150px 200px;
|
||||
}
|
||||
|
||||
.unconstrainedContainer {
|
||||
/* For accurate x / y offset. */
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="unconstrainedContainer">
|
||||
<div class="grid">
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="150" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="50" data-offset-y="50" data-expected-width="250" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unconstrainedContainer">
|
||||
<div class="grid">
|
||||
<div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="150" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning3" data-offset-x="50" data-offset-y="150" data-expected-width="450" data-expected-height="350"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="300" data-expected-width="50" data-expected-height="200"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unconstrainedContainer">
|
||||
<div class="grid">
|
||||
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unconstrainedContainer">
|
||||
<div class="grid">
|
||||
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unconstrainedContainer">
|
||||
<div class="grid gridAutoFlowColumnSparse">
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="350"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="250"></div>
|
||||
<div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="150"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unconstrainedContainer">
|
||||
<div class="grid gridAutoFlowColumnSparse">
|
||||
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="350"></div>
|
||||
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="300" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowSpanning3AutoColumnSpanning2" data-offset-x="150" data-offset-y="50" data-expected-width="350" data-expected-height="450"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unconstrainedContainer">
|
||||
<div class="grid gridAutoFlowColumnSparse">
|
||||
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unconstrainedContainer">
|
||||
<div class="grid gridAutoFlowColumnSparse">
|
||||
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid: Grid tracks changes recomputed child positions.</title>
|
||||
<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#placement"/>
|
||||
<meta name="assert" content="Checks that grid-template-{rows|columns} dynamic updates recomputes the positions of automatically placed grid items."/>
|
||||
<link rel="issue" href="https://crbug.com/248151"/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
|
||||
<style>
|
||||
.grid {
|
||||
grid-auto-flow: row dense;
|
||||
grid-auto-rows: 5px;
|
||||
grid-auto-columns: 5px;
|
||||
}
|
||||
#firstGridItem {
|
||||
grid-row: auto;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
#secondGridItem {
|
||||
grid-row: 1;
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
#thirdGridItem {
|
||||
grid-row: auto;
|
||||
grid-column: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
function testGridDefinitions(gridTemplateRows, gridTemplateColumns, gridTemplateAreas, firstGridItemData, secondGridItemData, thirdGridItemData)
|
||||
{
|
||||
var gridElement = document.getElementsByClassName("grid")[0];
|
||||
gridElement.style.gridTemplateRows = gridTemplateRows;
|
||||
gridElement.style.gridTemplateColumns = gridTemplateColumns;
|
||||
gridElement.style.gridTemplateAreas = gridTemplateAreas;
|
||||
|
||||
var firstGridItem = document.getElementById("firstGridItem");
|
||||
firstGridItem.setAttribute("data-expected-width", firstGridItemData.width);
|
||||
firstGridItem.setAttribute("data-expected-height", firstGridItemData.height);
|
||||
firstGridItem.setAttribute("data-offset-x", firstGridItemData.x);
|
||||
firstGridItem.setAttribute("data-offset-y", firstGridItemData.y);
|
||||
|
||||
var secondGridItem = document.getElementById("secondGridItem");
|
||||
secondGridItem.setAttribute("data-expected-width", secondGridItemData.width);
|
||||
secondGridItem.setAttribute("data-expected-height", secondGridItemData.height);
|
||||
secondGridItem.setAttribute("data-offset-x", secondGridItemData.x);
|
||||
secondGridItem.setAttribute("data-offset-y", secondGridItemData.y);
|
||||
|
||||
var thirdGridItem = document.getElementById("thirdGridItem");
|
||||
thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);
|
||||
thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height);
|
||||
thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);
|
||||
thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);
|
||||
|
||||
checkLayout(".grid", false);
|
||||
}
|
||||
|
||||
function testChangingGridDefinitions()
|
||||
{
|
||||
testGridDefinitions('10px 20px', '10px', '', { 'width': '10', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '10', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '10', 'height': '5', 'x': '0', 'y': '30' });
|
||||
testGridDefinitions('10px', '10px', '"a"', { 'width': '10', 'height': '5', 'x': '0', 'y': '10' }, { 'width': '10', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '10', 'height': '5', 'x': '0', 'y': '15' });
|
||||
testGridDefinitions('10px', '10px', '"a ."', { 'width': '10', 'height': '5', 'x': '0', 'y': '10' }, { 'width': '10', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '5', 'height': '10', 'x': '10', 'y': '0' });
|
||||
testGridDefinitions('50px', '30px 40px', '', { 'width': '30', 'height': '5', 'x': '0', 'y': '50' }, { 'width': '30', 'height': '50', 'x': '0', 'y': '0' }, { 'width': '40', 'height': '50', 'x': '30', 'y': '0' });
|
||||
testGridDefinitions('50px', '60px', '', { 'width': '60', 'height': '5', 'x': '0', 'y': '50' }, { 'width': '60', 'height': '50', 'x': '0', 'y': '0' }, { 'width': '60', 'height': '5', 'x': '0', 'y': '55' });
|
||||
testGridDefinitions('50px 100px 150px', '60px', '', { 'width': '60', 'height': '100', 'x': '0', 'y': '50' }, { 'width': '60', 'height': '50', 'x': '0', 'y': '0' }, { 'width': '60', 'height': '150', 'x': '0', 'y': '150' });
|
||||
|
||||
done();
|
||||
}
|
||||
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { testChangingGridDefinitions(); })">
|
||||
<div style="position: relative">
|
||||
<div class="grid">
|
||||
<div class="sizedToGridArea" id="firstGridItem"></div>
|
||||
<div class="sizedToGridArea" id="secondGridItem"></div>
|
||||
<div class="sizedToGridArea" id="thirdGridItem"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid: Change named grid lines.</title>
|
||||
<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#placement"/>
|
||||
<meta name="assert" content="Checks that updating the named grid lines definitions in grid-template-{rows|columns} recomputes the positions of automatically placed grid items."/>
|
||||
<link rel="issue" href="https://crbug.com/248151"/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<link href="/css/support/alignment.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
|
||||
<style>
|
||||
.grid {
|
||||
grid-auto-flow: row dense;
|
||||
}
|
||||
#firstGridItem {
|
||||
grid-row: auto;
|
||||
grid-column: column;
|
||||
}
|
||||
|
||||
#secondGridItem {
|
||||
grid-row: row;
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
#thirdGridItem {
|
||||
grid-row: auto;
|
||||
grid-column: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
function testGridDefinitions(gridTemplateRows, gridTemplateColumns, firstGridItemData, secondGridItemData, thirdGridItemData)
|
||||
{
|
||||
var gridElement = document.getElementsByClassName("grid")[0];
|
||||
gridElement.style.gridTemplateRows = gridTemplateRows;
|
||||
gridElement.style.gridTemplateColumns = gridTemplateColumns;
|
||||
|
||||
var firstGridItem = document.getElementById("firstGridItem");
|
||||
firstGridItem.setAttribute("data-expected-width", firstGridItemData.width);
|
||||
firstGridItem.setAttribute("data-expected-height", firstGridItemData.height);
|
||||
firstGridItem.setAttribute("data-offset-x", firstGridItemData.x);
|
||||
firstGridItem.setAttribute("data-offset-y", firstGridItemData.y);
|
||||
|
||||
var secondGridItem = document.getElementById("secondGridItem");
|
||||
secondGridItem.setAttribute("data-expected-width", secondGridItemData.width);
|
||||
secondGridItem.setAttribute("data-expected-height", secondGridItemData.height);
|
||||
secondGridItem.setAttribute("data-offset-x", secondGridItemData.x);
|
||||
secondGridItem.setAttribute("data-offset-y", secondGridItemData.y);
|
||||
|
||||
var thirdGridItem = document.getElementById("thirdGridItem");
|
||||
thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);
|
||||
thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height);
|
||||
thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);
|
||||
thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);
|
||||
|
||||
checkLayout(".grid", false);
|
||||
}
|
||||
|
||||
function testChangingGridDefinitions()
|
||||
{
|
||||
testGridDefinitions('10px [row] 20px', '30px [column]', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
|
||||
testGridDefinitions('10px [row] 20px', '30px', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
|
||||
testGridDefinitions('10px 20px [row]', '30px', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
|
||||
testGridDefinitions('10px 20px [row]', '30px [column]', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
|
||||
done();
|
||||
}
|
||||
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { testChangingGridDefinitions(); })">
|
||||
<div style="position: relative">
|
||||
<div class="grid justifyContentStart">
|
||||
<div class="sizedToGridArea" id="firstGridItem"></div>
|
||||
<div class="sizedToGridArea" id="secondGridItem"></div>
|
||||
<div class="sizedToGridArea" id="thirdGridItem"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.wrapper {
|
||||
width: 200px;
|
||||
border: 5px solid;
|
||||
}
|
||||
|
||||
.wrapper > div {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.magenta {
|
||||
background: magenta;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background: cyan;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if you see a 200x200 box with top half cyan and bottom half magenta.</p>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="cyan"></div>
|
||||
<div class="magenta"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Masking: Consecutive clip-paths don't affect each other.</title>
|
||||
<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com">
|
||||
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path">
|
||||
<link rel="issue" href="https://crbug.com/391291">
|
||||
<link rel="match" href="reference/clip-path-reference-restore-ref.html">
|
||||
<meta name="assert" content="Check that consecutive clip-paths don't affect each other"/>
|
||||
<style>
|
||||
.error {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
}
|
||||
.test {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
clip-path: url(#c);
|
||||
}
|
||||
</style>
|
||||
<div class="error"></div>
|
||||
<div class="test"></div>
|
||||
<div class="test"></div>
|
||||
<svg>
|
||||
<defs>
|
||||
<clipPath id="c" clipPathUnits="objectBoundingBox">
|
||||
<rect width="0.5" height="1"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>CSS Masking: Mutating a <clipPath>s 'transform' updates the clip path</title>
|
||||
<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com">
|
||||
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"">
|
||||
<link rel="help" href="https://crbug.com/881700">
|
||||
<link rel="match" href="reference/clip-path-transform-mutated-002-ref.html">
|
||||
<meta name="assert" content="Check that clipPath's clients should be notified when the 'transform' presentation attribute (or CSS property) was mutated on a <clipPath>."/>
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/rendering-utils.js"></script>
|
||||
|
||||
<style>
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
clip-path: url(#clip);
|
||||
}
|
||||
</style>
|
||||
<div id="target"></div>
|
||||
<svg>
|
||||
<clipPath id="clip">
|
||||
<rect width="1" height="1"/>
|
||||
</clipPath>
|
||||
</svg>
|
||||
<script>
|
||||
waitForAtLeastOneFrame().then(function() {
|
||||
clip.setAttribute('transform', 'scale(100 100)');
|
||||
takeScreenshot();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<!DOCTYPE html>
|
||||
<div style="width: 100px; height: 100px; background-color: green;"></div>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<!DOCTYPE html>
|
||||
<div style="width: 100px; height: 100px; background-color: green"></div>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3751">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
CSS.registerProperty({
|
||||
name: '--length',
|
||||
syntax: '<length>',
|
||||
initialValue: '0px',
|
||||
inherits: false
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
@keyframes font_size_animation {
|
||||
from {
|
||||
font-size: 10px;
|
||||
width: 10em;
|
||||
--length: 10em;
|
||||
}
|
||||
to {
|
||||
font-size: 20px;
|
||||
width: 20em;
|
||||
--length: 20em;
|
||||
}
|
||||
}
|
||||
#target1 {
|
||||
font-size: 1px;
|
||||
animation: font_size_animation 10s -5s linear paused;
|
||||
}
|
||||
</style>
|
||||
<div id=target1></div>
|
||||
<script>
|
||||
test(function() {
|
||||
// At the time of writing, the correct (absolute) answer is not
|
||||
// yet defined. However, whatever the correct answer is, there should
|
||||
// be no difference in 'width' and a custom property registered with
|
||||
// "<length>".
|
||||
//
|
||||
// See https://github.com/w3c/csswg-drafts/issues/3751
|
||||
assert_equals(getComputedStyle(target1).getPropertyValue('width'),
|
||||
getComputedStyle(target1).getPropertyValue('--length'));
|
||||
}, 'Animating font-size handled identically for standard and custom properties');
|
||||
</script>
|
||||
|
|
@ -6,7 +6,18 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
|
||||
<link rel="match" href="reference/hyphens-auto-inline-010-ref.html">
|
||||
<link rel="match" href="reference/hyphens-auto-inline-010M-ref.html">
|
||||
<link rel="match" href="reference/hyphens-auto-inline-010H-ref.html">
|
||||
|
||||
<!--
|
||||
User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010>
|
||||
when the font has the glyph, or
|
||||
may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d>
|
||||
otherwise. Some fonts will display slightly different glyphs for
|
||||
these code points. Therefore these 2 reference files.
|
||||
The M-ref.html reference file means the hyphen-Minus character U+002D.
|
||||
The H-ref.html reference file means the Hyphen character U+2010.
|
||||
-->
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta content="When 'hyphens' is set to 'auto' and applied to an inline element and when 'lang' attribute is also set to a valid value, then words may be broken at hyphenation opportunities determined automatically by an hyphenation resource appropriate to the language of the text involved.">
|
||||
|
|
@ -17,25 +28,25 @@
|
|||
border: black solid 2px;
|
||||
font-family: monospace;
|
||||
font-size: 32px;
|
||||
margin-bottom: 0.25em;
|
||||
width: 6ch;
|
||||
}
|
||||
|
||||
span#test
|
||||
span
|
||||
{
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
div#reference
|
||||
{
|
||||
hyphens: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body lang="en">
|
||||
|
||||
<p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
|
||||
<div>There are <span>new guidelines now</span>.</div>
|
||||
|
||||
<div>There are <span id="test">new guidelines now</span>.</div>
|
||||
|
||||
<div id="reference">There are new guide-lines now.</div>
|
||||
<!--
|
||||
Expected result:
|
||||
There
|
||||
are
|
||||
new
|
||||
guide-
|
||||
lines
|
||||
now.
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -6,7 +6,18 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
|
||||
<link rel="match" href="reference/hyphens-manual-011-ref.html">
|
||||
<link rel="match" href="reference/hyphens-manual-011M-ref.html">
|
||||
<link rel="match" href="reference/hyphens-manual-011H-ref.html">
|
||||
|
||||
<!--
|
||||
User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010>
|
||||
when the font has the glyph, or
|
||||
may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d>
|
||||
otherwise. Some fonts will display slightly different glyphs for
|
||||
these code points. Therefore these 2 reference files.
|
||||
The M-ref.html reference file means the hyphen-Minus character U+002D.
|
||||
The H-ref.html reference file means the Hyphen character U+2010.
|
||||
-->
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta content="When 'hyphens' is set to 'manual', then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 2 hyphenation opportunities, so it can be hyphenated. Since 9 characters can all fit inside the line box of the block box, then the word 'Deoxyribonucleic' is hyphenated only after the 2nd soft hyphen." name="assert">
|
||||
|
|
@ -17,26 +28,19 @@
|
|||
border: black solid 2px;
|
||||
font-family: monospace;
|
||||
font-size: 32px;
|
||||
margin-bottom: 0.25em;
|
||||
width: 10ch;
|
||||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
hyphens: manual;
|
||||
}
|
||||
|
||||
div#reference
|
||||
{
|
||||
hyphens: none;
|
||||
width: 10ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
|
||||
<div>Deoxy­ribo­nucleic acid</div>
|
||||
|
||||
<div id="test">Deoxy­ribo­nucleic acid</div>
|
||||
|
||||
<div id="reference">Deoxyribo-nucleic acid</div>
|
||||
<!--
|
||||
Expected result:
|
||||
Deoxyribo-
|
||||
nucleic
|
||||
acid
|
||||
-->
|
||||
|
||||
<!--
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,18 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
|
||||
<link rel="match" href="reference/hyphens-manual-011-ref.html">
|
||||
<link rel="match" href="reference/hyphens-manual-011M-ref.html">
|
||||
<link rel="match" href="reference/hyphens-manual-011H-ref.html">
|
||||
|
||||
<!--
|
||||
User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010>
|
||||
when the font has the glyph, or
|
||||
may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d>
|
||||
otherwise. Some fonts will display slightly different glyphs for
|
||||
these code points. Therefore these 2 reference files.
|
||||
The M-ref.html reference file means the hyphen-Minus character U+002D.
|
||||
The H-ref.html reference file means the Hyphen character U+2010.
|
||||
-->
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta content="When 'hyphens' is set to 'manual', then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 4 hyphenation opportunities. Since 9 characters can all fit inside the line box of the block box, then the word 'Deoxyribonucleic' is hyphenated only after the 3rd soft hyphen." name="assert">
|
||||
|
|
@ -17,26 +28,19 @@
|
|||
border: black solid 2px;
|
||||
font-family: monospace;
|
||||
font-size: 32px;
|
||||
margin-bottom: 0.25em;
|
||||
width: 10ch;
|
||||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
hyphens: manual;
|
||||
}
|
||||
|
||||
div#reference
|
||||
{
|
||||
hyphens: none;
|
||||
width: 10ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
|
||||
<div>Deo­xy­ribo­nu­cleic acid</div>
|
||||
|
||||
<div id="test">Deo­xy­ribo­nu­cleic acid</div>
|
||||
|
||||
<div id="reference">Deoxyribo-nucleic acid</div>
|
||||
<!--
|
||||
Expected result:
|
||||
Deoxyribo-
|
||||
nucleic
|
||||
acid
|
||||
-->
|
||||
|
||||
<!--
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,18 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
|
||||
<link rel="match" href="reference/hyphens-manual-013-ref.html">
|
||||
<link rel="match" href="reference/hyphens-manual-013M-ref.html">
|
||||
<link rel="match" href="reference/hyphens-manual-013H-ref.html">
|
||||
|
||||
<!--
|
||||
User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010>
|
||||
when the font has the glyph, or
|
||||
may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d>
|
||||
otherwise. Some fonts will display slightly different glyphs for
|
||||
these code points. Therefore these 2 reference files.
|
||||
The M-ref.html reference file means the hyphen-Minus character U+002D.
|
||||
The H-ref.html reference file means the Hyphen character U+2010.
|
||||
-->
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta content="When 'hyphens' is set to 'manual', then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 1 and only 1 hyphenation opportunity, so it can be hyphenated only at such point." name="assert">
|
||||
|
|
@ -17,26 +28,19 @@
|
|||
border: black solid 2px;
|
||||
font-family: monospace;
|
||||
font-size: 32px;
|
||||
margin-bottom: 0.25em;
|
||||
width: 10ch;
|
||||
}
|
||||
|
||||
div#test
|
||||
{
|
||||
hyphens: manual;
|
||||
}
|
||||
|
||||
div#reference
|
||||
{
|
||||
hyphens: none;
|
||||
width: 10ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only the "c" of "nucleic" should be outside of each black-bordered rectangles.
|
||||
<div>Deoxy­ribonucleic acid</div>
|
||||
|
||||
<div id="test">Deoxy­ribonucleic acid</div>
|
||||
|
||||
<div id="reference">Deoxy-ribonucleic acid</div>
|
||||
<!--
|
||||
Expected result:
|
||||
Deoxy-
|
||||
ribonucleic
|
||||
acid
|
||||
-->
|
||||
|
||||
<!--
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,18 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
|
||||
<link rel="match" href="reference/hyphens-manual-inline-011-ref.html">
|
||||
<link rel="match" href="reference/hyphens-manual-inline-011M-ref.html">
|
||||
<link rel="match" href="reference/hyphens-manual-inline-011H-ref.html">
|
||||
|
||||
<!--
|
||||
User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010>
|
||||
when the font has the glyph, or
|
||||
may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d>
|
||||
otherwise. Some fonts will display slightly different glyphs for
|
||||
these code points. Therefore these 2 reference files.
|
||||
The M-ref.html reference file means the hyphen-Minus character U+002D.
|
||||
The H-ref.html reference file means the Hyphen character U+2010.
|
||||
-->
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta content="When 'hyphens' is set to 'manual' and applied to an inline element, then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 2 hyphenation opportunities, so it can be hyphenated. Since 9 characters can all fit inside the line box of the block box, then the word 'Deoxyribonucleic' is hyphenated only after the 2nd soft hyphen." name="assert">
|
||||
|
|
@ -17,23 +28,21 @@
|
|||
border: black solid 2px;
|
||||
font-family: monospace;
|
||||
font-size: 32px;
|
||||
margin-bottom: 0.25em;
|
||||
width: 10ch;
|
||||
}
|
||||
|
||||
span#test
|
||||
span
|
||||
{
|
||||
hyphens: manual;
|
||||
}
|
||||
|
||||
div#reference
|
||||
{
|
||||
hyphens: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
|
||||
<div>DNA <span>means Deoxy­ribo­nucleic acid</span>.</div>
|
||||
|
||||
<div>DNA <span id="test">means Deoxy­ribo­nucleic acid</span>.</div>
|
||||
|
||||
<div id="reference">DNA means Deoxyribo-nucleic acid.</div>
|
||||
<!--
|
||||
Expected result:
|
||||
DNA means
|
||||
Deoxyribo-
|
||||
nucleic
|
||||
acid.
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -6,7 +6,18 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
|
||||
<link rel="match" href="reference/hyphens-manual-inline-012-ref.html">
|
||||
<link rel="match" href="reference/hyphens-manual-inline-012M-ref.html">
|
||||
<link rel="match" href="reference/hyphens-manual-inline-012H-ref.html">
|
||||
|
||||
<!--
|
||||
User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010>
|
||||
when the font has the glyph, or
|
||||
may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d>
|
||||
otherwise. Some fonts will display slightly different glyphs for
|
||||
these code points. Therefore these 2 reference files.
|
||||
The M-ref.html reference file means the hyphen-Minus character U+002D.
|
||||
The H-ref.html reference file means the Hyphen character U+2010.
|
||||
-->
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta content="When 'hyphens' is set to 'manual' and applied to an inline element, then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 4 hyphenation opportunities. Since 'Deoxy' has 5 characters and 'Deoxyribo' has 9 characters and since the content width of the block box can take 8 characters, then a soft hyphen will occur after 'Deoxy'. Since 'ribonu' has 6 characters and 'ribonucleic' has 11 characters and since the content width of the block box can take 8 characters, then a soft hyphen will occur after 'ribonu'." name="assert">
|
||||
|
|
@ -17,23 +28,23 @@
|
|||
border: black solid 2px;
|
||||
font-family: monospace;
|
||||
font-size: 32px;
|
||||
margin-bottom: 0.25em;
|
||||
width: 8ch;
|
||||
}
|
||||
|
||||
span#test
|
||||
span
|
||||
{
|
||||
hyphens: manual;
|
||||
}
|
||||
|
||||
div#reference
|
||||
{
|
||||
hyphens: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
|
||||
<div>DNA <span>means Deo­xy­ribo­nu­cleic acid</span>.</div>
|
||||
|
||||
<div>DNA <span id="test">means Deo­xy­ribo­nu­cleic acid</span>.</div>
|
||||
|
||||
<div id="reference">DNA means Deoxy-ribonu-cleic acid.</div>
|
||||
<!--
|
||||
Expected result:
|
||||
DNA
|
||||
means
|
||||
Deoxy-
|
||||
ribonu-
|
||||
cleic
|
||||
acid.
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -12,16 +12,18 @@
|
|||
border: black solid 2px;
|
||||
font-family: monospace;
|
||||
font-size: 32px;
|
||||
hyphens: none;
|
||||
margin-bottom: 0.25em;
|
||||
width: 6ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body lang="en">
|
||||
|
||||
<p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
|
||||
<div>There<br>are<br>new<br>guide‐<br>lines<br>now.</div>
|
||||
|
||||
<div>There are new guide-lines now.</div>
|
||||
<!--
|
||||
|
||||
<div>There are new guide-lines now.</div>
|
||||
Hyphen-minus == - == -
|
||||
|
||||
Hyphen == ‐ == ‐
|
||||
|
||||
-->
|
||||
|
|
@ -12,16 +12,18 @@
|
|||
border: black solid 2px;
|
||||
font-family: monospace;
|
||||
font-size: 32px;
|
||||
hyphens: none;
|
||||
margin-bottom: 0.25em;
|
||||
width: 8ch;
|
||||
width: 6ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body lang="en">
|
||||
|
||||
<p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
|
||||
<div>There<br>are<br>new<br>guide-<br>lines<br>now.</div>
|
||||
|
||||
<div>DNA means Deoxy-ribonu-cleic acid.</div>
|
||||
<!--
|
||||
|
||||
<div>DNA means Deoxy-ribonu-cleic acid.</div>
|
||||
Hyphen-minus == - == -
|
||||
|
||||
Hyphen == ‐ == ‐
|
||||
|
||||
-->
|
||||
|
|
@ -12,16 +12,16 @@
|
|||
border: black solid 2px;
|
||||
font-family: monospace;
|
||||
font-size: 32px;
|
||||
hyphens: none;
|
||||
margin-bottom: 0.25em;
|
||||
width: 10ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div>Deoxyribo‐<br>nucleic acid</div>
|
||||
|
||||
<p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
|
||||
<!--
|
||||
|
||||
<div>Deoxyribo-nucleic acid</div>
|
||||
Hyphen-minus == - == -
|
||||
|
||||
<div>Deoxyribo-nucleic acid</div>
|
||||
Hyphen == ‐ == ‐
|
||||
|
||||
-->
|
||||
|
|
@ -12,16 +12,16 @@
|
|||
border: black solid 2px;
|
||||
font-family: monospace;
|
||||
font-size: 32px;
|
||||
hyphens: none;
|
||||
margin-bottom: 0.25em;
|
||||
width: 10ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div>Deoxyribo-<br>nucleic acid</div>
|
||||
|
||||
<p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
|
||||
<!--
|
||||
|
||||
<div>DNA means Deoxyribo-nucleic acid.</div>
|
||||
Hyphen-minus == - == -
|
||||
|
||||
<div>DNA means Deoxyribo-nucleic acid.</div>
|
||||
Hyphen == ‐ == ‐
|
||||
|
||||
-->
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
border: black solid 2px;
|
||||
font-family: monospace;
|
||||
font-size: 32px;
|
||||
hyphens: none;
|
||||
margin-bottom: 0.25em;
|
||||
width: 10ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only the "c" of "nucleic" should be outside of each black-bordered rectangles.
|
||||
|
||||
<div>Deoxy-ribonucleic acid</div>
|
||||
|
||||
<div>Deoxy-ribonucleic acid</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
border: black solid 2px;
|
||||
font-family: monospace;
|
||||
font-size: 32px;
|
||||
width: 10ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>Deoxy‐<br>ribonucleic acid</div>
|
||||
|
||||
<!--
|
||||
|
||||
Hyphen-minus == - == -
|
||||
|
||||
Hyphen == ‐ == ‐
|
||||
|
||||
-->
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
border: black solid 2px;
|
||||
font-family: monospace;
|
||||
font-size: 32px;
|
||||
width: 10ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>Deoxy-<br>ribonucleic acid</div>
|
||||
|
||||
<!--
|
||||
|
||||
Hyphen-minus == - == -
|
||||
|
||||
Hyphen == ‐ == ‐
|
||||
|
||||
-->
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
border: black solid 2px;
|
||||
font-family: monospace;
|
||||
font-size: 32px;
|
||||
width: 10ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>DNA means<br>Deoxyribo‐<br>nucleic<br>acid.</div>
|
||||
|
||||
<!--
|
||||
|
||||
Hyphen-minus == - == -
|
||||
|
||||
Hyphen == ‐ == ‐
|
||||
|
||||
-->
|
||||
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