mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Auto merge of #26199 - servo-wpt-sync:wpt_update_16-04-2020, r=servo-wpt-sync
Sync WPT with upstream (16-04-2020) Automated downstream sync of changes from upstream as of 16-04-2020. [no-wpt-sync] r? @servo-wpt-sync
This commit is contained in:
commit
e9afb0ca77
169 changed files with 3407 additions and 3041 deletions
|
@ -1,4 +0,0 @@
|
|||
[hit-test-floats-002.html]
|
||||
[Hit test float]
|
||||
expected: FAIL
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[hit-test-floats-003.html]
|
||||
[Miss float below something else]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[animation-base-response-004.html]
|
||||
[Base is responsive to font-affecting appearing via setKeyframes]
|
||||
expected: FAIL
|
||||
|
|
@ -2,3 +2,6 @@
|
|||
[elementsFromPoint on the root document for points in iframe elements]
|
||||
expected: FAIL
|
||||
|
||||
[elementsFromPoint on inner documents]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,4 +0,0 @@
|
|||
[elementsFromPoint-invalid-cases.html]
|
||||
[The root element is the last element returned for otherwise empty queries within the viewport]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[custom-element-reaction-queue.html]
|
||||
[Upgrading a custom element must not invoke attributeChangedCallback for the attribute that is changed during upgrading]
|
||||
expected: FAIL
|
||||
|
|
@ -315,9 +315,18 @@
|
|||
[<iframe>: combined response Content-Type: text/html;x=" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;" \\" 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
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html */*]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html;" \\" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -56,3 +56,6 @@
|
|||
[separate text/javascript;charset=windows-1252 error text/javascript]
|
||||
expected: FAIL
|
||||
|
||||
[separate text/javascript x/x]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -11,6 +11,6 @@
|
|||
[X-Content-Type-Options%3A%20nosniff%0C]
|
||||
expected: FAIL
|
||||
|
||||
[X-Content-Type-Options%3A%20no%0D%0AX-Content-Type-Options%3A%20nosniff]
|
||||
[X-Content-Type-Options%3A%20%40%23%24%23%25%25%26%5E%26%5E*()()11!%2Cnosniff]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,4 +0,0 @@
|
|||
[traverse_the_history_1.html]
|
||||
[Multiple history traversals from the same task]
|
||||
expected: FAIL
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
expected: NOTRUN
|
||||
|
||||
[Element with tabindex should support autofocus]
|
||||
expected: FAIL
|
||||
expected: TIMEOUT
|
||||
|
||||
[Area element should support autofocus]
|
||||
expected: NOTRUN
|
||||
|
@ -16,5 +16,5 @@
|
|||
expected: NOTRUN
|
||||
|
||||
[Non-HTMLElement should not support autofocus]
|
||||
expected: TIMEOUT
|
||||
expected: NOTRUN
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
[iframe_sandbox_popups_nonescaping-2.html]
|
||||
expected: TIMEOUT
|
||||
[Check that popups from a sandboxed iframe do not escape the sandbox]
|
||||
expected: FAIL
|
||||
expected: NOTRUN
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
[iframe_sandbox_popups_nonescaping-3.html]
|
||||
expected: CRASH
|
||||
expected: TIMEOUT
|
||||
[Check that popups from a sandboxed iframe do not escape the sandbox]
|
||||
expected: FAIL
|
||||
expected: NOTRUN
|
||||
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
[currentSrc-blob-cache.html]
|
||||
[currentSrc is right even if underlying image is a shared blob]
|
||||
expected: FAIL
|
||||
|
|
@ -80,3 +80,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 44054 more errors.\n\tMax AbsError of 1.9961981773376465e+0 at index of 18538.\n\t[18538\]\t-9.9879217147827148e-1\t9.9740600585937500e-1\t1.9961981773376465e+0\t2.0013897706758867e+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 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
|
||||
|
||||
|
|
|
@ -134,3 +134,9 @@
|
|||
[X Stitched sine-wave buffers at sample rate 44100 does not equal [0,0.06264832615852356,0.12505052983760834,0.18696144223213196,0.24813786149024963,0.308339387178421,0.36732959747314453,0.4248766601085663,0.480754554271698,0.5347436666488647,0.5866320133209229,0.6362156271934509,0.6832997798919678,0.7276994585990906,0.7692402601242065,0.8077589869499207...\] with an element-wise tolerance of {"absoluteThreshold":0.000090957,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[31080\]\t-1.1377083450655894e+22\t5.6332010030746460e-1\t1.1377083450655894e+22\t2.0196480552435802e+22\t9.0957000000000003e-5\n\t[31081\]\t4.5654303967702540e-41\t6.1397600173950195e-1\t6.1397600173950195e-1\t1.0000000000000000e+0\t9.0957000000000003e-5\n\tMax AbsError of 1.1377083450655894e+22 at index of 31080.\n\tMax RelError of 2.0196480552435802e+22 at index of 31080.\n]
|
||||
expected: FAIL
|
||||
|
||||
[X Stitched sine-wave buffers at sample rate 44100 does not equal [0,0.06264832615852356,0.12505052983760834,0.18696144223213196,0.24813786149024963,0.308339387178421,0.36732959747314453,0.4248766601085663,0.480754554271698,0.5347436666488647,0.5866320133209229,0.6362156271934509,0.6832997798919678,0.7276994585990906,0.7692402601242065,0.8077589869499207...\] with an element-wise tolerance of {"absoluteThreshold":0.000090957,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[31080\]\t-1.7359996676420403e+17\t5.6332010030746460e-1\t1.7359996676420403e+17\t3.0817286063368198e+17\t9.0957000000000003e-5\n\t[31081\]\t4.5750993561740953e-41\t6.1397600173950195e-1\t6.1397600173950195e-1\t1.0000000000000000e+0\t9.0957000000000003e-5\n\tMax AbsError of 1.7359996676420403e+17 at index of 31080.\n\tMax RelError of 3.0817286063368198e+17 at index of 31080.\n]
|
||||
expected: FAIL
|
||||
|
||||
[X SNR (-301.35690681171843 dB) is not greater than or equal to 85.58. Got -301.35690681171843.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -1,4 +0,0 @@
|
|||
[hit-test-floats-002.html]
|
||||
[Hit test float]
|
||||
expected: FAIL
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[hit-test-floats-003.html]
|
||||
[Miss float below something else]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[animation-base-response-004.html]
|
||||
[Base is responsive to font-affecting appearing via setKeyframes]
|
||||
expected: FAIL
|
||||
|
|
@ -2,3 +2,6 @@
|
|||
[elementsFromPoint on the root document for points in iframe elements]
|
||||
expected: FAIL
|
||||
|
||||
[elementsFromPoint on inner documents]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,4 +0,0 @@
|
|||
[elementsFromPoint-invalid-cases.html]
|
||||
[The root element is the last element returned for otherwise empty queries within the viewport]
|
||||
expected: FAIL
|
||||
|
|
@ -2,3 +2,6 @@
|
|||
[Custom Elements: Each element must have its own custom element reaction queue]
|
||||
expected: FAIL
|
||||
|
||||
[Upgrading a custom element must not invoke attributeChangedCallback for the attribute that is changed during upgrading]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -315,9 +315,18 @@
|
|||
[<iframe>: combined response Content-Type: text/html;x=" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;" \\" 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
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html */*]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html;" \\" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -56,3 +56,6 @@
|
|||
[separate text/javascript;charset=windows-1252 error text/javascript]
|
||||
expected: FAIL
|
||||
|
||||
[separate text/javascript x/x]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -11,6 +11,6 @@
|
|||
[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%20no%0D%0AX-Content-Type-Options%3A%20nosniff]
|
||||
[X-Content-Type-Options%3A%20%40%23%24%23%25%25%26%5E%26%5E*()()11!%2Cnosniff]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,4 +0,0 @@
|
|||
[traverse_the_history_1.html]
|
||||
[Multiple history traversals from the same task]
|
||||
expected: FAIL
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
expected: FAIL
|
||||
|
||||
[Element with tabindex should support autofocus]
|
||||
expected: FAIL
|
||||
expected: TIMEOUT
|
||||
|
||||
[Host element with delegatesFocus including no focusable descendants should be skipped]
|
||||
expected: NOTRUN
|
||||
|
@ -16,5 +16,5 @@
|
|||
expected: NOTRUN
|
||||
|
||||
[Non-HTMLElement should not support autofocus]
|
||||
expected: TIMEOUT
|
||||
expected: NOTRUN
|
||||
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
[iframe_sandbox_popups_nonescaping-2.html]
|
||||
type: testharness
|
||||
expected: TIMEOUT
|
||||
[Check that popups from a sandboxed iframe do not escape the sandbox]
|
||||
expected: FAIL
|
||||
expected: NOTRUN
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
[iframe_sandbox_popups_nonescaping-3.html]
|
||||
type: testharness
|
||||
expected: CRASH
|
||||
expected: TIMEOUT
|
||||
[Check that popups from a sandboxed iframe do not escape the sandbox]
|
||||
expected: FAIL
|
||||
expected: NOTRUN
|
||||
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
[currentSrc-blob-cache.html]
|
||||
[currentSrc is right even if underlying image is a shared blob]
|
||||
expected: FAIL
|
||||
|
|
@ -149,3 +149,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 44054 more errors.\n\tMax AbsError of 1.9961981773376465e+0 at index of 18538.\n\t[18538\]\t-9.9879217147827148e-1\t9.9740600585937500e-1\t1.9961981773376465e+0\t2.0013897706758867e+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 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
|
||||
|
||||
|
|
|
@ -365,3 +365,9 @@
|
|||
[X Stitched sine-wave buffers at sample rate 44100 does not equal [0,0.06264832615852356,0.12505052983760834,0.18696144223213196,0.24813786149024963,0.308339387178421,0.36732959747314453,0.4248766601085663,0.480754554271698,0.5347436666488647,0.5866320133209229,0.6362156271934509,0.6832997798919678,0.7276994585990906,0.7692402601242065,0.8077589869499207...\] with an element-wise tolerance of {"absoluteThreshold":0.000090957,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[31080\]\t-1.1377083450655894e+22\t5.6332010030746460e-1\t1.1377083450655894e+22\t2.0196480552435802e+22\t9.0957000000000003e-5\n\t[31081\]\t4.5654303967702540e-41\t6.1397600173950195e-1\t6.1397600173950195e-1\t1.0000000000000000e+0\t9.0957000000000003e-5\n\tMax AbsError of 1.1377083450655894e+22 at index of 31080.\n\tMax RelError of 2.0196480552435802e+22 at index of 31080.\n]
|
||||
expected: FAIL
|
||||
|
||||
[X Stitched sine-wave buffers at sample rate 44100 does not equal [0,0.06264832615852356,0.12505052983760834,0.18696144223213196,0.24813786149024963,0.308339387178421,0.36732959747314453,0.4248766601085663,0.480754554271698,0.5347436666488647,0.5866320133209229,0.6362156271934509,0.6832997798919678,0.7276994585990906,0.7692402601242065,0.8077589869499207...\] with an element-wise tolerance of {"absoluteThreshold":0.000090957,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[31080\]\t-1.7359996676420403e+17\t5.6332010030746460e-1\t1.7359996676420403e+17\t3.0817286063368198e+17\t9.0957000000000003e-5\n\t[31081\]\t4.5750993561740953e-41\t6.1397600173950195e-1\t6.1397600173950195e-1\t1.0000000000000000e+0\t9.0957000000000003e-5\n\tMax AbsError of 1.7359996676420403e+17 at index of 31080.\n\tMax RelError of 3.0817286063368198e+17 at index of 31080.\n]
|
||||
expected: FAIL
|
||||
|
||||
[X SNR (-301.35690681171843 dB) is not greater than or equal to 85.58. Got -301.35690681171843.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Tests that base responds to font-affecting properties appearing via setKeyframes</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#target1 {
|
||||
font-size: 10px;
|
||||
height: 1em;
|
||||
}
|
||||
</style>
|
||||
<div id=target1></div>
|
||||
<script>
|
||||
test(function() {
|
||||
getComputedStyle(target1).height;
|
||||
|
||||
let animation = target1.animate([
|
||||
{ height: '50px' },
|
||||
{ height: '100px' },
|
||||
], {
|
||||
duration: 1000000,
|
||||
delay: -500000,
|
||||
easing: 'steps(2, end)'
|
||||
});
|
||||
|
||||
assert_equals(getComputedStyle(target1).height, '75px');
|
||||
|
||||
animation.effect.setKeyframes([
|
||||
{ fontSize: '10px' },
|
||||
{ fontSize: '20px' },
|
||||
]);
|
||||
|
||||
assert_equals(getComputedStyle(target1).height, '15px');
|
||||
}, 'Base is responsive to font-affecting appearing via setKeyframes');
|
||||
</script>
|
|
@ -0,0 +1,2 @@
|
|||
<!doctype html>
|
||||
<input type="checkbox">
|
|
@ -0,0 +1,21 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<title>CSS Color Adjustment Test: Checkbox rendering should change between dark and light schemes</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-processing">
|
||||
<link rel="mismatch" href="color-scheme-change-checkbox-notref.html">
|
||||
<link rel="stylesheet" href="support/assert-preferred-dark.css">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<input type="checkbox">
|
||||
</body>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
document.querySelector("input").style.colorScheme = "dark";
|
||||
takeScreenshot();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</html>
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid Layout Test: free space computation with flex lengths.</title>
|
||||
<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-flex-tracks">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit">
|
||||
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=150359">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<meta name="assert" content="Test that free space is properly computed after computing fr tracks so that we could use it for content distribution." />
|
||||
|
||||
<style>
|
||||
.freeSpaceForColumnsGrid {
|
||||
grid-template: 100% / minmax(20px, 0.7fr);
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.freeSpaceForRowsGrid {
|
||||
grid-template: minmax(20px, 0.7fr) / 100%;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.container { position: relative; }
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.item2 {
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
</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>Grid with justify-content: start.</p>
|
||||
<div class="container">
|
||||
<div class="grid freeSpaceForColumnsGrid justifyContentStart">
|
||||
<div class="item" data-offset-x="0" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Grid with justify-content: center.</p>
|
||||
<div class="container">
|
||||
<div class="grid freeSpaceForColumnsGrid justifyContentCenter">
|
||||
<div class="item" data-offset-x="8" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Grid with justify-content: end.</p>
|
||||
<div class="container">
|
||||
<div class="grid freeSpaceForColumnsGrid justifyContentEnd">
|
||||
<div class="item" data-offset-x="15" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Grid with align-content: start.</p>
|
||||
<div class="container">
|
||||
<div class="grid freeSpaceForRowsGrid alignContentStart">
|
||||
<div class="item2" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="70"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Grid with align-content: center.</p>
|
||||
<div class="container">
|
||||
<div class="grid freeSpaceForRowsGrid alignContentCenter">
|
||||
<div class="item2" data-offset-x="0" data-offset-y="15" data-expected-width="50" data-expected-height="70"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Grid with align-content: end.</p>
|
||||
<div class="container">
|
||||
<div class="grid freeSpaceForRowsGrid alignContentEnd">
|
||||
<div class="item2" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="70"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
|
@ -0,0 +1,182 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid Layout Test: Auto repeat tracks, grid-template-columns and flexible lengths.</title>
|
||||
<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizes">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=235258">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that resolving auto tracks on grid items using <flex> values with grid-template-columns works properly." />
|
||||
|
||||
<style>
|
||||
.gridFlexContent {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.gridMaxFlexContent {
|
||||
grid-template-columns: minmax(30px, 2fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.gridTwoMaxFlexContent {
|
||||
grid-template-columns: minmax(10px, 1fr) minmax(10px, 2fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.gridTwoDoubleMaxFlexContent {
|
||||
grid-template-columns: minmax(10px, 0.5fr) minmax(10px, 2fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.gridIgnoreSecondGridItem {
|
||||
grid-template-columns: minmax(300px, 3fr) minmax(150px, 1fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.gridRespectBaseSize {
|
||||
grid-template-columns: minmax(75px, 1fr) minmax(0px, 2fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.gridRespectProportions {
|
||||
grid-template-columns: minmax(0px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.gridRespectBaseSizeProportions {
|
||||
grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.gridRespectBaseSizeBeforeProportions {
|
||||
grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.firstRowThirdColumn {
|
||||
background-color: yellow;
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
</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="constrainedContainer" style="position: relative">
|
||||
<div class="grid gridFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="50">XXX</div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-offset-x="30" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="30" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Allow the extra logical space distribution to occur. -->
|
||||
<div style="width: 40px; height: 10px">
|
||||
<div class="grid gridMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 100px; height: 10px;">
|
||||
<div class="grid gridMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridTwoMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Allow the extra logical space distribution to occur. -->
|
||||
<div style="width: 60px; height: 10px">
|
||||
<div class="grid gridTwoMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 120px; height: 10px;">
|
||||
<div class="grid gridTwoMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Allow the extra logical space distribution to occur. -->
|
||||
<div style="width: 60px; height: 10px">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="12" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="48" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 120px; height: 10px;">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="24" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="96" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Custom test for a corner case. -->
|
||||
<div style="width: 570px; height: 10px;">
|
||||
<div class="grid gridIgnoreSecondGridItem">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="420" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="150" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex track length must be at least its baseSize. -->
|
||||
<div style="width: 100px; height: 10px;">
|
||||
<div class="grid gridRespectBaseSize">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="75" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="25" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex track lengths must be proportional to their flex factors.. -->
|
||||
<div style="width: 275px; height: 10px;">
|
||||
<div class="grid gridRespectProportions">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="25" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex track lengths must be proportional but still respecting their base sizes. -->
|
||||
<div style="width: 350px; height: 10px;">
|
||||
<div class="grid gridRespectBaseSizeProportions">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Not enough space to respect proportions, because minTrackBreadh it's a harder requirement -->
|
||||
<div style="width: 275px; height: 10px;">
|
||||
<div class="grid gridRespectBaseSizeBeforeProportions">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="75" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowThirdColumn" data-expected-width="150" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,253 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid Layout Test: Auto repeat tracks, grid-template-rows and flexible lengths.</title>
|
||||
<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizes">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=235258">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that resolving auto tracks on grid items using <flex> values with grid-template-rows works properly." />
|
||||
|
||||
<style>
|
||||
.gridFlexContent {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
.gridMaxFlexContent {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(30px, 2fr);
|
||||
}
|
||||
.gridTwoMaxFlexContent {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(10px, 1fr) minmax(10px, 2fr);
|
||||
}
|
||||
.gridTwoDoubleMaxFlexContent {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr);
|
||||
}
|
||||
.gridRespectBaseSize {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(75px, 1fr) minmax(0px, 2fr);
|
||||
}
|
||||
.gridRespectProportions {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(25px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
|
||||
}
|
||||
.gridRespectBaseSizeProportions {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
|
||||
}
|
||||
.gridRespectBaseSizeBeforeProportions {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
|
||||
}
|
||||
.thirdRowFirstColumn {
|
||||
background-color: yellow;
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
</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="grid gridFlexContent constrainedContainer" style="position: relative;">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="30">X<br>X<br>X</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="50">X<br>X<br>X<br>X<br>X</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Allow the extra logical space distribution to occur. -->
|
||||
<div style="width: 10px; height: 40px">
|
||||
<div class="grid gridMaxFlexContent" style="height: 100%;">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 40px">
|
||||
<div class="grid gridMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 100px;">
|
||||
<div class="grid gridMaxFlexContent" style="height: 100%;">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 100px;">
|
||||
<div class="grid gridMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridTwoMaxFlexContent" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridTwoMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Allow the extra logical space distribution to occur. -->
|
||||
<div style="width: 10px; height: 60px">
|
||||
<div class="grid gridTwoMaxFlexContent" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 60px">
|
||||
<div class="grid gridTwoMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 120px;">
|
||||
<div class="grid gridTwoMaxFlexContent" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 120px;">
|
||||
<div class="grid gridTwoMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Allow the extra logical space distribution to occur. -->
|
||||
<div style="width: 10px; height: 60px">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="12"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="48"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
|
||||
<div style="width: 10px; height: 60px">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 120px;">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="24"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="96"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
|
||||
<div style="width: 10px; height: 120px;">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex track length must be at least its baseSize. -->
|
||||
<div style="width: 10px; height: 100px;">
|
||||
<div class="grid gridRespectBaseSize" style="height: 100%;">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 100px;">
|
||||
<div class="grid gridRespectBaseSize">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="150"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex track lengths must be proportional to their flex factors.. -->
|
||||
<div style="width: 10px; height: 275px;">
|
||||
<div class="grid gridRespectProportions" style="height: 100%;">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 275px;">
|
||||
<div class="grid gridRespectProportions">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="13"></div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex track lengths must be proportional but still respecting their base sizes. -->
|
||||
<div style="width: 10px; height: 350px;">
|
||||
<div class="grid gridRespectBaseSizeProportions" style="height: 100%;">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 350px;">
|
||||
<div class="grid gridRespectBaseSizeProportions">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Not enough space to respect proportions, because minTrackBreadh it's a harder requirement -->
|
||||
<div style="width: 10px; height: 275px;">
|
||||
<div class="grid gridRespectBaseSizeBeforeProportions" style="height: 100%;">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="150"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 275px;">
|
||||
<div class="grid gridRespectBaseSizeBeforeProportions">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -54,8 +54,6 @@
|
|||
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
|
||||
<p>Test that resolving auto tracks on grid items works properly.</p>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridMaxMaxContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid Layout Test: flex factor sum smaller than 1.</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-find-fr-size">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=520477">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that resolving auto tracks on grid items works properly even when the flex factor sum is less than 1." />
|
||||
|
||||
<style>
|
||||
.onlyColumnFractionFlexFactors {
|
||||
grid-template-columns: minmax(0, 0.1fr) minmax(0, 0.2fr) minmax(0, 0.3fr);
|
||||
grid-template-rows: 50px;
|
||||
width: 100px;
|
||||
}
|
||||
.onlyRowFractionFlexFactors {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(0, 0.1fr) minmax(0, 0.2fr) minmax(0, 0.3fr);
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
}
|
||||
.fixedAndfractionFlexFactors {
|
||||
grid-template-columns: 50px minmax(0, 0.2fr) 30px;
|
||||
grid-template-rows: minmax(0, 0.1fr) 50px minmax(0, 0.3fr);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.zeroValueFlexFactor {
|
||||
grid-template-columns: .0fr .2fr .3fr;
|
||||
grid-template-rows: 50px;
|
||||
width: 100px;
|
||||
}
|
||||
.firstRowThirdColumn {
|
||||
background-color: yellow;
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
.secondRowThirdColumn {
|
||||
background-color: yellow;
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
.thirdRowFirstColumn {
|
||||
background-color: brown;
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
.thirdRowThirdColumn {
|
||||
background-color: magenta;
|
||||
grid-column: 3;
|
||||
grid-row: 3;
|
||||
}
|
||||
</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 onlyColumnFractionFlexFactors">
|
||||
<div class="firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
|
||||
<div class="firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div>
|
||||
<div class="firstRowThirdColumn" data-expected-width="30" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;">
|
||||
<div class="grid onlyRowFractionFlexFactors">
|
||||
<div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;">
|
||||
<div class="grid zeroValueFlexFactor">
|
||||
<div class="firstRowFirstColumn" data-expected-width="0" data-expected-height="50"></div>
|
||||
<div class="firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div>
|
||||
<div class="firstRowThirdColumn" data-expected-width="30" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;">
|
||||
<div class="grid fixedAndfractionFlexFactors">
|
||||
<div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="5"></div>
|
||||
<div class="firstRowSecondColumn" data-expected-width="4" data-expected-height="5"></div>
|
||||
<div class="firstRowThirdColumn" data-expected-width="30" data-expected-height="5"></div>
|
||||
<div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="secondRowSecondColumn" data-expected-width="4" data-expected-height="50"></div>
|
||||
<div class="secondRowThirdColumn" data-expected-width="30" data-expected-height="50"></div>
|
||||
<div class="thirdRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
||||
<div class="thirdRowSecondColumn" data-expected-width="4" data-expected-height="15"></div>
|
||||
<div class="thirdRowThirdColumn" data-expected-width="30" data-expected-height="15"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: no crash with adding positioned grid items</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-definition">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=273898">
|
||||
<meta name="assert" content="Test that adding grid items when some of them are positioned does not crash." />
|
||||
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
grid-auto-flow: dense;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
<div class="absolute"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var grid = document.getElementById("grid");
|
||||
grid.offsetTop;
|
||||
var newItem1 = document.createElement("div");
|
||||
grid.appendChild(newItem1);
|
||||
var newItem2 = document.createElement("div");
|
||||
newItem2.className = "absolute";
|
||||
grid.appendChild(newItem2);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: no crash with positioned block grid items</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-definition">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=273898">
|
||||
<meta name="assert" content="Test that adding a positioned block grid item after an inline grid item does not crash." />
|
||||
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
grid-auto-flow: dense;
|
||||
}
|
||||
|
||||
embed {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="grid">
|
||||
test
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var grid = document.getElementById("grid");
|
||||
grid.offsetTop;
|
||||
var embed = document.createElement("embed");
|
||||
embed.setAttribute("type", "image/png");
|
||||
grid.appendChild(embed);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,165 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: auto-fill 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-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-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">
|
||||
<meta name="assert" content="Check that auto-fill 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-fill, 30px [autobar]); }
|
||||
.gridAutoRepeatAndFixedBefore { grid-template-columns: 10px [foo] 20% [bar] repeat(auto-fill, [autofoo] 35px); }
|
||||
.gridAutoRepeatAndFixedAfter { grid-template-columns: repeat(auto-fill, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }
|
||||
.gridAutoRepeatAndFixed { grid-template-columns: [start] repeat(2, 50px [a]) [middle] repeat(auto-fill, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
|
||||
.gridMultipleNames { grid-template-columns: [start] 20px [foo] 50% repeat(auto-fill, [bar] 20px [start foo]) [foo] 10% [end bar]; }
|
||||
.gridMultipleTracks { grid-template-columns: [start] 20px repeat(auto-fill, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; }
|
||||
|
||||
.item { background-color: cyan; }
|
||||
|
||||
.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-fill, ) 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="100" 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="377" 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="60" 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="130" 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="175" 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="160" 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: a / 2 c" data-offset-x="20" data-offset-y="0" data-expected-width="84" data-expected-height="25"></div>
|
||||
<div class="item" style="grid-column: 3 / e; grid-row: 2;" data-offset-x="52" data-offset-y="25" data-expected-width="72" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleTracks gap">
|
||||
<div class="item" style="grid-column: a / c" data-offset-x="40" data-offset-y="0" data-expected-width="32" data-expected-height="25"></div>
|
||||
<div class="item" style="grid-column: 3 / last; grid-row: 2;" data-offset-x="92" data-offset-y="25" data-expected-width="115" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
width: 100px;
|
||||
grid: repeat(5, 20px) / repeat(4, 25px);
|
||||
justify-content: start;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if you get a grid with 5 rows of 20px and 4 columns of 25px.</p>
|
||||
|
||||
<pre id="log">grid: 20px 20px 20px 20px 20px / 25px 25px 25px 25px;</pre>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="grid" class="grid">
|
||||
<div class="item" style="grid-area: 1 / 1;"></div>
|
||||
<div class="item" style="grid-area: 2 / 2;"></div>
|
||||
<div class="item" style="grid-area: 3 / 3;"></div>
|
||||
<div class="item" style="grid-area: 4 / 4;"></div>
|
||||
<div class="item" style="grid-row: 5; grid-column: 1 / -1;"></div>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: auto-repeat tracks on a positioned grid container.</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/>
|
||||
<link rel="issue" href="https://crbug.com/624301"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-notation"/>
|
||||
<link rel="match" href="grid-auto-repeat-positioned-container-001-ref.html"/>
|
||||
<meta name="assert" content="Checks that auto repeat tracks are properly computed for a positioned grid container with a definite width and height."/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<style>
|
||||
.wrapper {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: 0; bottom: 0;
|
||||
grid: repeat(auto-fill, 20px) / repeat(auto-fill, 25px);
|
||||
justify-content: start;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if you get a grid with 5 rows of 20px and 4 columns of 25px.</p>
|
||||
|
||||
<pre id="log"></pre>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="grid" class="grid">
|
||||
<div class="item" style="grid-area: 1 / 1;"></div>
|
||||
<div class="item" style="grid-area: 2 / 2;"></div>
|
||||
<div class="item" style="grid-area: 3 / 3;"></div>
|
||||
<div class="item" style="grid-area: 4 / 4;"></div>
|
||||
<div class="item" style="grid-row: 5; grid-column: 1 / -1;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var log = document.getElementById("log");
|
||||
|
||||
var grid = document.getElementById("grid");
|
||||
var computedStyle = getComputedStyle(grid);
|
||||
|
||||
log.innerHTML = "grid: " + computedStyle.getPropertyValue("grid-template-rows") + " / " + computedStyle.getPropertyValue("grid-template-columns") + ";";
|
||||
</script>
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<link href="/fonts/ahem.css" rel="stylesheet"/>
|
||||
<style>
|
||||
.block {
|
||||
background-color: grey;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.item {
|
||||
font: 15px/1 Ahem;
|
||||
background-color: green;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
margin: 4px 8px 12px 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="block">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="block verticalRL">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="block verticalLR">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="block directionRTL">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="block directionRTL verticalRL">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="block directionRTL verticalLR">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid: Grid items and logical margins</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<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-grid-1/#propdef-grid-row">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
|
||||
<link rel="match" href="grid-item-margins-and-writing-modes-001-ref.html">
|
||||
<meta name="assert" content="This test ensures that the border, margin, and padding
|
||||
combining with RTL direction and different writing-modes generate the proper layout."/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<link href="/fonts/ahem.css" rel="stylesheet"/>
|
||||
<style>
|
||||
.grid {
|
||||
grid-template-columns: 80px;
|
||||
}
|
||||
|
||||
.block {
|
||||
background-color: grey;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.item {
|
||||
font: 15px/1 Ahem;
|
||||
background-color: green;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
margin: 4px 8px 12px 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="grid block">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="grid block verticalRL">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="grid block verticalLR">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="grid block directionRTL">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="grid block directionRTL verticalRL">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="grid block directionRTL verticalLR">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid Layout Test: Remove a first child in grid items</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item">
|
||||
<link rel="stylesheet" href="/css/support/grid.css"/>
|
||||
<link rel="match" href="../reference/grid-item-script-001-ref.html">
|
||||
<meta name="assert" content="This test ensures that removing a first child element in grid items doesn't crash.">
|
||||
<link rel="stylesheet" href="/css/support/grid.css"/>
|
||||
<div class="grid">
|
||||
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='190'>
|
||||
<polygon points='100,10 40,180 190,60 10,60 160,180' style='fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;'>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var grid = document.getElementsByClassName("grid")[0];
|
||||
grid.offsetTop;
|
||||
while (grid.firstChild)
|
||||
grid.removeChild(grid.firstChild);
|
||||
grid.offsetTop;
|
||||
grid.innerHTML = "Test passes if it doesn't crash.";
|
||||
</script>
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
.item {
|
||||
height: 100%;
|
||||
width: 30px;
|
||||
background: salmon;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>This test passes if it has the same output than the reference. As spec states that child text runs containing only white space should not rendered (just as if its text nodes were display:none).</p>
|
||||
<div class="grid">
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid : Whitespace in grid item</title>
|
||||
<link rel="author" title="Christian Biesinger" href="mailto:cbiesinger@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
|
||||
<link rel="match" href="whitespace-in-grid-item-001-ref.html">
|
||||
<link rel="help" href="https://codereview.chromium.org/16888008">
|
||||
<meta name="assert" content="Grid items shouldn't be created for white spaces."/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
.grid {
|
||||
white-space: pre;
|
||||
}
|
||||
.item {
|
||||
height: 100%;
|
||||
width: 30px;
|
||||
background: salmon;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>This test passes if it has the same output than the reference. As spec states that child text runs containing only white space should not rendered (just as if its text nodes were display:none).</p>
|
||||
<div class="grid">
|
||||
|
||||
<div class="item"></div> 	
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid: intrinsic width of fixed-width grid items.</title>
|
||||
<link rel="author" title="Sunil Ratnu" href="mailto:sunil.ratnu@samsung.com"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#overflow"/>
|
||||
<meta name="assert" content="This test ensures that scrollbar width is not accounted for fixed-width grid items' intrinsic width."/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<style>
|
||||
.grid {
|
||||
grid-template-columns: 400px 500px;
|
||||
grid-template-rows: 200px 300px;
|
||||
}
|
||||
|
||||
.gridItemScrollOverflow {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
</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">
|
||||
<div class="firstRowFirstColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="firstRowSecondColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="secondRowFirstColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
|
||||
<!-- Grid item itself being a grid container-->
|
||||
<div class="grid secondRowSecondColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
.cell {
|
||||
width: 50px;
|
||||
height: auto;
|
||||
min-height: 50px
|
||||
}
|
||||
|
||||
.invisibleFont {
|
||||
color: lime;
|
||||
}
|
||||
|
||||
.floatLeft {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.clearLeft {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>This test checks that grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item ('Float' text shouldn't overflow the first row).</div>
|
||||
|
||||
<div>
|
||||
<div class="cell relative floatLeft firstRowFirstColumn">
|
||||
<div>Float</div>
|
||||
<div>Float</div>
|
||||
<div>Float</div>
|
||||
<div>Float</div>
|
||||
</div>
|
||||
<div class="cell floatLeft firstRowSecondColumn">
|
||||
<div class="invisibleFont">Float</div>
|
||||
<div class="invisibleFont">Float</div>
|
||||
<div class="invisibleFont">Float</div>
|
||||
<div class="invisibleFont">Float</div>
|
||||
</div>
|
||||
<div class="cell floatLeft clearLeft secondRowFirstColumn"></div>
|
||||
<div class="cell floatLeft secondRowSecondColumn"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: floats do not protrude content onto grid items</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=430100">
|
||||
<link rel="match" href="grid-floats-no-intrude-002-ref.html">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
|
||||
<meta name="assert" content="Test that a grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item." />
|
||||
|
||||
<style>
|
||||
.grid {
|
||||
grid-auto-columns: minmax(50px, max-content);
|
||||
grid-auto-rows: minmax(50px, max-content);
|
||||
}
|
||||
|
||||
.floatChild {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>This test checks that grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item ('Float' text shouldn't overflow the first row).</div>
|
||||
|
||||
<div class="grid fit-content">
|
||||
<div class="firstRowFirstColumn">
|
||||
<div class="floatChild">Float</div>
|
||||
<div class="floatChild">Float</div>
|
||||
<div class="floatChild">Float</div>
|
||||
<div class="floatChild">Float</div>
|
||||
</div>
|
||||
<div class="firstRowSecondColumn"></div>
|
||||
<div class="secondRowFirstColumn"></div>
|
||||
<div class="secondRowSecondColumn"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
|
||||
<div>This test checks that grid item's margins do not collapse with its content's margins (single margin in the first row and double between subsequent).</div>
|
||||
|
||||
<div style="float: left">
|
||||
<div><p>XXXXX</p></div>
|
||||
<div style="float:left; margin:20px 0px;">XXXXX</div>
|
||||
<div><p style="float:left; clear:both;">XXXXX</p></div>
|
||||
</div>
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid Layout Test: grid items not collapsing</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=430100">
|
||||
<link rel="match" href="grid-margins-no-collapse-002-ref.html">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that grid item's margins do not collapse with its content's margins." />
|
||||
|
||||
<div>This test checks that grid item's margins do not collapse with its content's margins (single margin in the first row and double between subsequent).</div>
|
||||
|
||||
<div style="display: grid;">
|
||||
<div><p>XXXXX</p></div>
|
||||
<div style="margin:20px 0px;">XXXXX</div>
|
||||
<div><p>XXXXX</p></div>
|
||||
</div>
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: track sizing algo with size restrictions 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/#layout-algorithm"/>
|
||||
<meta name="assert" content="This test ensures that fr tracks are properly sized whenever grid has intrinsic sizes."/>
|
||||
<link rel="issue" href="https://crbug.com/423743"/>
|
||||
<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/>
|
||||
<link href="/css/support/height-keyword-classes.css" rel="stylesheet"/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
div { font: 10px/1 Ahem; }
|
||||
</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="container">
|
||||
<div class="grid" data-expected-width="100" data-expected-height="10">
|
||||
<div>XXX XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid min-content" data-expected-width="30" data-expected-height="20">
|
||||
<div>XXX XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid max-content" data-expected-width="70" data-expected-height="10">
|
||||
<div>XXX XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid fit-content" data-expected-width="70" data-expected-height="10">
|
||||
<div>XXX XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-content">
|
||||
<div class="grid" data-expected-width="40" data-expected-height="50">
|
||||
<div>XXX XXXX XX X XX XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid container" data-expected-width="100" data-expected-height="100">
|
||||
<div style="display: grid; grid-template-columns: 3fr; grid-template-rows: 2fr;" data-expected-width="100" data-expected-height="100">
|
||||
<div>XXX XXXX XX X XX XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid; grid: 1fr 2fr / 2fr 1fr; width: 300px; height: 300px;" data-expected-width="300" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" style="display: grid; grid: 1fr 3fr / 3fr 1fr;" data-expected-width="200" data-expected-height="100">
|
||||
<div style="border: 2px solid magenta;" data-expected-width="150" data-expected-height="25">XXXX</div>
|
||||
<div class="secondRowSecondColumn" style="border: 2px solid cyan;" data-expected-width="50" data-expected-height="75">XXXX XX XX</div>
|
||||
</div>
|
||||
<div class="secondRowSecondColumn" style="display: grid; grid: 3fr 4fr / 4fr 3fr;" data-expected-width="100" data-expected-height="200">
|
||||
<div style="border: 2px solid lime;" data-expected-width="56" data-expected-height="86">XXX XX X</div>
|
||||
<div class="secondRowSecondColumn" style="border: 2px solid navy;" data-expected-width="44" data-expected-height="114">XXXX XXX XXXX XXX XXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: 'auto' sizes with item's margins</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<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."/>
|
||||
<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" data-expected-width="40" data-expected-height="120">
|
||||
<div class="gridItem marginTop firstRowFirstColumn"></div>
|
||||
<div class="gridItem firstRowSecondColumn"></div>
|
||||
<div class="gridItem marginBottom secondRowFirstColumn"></div>
|
||||
<div class="gridItem secondRowSecondColumn"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="grid fit-content" data-expected-width="40" data-expected-height="120">
|
||||
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
|
||||
<div class="gridItem firstRowSecondColumn"></div>
|
||||
<div class="gridItem borderTop borderBottom secondRowFirstColumn"></div>
|
||||
<div class="gridItem secondRowSecondColumn"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="grid fit-content" data-expected-width="40" data-expected-height="120">
|
||||
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
|
||||
<div class="gridItem firstRowSecondColumn"></div>
|
||||
<div class="gridItem borderTop borderBottom secondRowFirstColumn"></div>
|
||||
<div class="gridItem secondRowSecondColumn"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="grid fit-content" data-expected-width="40" data-expected-height="120">
|
||||
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
|
||||
<div class="gridItem firstRowSecondColumn"></div>
|
||||
<div class="gridItem paddingBottom secondRowFirstColumn"></div>
|
||||
<div class="gridItem secondRowSecondColumn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Masking: Test ancestors update as text descendants change</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://bugs.chromium.org/p/chromium/issues/detail?id=901851">
|
||||
<link rel="match" href="reference/clip-path-descendant-text-mutated-001-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="assert" content="This test ensures that ancestors are updated properly when a text descendant of clip path property changes.">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/rendering-utils.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
border-right: 100px solid red;
|
||||
clip-path: url(#clip);
|
||||
}
|
||||
</style>
|
||||
<div id="target"></div>
|
||||
<svg>
|
||||
<clipPath id="clip">
|
||||
<text id="text" y="80" font-family="Ahem" font-size="100">XX</text>
|
||||
</clipPath>
|
||||
</svg>
|
||||
<script>
|
||||
waitForAtLeastOneFrame().then(function() {
|
||||
text.firstChild.data = 'X';
|
||||
takeScreenshot();
|
||||
});
|
||||
</script>
|
|
@ -0,0 +1,2 @@
|
|||
<!DOCTYPE html>
|
||||
<div style="width: 100px; height: 100px; background-color: green"></div>
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: @keyframes applies to :host.</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names">
|
||||
<div id="host"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
host.attachShadow({ mode: "open" }).innerHTML = `
|
||||
<style>
|
||||
@keyframes myanim {
|
||||
from { background: red; }
|
||||
to { background: green; }
|
||||
}
|
||||
:host {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
animation: myanim 10s infinite;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
|
||||
assert_equals(document.getElementById('host').getAnimations().length, 1);
|
||||
}, "@keyframes applies to the shadow host");
|
||||
</script>
|
|
@ -0,0 +1,27 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: @keyframes applies to ::slotted.</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names">
|
||||
<div id="host"><div id="in-document"></div></div>
|
||||
<script>
|
||||
test(function() {
|
||||
host.attachShadow({ mode: "open" }).innerHTML = `
|
||||
<style>
|
||||
@keyframes myanim {
|
||||
from { background: red; }
|
||||
to { background: green; }
|
||||
}
|
||||
::slotted(#in-document) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
animation: myanim 10s infinite;
|
||||
}
|
||||
</style>
|
||||
<slot />
|
||||
`;
|
||||
|
||||
assert_equals(document.getElementById('in-document').getAnimations().length, 1);
|
||||
}, "@keyframes in shadow tree applies to the slotted element");
|
||||
</script>
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: @keyframes should not leak out of shadow tree.</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names">
|
||||
<style>
|
||||
#host {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
animation: myanim 10s infinite;
|
||||
}
|
||||
</style>
|
||||
<div id="host"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
host.attachShadow({ mode: "open" }).innerHTML = `
|
||||
<style>
|
||||
@keyframes myanim {
|
||||
from { background: red; }
|
||||
to { background: green; }
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
|
||||
assert_equals(document.getElementById('host').getAnimations().length, 0);
|
||||
}, "@keyframes should not leak out of the shadow tree.");
|
||||
</script>
|
|
@ -18,17 +18,18 @@ src: url(../resources/UnderlineTest-Far.ttf);
|
|||
}
|
||||
|
||||
.test {
|
||||
text-decoration: underline;
|
||||
text-underline-position: from-font;
|
||||
font-size: 64px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.close_underline {
|
||||
text-decoration: underline;
|
||||
font-family: underline-close;
|
||||
}
|
||||
|
||||
.far_underline {
|
||||
text-decoration: underline;
|
||||
font-family: underline-far;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -14,18 +14,19 @@ src: url(resources/UnderlineTest-VF.ttf);
|
|||
}
|
||||
|
||||
.test {
|
||||
text-decoration: underline;
|
||||
text-underline-position: from-font;
|
||||
font-size: 64px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.close_underline {
|
||||
text-decoration: underline;
|
||||
font-family: underline-variable, sans-serif;
|
||||
font-variation-settings: 'UNDO' 1;
|
||||
}
|
||||
|
||||
.far_underline {
|
||||
text-decoration: underline;
|
||||
font-family: underline-variable, sans-serif;
|
||||
font-variation-settings: 'UNDO' 1000;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Filters: Crash when a SVG filter is deleted</title>
|
||||
<link rel="author" title="Stephen White" href="mailto:senorblanco@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterElement">
|
||||
<link rel="issue" href="https://bugs.webkit.org/show_bug.cgi?id=90405">
|
||||
<meta name="assert" content="Check that crash doesn't happen when a SVG filter is deleted that used to be referenced by an HTML element but is no longer.">
|
||||
<body>
|
||||
<img id="html" style="filter: url(#MyFilter);" src="support/color-palette.png">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1" id="svg">
|
||||
<defs>
|
||||
<filter id="MyFilter">
|
||||
<feColorMatrix type="hueRotate" values="180"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
<script>
|
||||
html = document.getElementById('html');
|
||||
html.style = "";
|
||||
svg = document.getElementById('svg');
|
||||
svg.parentNode.removeChild(svg);
|
||||
</script>
|
||||
</body>
|
|
@ -0,0 +1,42 @@
|
|||
/* In the current spec for heights, min-content, max-content and fit-content are
|
||||
* equivalent.
|
||||
*/
|
||||
|
||||
.min-content {
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
.max-content {
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.fit-content {
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.max-height-min-content {
|
||||
max-height: min-content;
|
||||
}
|
||||
|
||||
.max-height-max-content {
|
||||
max-height: max-content;
|
||||
}
|
||||
|
||||
.max-height-fit-content {
|
||||
max-height: -moz-fit-content;
|
||||
max-height: fit-content;
|
||||
}
|
||||
|
||||
.min-height-min-content {
|
||||
min-height: min-content;
|
||||
}
|
||||
|
||||
.min-height-max-content {
|
||||
min-height: max-content;
|
||||
}
|
||||
|
||||
.min-height-fit-content {
|
||||
min-height: -moz-fit-content;
|
||||
min-height: fit-content;
|
||||
}
|
|
@ -3,88 +3,44 @@
|
|||
unbreakable line box.
|
||||
*/
|
||||
.min-content {
|
||||
/* Webkit, but not actually implemented outside deprecated flexbox */
|
||||
width: min-intrinsic;
|
||||
width: -webkit-min-content;
|
||||
width: -moz-min-content;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.max-content {
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
/*
|
||||
Identical to auto except for elements with an instrinsic width like an
|
||||
img where this overrides the intrinsic width to get regular block "auto".
|
||||
*/
|
||||
.fill-available {
|
||||
width: -webkit-fill-available;
|
||||
/* Firefox is missing the fill- prefix because they followed an older spec */
|
||||
width: -moz-available;
|
||||
width: fill-available;
|
||||
}
|
||||
|
||||
/*
|
||||
Shrink wrap just like floating.
|
||||
max(min-content, min(max-content, fill-available))
|
||||
*/
|
||||
.fit-content {
|
||||
/* Webkit, but only outside a deprecated flexbox. */
|
||||
width: intrinsic;
|
||||
width: -webkit-fit-content;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.max-width-min-content {
|
||||
max-width: -webkit-min-content;
|
||||
max-width: -moz-min-content;
|
||||
max-width: min-content;
|
||||
}
|
||||
|
||||
.max-width-max-content {
|
||||
max-width: -webkit-max-content;
|
||||
max-width: -moz-max-content;
|
||||
max-width: max-content;
|
||||
}
|
||||
|
||||
.max-width-fill-available {
|
||||
max-width: -webkit-fill-available;
|
||||
max-width: -moz-available;
|
||||
max-width: fill-available;
|
||||
}
|
||||
|
||||
.max-width-fit-content {
|
||||
max-width: intrinsic;
|
||||
max-width: -webkit-fit-content;
|
||||
max-width: -moz-fit-content;
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
.min-width-min-content {
|
||||
min-width: -webkit-min-content;
|
||||
min-width: -moz-min-content;
|
||||
min-width: min-content;
|
||||
}
|
||||
|
||||
.min-width-max-content {
|
||||
min-width: -webkit-max-content;
|
||||
min-width: -moz-max-content;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.min-width-fill-available {
|
||||
min-width: -webkit-fill-available;
|
||||
min-width: -moz-available;
|
||||
min-width: fill-available;
|
||||
}
|
||||
|
||||
.min-width-fit-content {
|
||||
min-width: intrinsic;
|
||||
min-width: -webkit-fit-content;
|
||||
min-width: -moz-fit-content;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
|
|
@ -50,6 +50,39 @@ test_with_window(function (contentWindow) {
|
|||
assert_connected_log_entry(log[5], element2);
|
||||
}, 'Upgrading a custom element must invoke attributeChangedCallback and connectedCallback before start upgrading another element');
|
||||
|
||||
test_with_window(function (contentWindow) {
|
||||
const contentDocument = contentWindow.document;
|
||||
contentDocument.write('<test-element>');
|
||||
|
||||
const element = contentDocument.querySelector('test-element');
|
||||
assert_equals(Object.getPrototypeOf(element), contentWindow.HTMLElement.prototype);
|
||||
|
||||
let log = [];
|
||||
class TestElement extends contentWindow.HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.id = "foo";
|
||||
this.setAttribute('id', 'foo');
|
||||
this.removeAttribute('id');
|
||||
this.style.fontSize = '10px';
|
||||
log.push(create_constructor_log(this));
|
||||
}
|
||||
connectedCallback(...args) {
|
||||
log.push(create_connected_callback_log(this, ...args));
|
||||
}
|
||||
attributeChangedCallback(...args) {
|
||||
log.push(create_attribute_changed_callback_log(this, ...args));
|
||||
}
|
||||
static get observedAttributes() { return ['id', 'style']; }
|
||||
}
|
||||
contentWindow.customElements.define('test-element', TestElement);
|
||||
assert_equals(Object.getPrototypeOf(element), TestElement.prototype);
|
||||
|
||||
assert_equals(log.length, 2);
|
||||
assert_constructor_log_entry(log[0], element);
|
||||
assert_connected_log_entry(log[1], element);
|
||||
}, 'Upgrading a custom element must not invoke attributeChangedCallback for the attribute that is changed during upgrading');
|
||||
|
||||
test_with_window(function (contentWindow) {
|
||||
const contentDocument = contentWindow.document;
|
||||
contentDocument.write('<test-element id="first-element">');
|
||||
|
|
|
@ -274,8 +274,8 @@ function reportload() {
|
|||
assert_false( cloneobj === iframe.contentWindow.history.state );
|
||||
}, 'history.state should be a clone of the original object, not a reference to it (2)');
|
||||
test(function () {
|
||||
assert_false( iframe.contentWindow.history.state === ev.state );
|
||||
}, 'history.state should be a separate clone of the object, not a reference to the object passed to the event handler');
|
||||
assert_true( iframe.contentWindow.history.state === ev.state );
|
||||
}, 'history.state should be identical to the object passed to the event handler unless history.state is updated');
|
||||
try {
|
||||
iframe.contentWindow.persistval = true;
|
||||
iframe.contentWindow.history.pushState('','', location.href.replace(/\/[^\/]*$/,'/blank3.html') );
|
||||
|
|
|
@ -249,8 +249,8 @@ function reportload() {
|
|||
assert_false( cloneobj === iframe.contentWindow.history.state );
|
||||
}, 'history.state should be a clone of the original object, not a reference to it (2)');
|
||||
test(function () {
|
||||
assert_false( iframe.contentWindow.history.state === ev.state );
|
||||
}, 'history.state should be a separate clone of the object, not a reference to the object passed to the event handler');
|
||||
assert_true( iframe.contentWindow.history.state === ev.state );
|
||||
}, 'history.state should be identical to the object passed to the event handler unless history.state is updated');
|
||||
try {
|
||||
iframe.contentWindow.persistval = true;
|
||||
iframe.contentWindow.history.replaceState('','', location.href.replace(/\/[^\/]*$/,'/blank3.html') );
|
||||
|
|
|
@ -0,0 +1,45 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>currentSrc is right even if underlying image is a shared blob</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1625786">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<img id="first">
|
||||
<img id="second">
|
||||
<script>
|
||||
promise_test(async t => {
|
||||
let canvas = document.createElement("canvas");
|
||||
canvas.width = 100;
|
||||
canvas.height = 100;
|
||||
let ctx = canvas.getContext("2d");
|
||||
ctx.fillStyle = "green";
|
||||
ctx.rect(0, 0, 100, 100);
|
||||
ctx.fill();
|
||||
|
||||
let blob = await new Promise(resolve => canvas.toBlob(resolve));
|
||||
|
||||
let first = document.querySelector("#first");
|
||||
let second = document.querySelector("#second");
|
||||
|
||||
let firstLoad = new Promise(resolve => {
|
||||
first.addEventListener("load", resolve, { once: true });
|
||||
});
|
||||
|
||||
let secondLoad = new Promise(resolve => {
|
||||
second.addEventListener("load", resolve, { once: true });
|
||||
});
|
||||
|
||||
let uri1 = URL.createObjectURL(blob);
|
||||
let uri2 = URL.createObjectURL(blob);
|
||||
first.src = uri1;
|
||||
second.src = uri2;
|
||||
|
||||
await firstLoad;
|
||||
await secondLoad;
|
||||
|
||||
assert_equals(first.src, first.currentSrc);
|
||||
assert_equals(second.src, second.currentSrc);
|
||||
});
|
||||
</script>
|
|
@ -165,65 +165,6 @@ partial dictionary AuthenticationExtensionsClientInputs {
|
|||
USVString appidExclude;
|
||||
};
|
||||
|
||||
partial dictionary AuthenticationExtensionsClientInputs {
|
||||
USVString txAuthSimple;
|
||||
};
|
||||
|
||||
partial dictionary AuthenticationExtensionsClientOutputs {
|
||||
USVString txAuthSimple;
|
||||
};
|
||||
|
||||
dictionary txAuthGenericArg {
|
||||
required USVString contentType; // MIME-Type of the content, e.g., "image/png"
|
||||
required ArrayBuffer content;
|
||||
};
|
||||
|
||||
partial dictionary AuthenticationExtensionsClientInputs {
|
||||
txAuthGenericArg txAuthGeneric;
|
||||
};
|
||||
|
||||
partial dictionary AuthenticationExtensionsClientOutputs {
|
||||
ArrayBuffer txAuthGeneric;
|
||||
};
|
||||
|
||||
typedef sequence<AAGUID> AuthenticatorSelectionList;
|
||||
|
||||
partial dictionary AuthenticationExtensionsClientInputs {
|
||||
AuthenticatorSelectionList authnSel;
|
||||
};
|
||||
|
||||
typedef BufferSource AAGUID;
|
||||
|
||||
partial dictionary AuthenticationExtensionsClientOutputs {
|
||||
boolean authnSel;
|
||||
};
|
||||
|
||||
partial dictionary AuthenticationExtensionsClientInputs {
|
||||
boolean exts;
|
||||
};
|
||||
|
||||
typedef sequence<USVString> AuthenticationExtensionsSupported;
|
||||
|
||||
partial dictionary AuthenticationExtensionsClientOutputs {
|
||||
AuthenticationExtensionsSupported exts;
|
||||
};
|
||||
|
||||
partial dictionary AuthenticationExtensionsClientInputs {
|
||||
boolean uvi;
|
||||
};
|
||||
|
||||
partial dictionary AuthenticationExtensionsClientOutputs {
|
||||
ArrayBuffer uvi;
|
||||
};
|
||||
|
||||
partial dictionary AuthenticationExtensionsClientInputs {
|
||||
boolean loc;
|
||||
};
|
||||
|
||||
partial dictionary AuthenticationExtensionsClientOutputs {
|
||||
GeolocationCoordinates loc;
|
||||
};
|
||||
|
||||
partial dictionary AuthenticationExtensionsClientInputs {
|
||||
boolean uvm;
|
||||
};
|
||||
|
@ -235,11 +176,6 @@ partial dictionary AuthenticationExtensionsClientOutputs {
|
|||
UvmEntries uvm;
|
||||
};
|
||||
|
||||
dictionary AuthenticatorBiometricPerfBounds {
|
||||
float FAR;
|
||||
float FRR;
|
||||
};
|
||||
|
||||
partial dictionary AuthenticationExtensionsClientInputs {
|
||||
boolean credProps;
|
||||
};
|
||||
|
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Declarative Shadow DOM</title>
|
||||
<link rel='author' title='Mason Freed' href='mailto:masonfreed@chromium.org'>
|
||||
<link rel='help' href='https://github.com/whatwg/dom/issues/831'>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
let templatesSeen = 0;
|
||||
function myObserver(mutationsList, observer) {
|
||||
for (let mutation of mutationsList) {
|
||||
for (let n of mutation.addedNodes) {
|
||||
if (n.localName === 'template') {
|
||||
templatesSeen++;
|
||||
switch (mutation.target.id) {
|
||||
case 'openhost':
|
||||
case 'closedhost':
|
||||
const shadowroot = n.getAttribute('shadowroot');
|
||||
assert_in_array(shadowroot, ['open','closed'], 'Declarative template should have shadowroot attribute');
|
||||
assert_equals(n.content, null, 'Declarative template content should be null');
|
||||
assert_equals(n.innerHTML, "", 'Declarative template innerHTML should be empty');
|
||||
|
||||
// Make sure removing the shadowroot attribute doesn't affect things.
|
||||
n.removeAttribute('shadowroot');
|
||||
assert_equals(n.content, null, 'Declarative template content should *still* be null');
|
||||
assert_equals(n.innerHTML, "", 'Declarative template innerHTML should *still* be empty');
|
||||
break;
|
||||
case 'noroot':
|
||||
// Make sure adding 'shadowroot' attribute doesn't trigger a shadow root,
|
||||
// even if added before parsing completes.
|
||||
n.setAttribute('shadowroot','open');
|
||||
assert_not_equals(n.content, null, 'Regular template should have content, even after adding shadowroot attribute');
|
||||
assert_not_equals(n.innerHTML, "", 'Regular template should have innerHTML, even after adding shadowroot attribute');
|
||||
break;
|
||||
default:
|
||||
assert_unreached('Unrecognized template');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const observer = new MutationObserver(myObserver);
|
||||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
assert_equals(templatesSeen, 0, 'No mutations yet');
|
||||
</script>
|
||||
|
||||
<div id=openhost>
|
||||
<template shadowroot=open>
|
||||
<slot></slot>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div id=closedhost>
|
||||
<template shadowroot=closed>
|
||||
<slot></slot>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div id=noroot>
|
||||
<template>
|
||||
<slot></slot>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(t => {
|
||||
t.add_cleanup(function() { observer.disconnect(); });
|
||||
|
||||
assert_equals(templatesSeen, 3);
|
||||
|
||||
// Open shadow root
|
||||
let host = document.querySelector('#openhost');
|
||||
assert_equals(host.querySelector('template'), null, 'No leftover template node');
|
||||
assert_true(!!host.shadowRoot, 'Shadow root should exist');
|
||||
|
||||
// Closed shadow root
|
||||
host = document.querySelector('#closedhost');
|
||||
assert_equals(host.querySelector('template'), null, 'No leftover template node');
|
||||
assert_true(!host.shadowRoot, 'Closed shadow root (can\'t detect)');
|
||||
|
||||
// No shadow root
|
||||
host = document.querySelector('#noroot');
|
||||
assert_true(!!host.querySelector('template'), 'Template node still present');
|
||||
assert_true(!host.shadowRoot, 'No shadow root');
|
||||
},'Declarative Shadow DOM: template .content() should be null');
|
||||
</script>
|
||||
</body>
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<svg width="200" height="200">
|
||||
<foreignObject x="0" y="0" width="200" height="200">
|
||||
<div style="width: 200px; height: 200px; background: red"></div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
<svg width="200" height="200">
|
||||
<foreignObject x="0" y="0" width="200" height="200">
|
||||
<div style="width: 200px; height: 200px; background: red"></div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
<svg width="200" height="200">
|
||||
<foreignObject x="0" y="0" width="200" height="200">
|
||||
<div style="width: 200px; height: 200px;"></div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
<svg width="200" height="200">
|
||||
<foreignObject x="0" y="0" width="200" height="200">
|
||||
<div style="width: 200px; height: 200px;"></div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
|
||||
<!-- make sure masking actually works -->
|
||||
<svg width="200" height="200">
|
||||
<rect x="0" y="0" width="100" height="50" fill="red"></rect>
|
||||
<rect x="0" y="100" width="100" height="50" fill="red"></rect>
|
||||
</svg>
|
||||
<svg width="200" height="200">
|
||||
<rect x="0" y="0" width="100" height="50" fill="red"></rect>
|
||||
<rect x="0" y="100" width="100" height="50" fill="red"></rect>
|
||||
</svg>
|
||||
|
||||
<!-- make sure masking works on active content -->
|
||||
<svg width="200" height="200">
|
||||
<rect x="0" y="0" width="100" height="50" fill="red"></rect>
|
||||
<rect x="0" y="100" width="100" height="50" fill="red"></rect>
|
||||
</svg>
|
||||
<svg width="200" height="200">
|
||||
<rect x="0" y="0" width="100" height="50" fill="red"></rect>
|
||||
<rect x="0" y="100" width="100" height="50" fill="red"></rect>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="match" href="display-none-mask-ref.html" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<svg width="200" height="200">
|
||||
<foreignObject x="0" y="0" width="200" height="200" style="mask: url('#notfound');">
|
||||
<div style="width: 200px; height: 200px; background: red"></div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
<svg width="200" height="200">
|
||||
<foreignObject x="0" y="0" width="200" height="200" style="mask: url('#noneMask');">
|
||||
<div style="width: 200px; height: 200px; background: red"></div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
<svg width="200" height="200">
|
||||
<foreignObject x="0" y="0" width="200" height="200">
|
||||
<div style="width: 200px; height: 200px; background: red; mask: url('#notfound');"></div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
<svg width="200" height="200">
|
||||
<foreignObject x="0" y="0" width="200" height="200">
|
||||
<div style="width: 200px; height: 200px; background: red; mask: url('#noneMask');"></div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
|
||||
<svg width="200" height="200" style="display:none">
|
||||
<defs>
|
||||
<mask id="noneMask">
|
||||
<rect x="0" y="0" width="200" height="200" fill="#4d4d4d"></rect>
|
||||
</mask>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<!-- make sure masking actually works -->
|
||||
<svg width="200" height="200">
|
||||
<defs>
|
||||
<mask id="aMask">
|
||||
<rect x="0" y="0" width="100" height="50" fill="#ffffff"></rect>
|
||||
<rect x="0" y="100" width="100" height="50" fill="#ffffff"></rect>
|
||||
</mask>
|
||||
</defs>
|
||||
<foreignObject x="0" y="0" width="200" height="200" style="mask: url('#aMask');">
|
||||
<div style="width: 200px; height: 200px; background: red;"></div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
<svg width="200" height="200">
|
||||
<foreignObject x="0" y="0" width="200" height="200">
|
||||
<div style="width: 200px; height: 200px; background: red; mask: url('#aMask');"></div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
|
||||
<!-- make sure masking works on active content -->
|
||||
<svg width="200" height="200">
|
||||
<foreignObject x="0" y="0" width="200" height="200" style="mask: url('#aMask');">
|
||||
<div style="width: 200px; height: 200px; background: red; will-change: transform"></div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
<svg width="200" height="200">
|
||||
<foreignObject x="0" y="0" width="200" height="200">
|
||||
<div style="width: 200px; height: 200px; background: red; will-change: transform; mask: url('#aMask');"></div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<rect id="green-rect" width="100" height="100" fill="green"/>
|
||||
</svg>
|
After Width: | Height: | Size: 112 B |
|
@ -0,0 +1,14 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
|
||||
<title>Adopting a <use> (from an inactive document) requests an external resource</title>
|
||||
<h:link rel="match" href="reference/green-100x100.svg"/>
|
||||
<script type="text/plain" template=""><![CDATA[
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<use href="support/sprites.svg#green-rect"/>
|
||||
</svg>]]>
|
||||
</script>
|
||||
<script>
|
||||
let text = document.querySelector('script[template]').textContent;
|
||||
let doc = new DOMParser().parseFromString(text, 'image/svg+xml');
|
||||
document.documentElement.appendChild(doc.documentElement);
|
||||
</script>
|
||||
</svg>
|
After Width: | Height: | Size: 647 B |
|
@ -41,7 +41,10 @@ job_path_map = {
|
|||
"css/css-ui/",
|
||||
"WebIDL"],
|
||||
"wpt_integration": ["tools/"],
|
||||
"wptrunner_infrastructure": ["infrastructure/", "tools/", "resources/"],
|
||||
"wptrunner_infrastructure": ["infrastructure/",
|
||||
"tools/",
|
||||
"resources/",
|
||||
"webdriver/tests/support"],
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -134,3 +134,7 @@ def test_wpt_infrastructure():
|
|||
includes=["wptrunner_infrastructure"]) == {"wptrunner_infrastructure"}
|
||||
assert jobs.get_jobs(["infrastructure/assumptions/ahem.html"],
|
||||
includes=["wptrunner_infrastructure"]) == {"wptrunner_infrastructure"}
|
||||
|
||||
def test_wdspec_support():
|
||||
assert jobs.get_jobs(["webdriver/tests/support/__init__.py"],
|
||||
includes=["wptrunner_infrastructure"]) == {"wptrunner_infrastructure"}
|
||||
|
|
|
@ -1,58 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Tests the Trust Token API's hasTrustToken function (tentative: the API is a prototype).</title>
|
||||
<link rel="help" href="https://github.com/WICG/trust-token-api#trust-token-redemption" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
promise_test((t) => {
|
||||
return promise_rejects_js(t, TypeError, document.hasTrustToken(
|
||||
"http://not-a-secure-url.example"));
|
||||
},
|
||||
'hasTrustToken requires a secure URL as its issuer argument.');
|
||||
|
||||
promise_test((t) => {
|
||||
return promise_rejects_js(t, TypeError, document.hasTrustToken(
|
||||
"file:///"));
|
||||
},
|
||||
'hasTrustToken requires a HTTP(S) URL as its issuer argument.');
|
||||
|
||||
// These hasTrustToken calls all affect global state: each call in the form
|
||||
// of hasTrustToken(issuer) will result in |issuer| becoming associated in
|
||||
// persistent storage with the calling top frame's origin.
|
||||
//
|
||||
// TODO(davidvc, crbug.com/1061764): Add a way to reset the global state after
|
||||
// the test concludes.
|
||||
//
|
||||
// TODO(davidvc, crbug.com/1063140): Once it's possible to write WPTs that
|
||||
// result in a trust token being deposited in storage, this should be
|
||||
// expanded to cover the case where the user _does_ have a token.
|
||||
promise_test(async (t) => {
|
||||
let result = await document.hasTrustToken("https://issuer.example/");
|
||||
assert_false(result, "The client should not possess any trust tokens for " +
|
||||
"https://issuer.example since it has not executed an issuance operation" +
|
||||
" against that issuer.");
|
||||
|
||||
result = await document.hasTrustToken("https://issuer2.example/");
|
||||
assert_false(result, "The client should not possess any trust tokens for" +
|
||||
" https://issuer2.example since it has not executed an issuance " +
|
||||
"operation against that issuer.");
|
||||
|
||||
await promise_rejects_dom(t, "OperationError", document.hasTrustToken(
|
||||
"https://issuer3.example/"),
|
||||
"The first two hasTrustToken operations associated this top-level" +
|
||||
" origin with the maximum number of issuers (2), so an attempt to " +
|
||||
" execute hasTrustToken against another issuer should fail.");
|
||||
|
||||
result = await document.hasTrustToken("https://issuer2.example/");
|
||||
assert_false(result, "Since this top-level origin is already associated " +
|
||||
"with https://issuer2.example, subsequent hasTrustToken operations should " +
|
||||
"not error out even though the top-level origin is at its " +
|
||||
"number-of-issuers limit.");
|
||||
}, "When given a valid, secure origin, hasTrustToken should succeed " +
|
||||
"unless associating that origin with the top-level domain would exceed " +
|
||||
"the top-level origin's number-of-associated-issuers limit.");
|
||||
</script>
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Accumulation for each property</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<script src="property-list.js"></script>
|
||||
<script src="property-types.js"></script>
|
||||
<script src="property-utils.js"></script>
|
||||
<style>
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function() {
|
||||
runAnimationTypeTest(gCSSProperties1, 'testAccumulation');
|
||||
}, 'Setup');
|
||||
</script>
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Accumulation for each property</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<script src="property-list.js"></script>
|
||||
<script src="property-types.js"></script>
|
||||
<script src="property-utils.js"></script>
|
||||
<style>
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function() {
|
||||
runAnimationTypeTest(gCSSProperties2, 'testAccumulation');
|
||||
}, 'Setup');
|
||||
</script>
|
|
@ -1,59 +0,0 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Accumulation for each property</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<script src="property-list.js"></script>
|
||||
<script src="property-types.js"></script>
|
||||
<style>
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function() {
|
||||
for (const property in gCSSProperties) {
|
||||
if (!isSupported(property)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const setupFunction = gCSSProperties[property].setup;
|
||||
for (const animationType of gCSSProperties[property].types) {
|
||||
let typeObject;
|
||||
let animationTypeString;
|
||||
if (typeof animationType === 'string') {
|
||||
typeObject = types[animationType];
|
||||
animationTypeString = animationType;
|
||||
} else if (typeof animationType === 'object' &&
|
||||
animationType.type && typeof animationType.type === 'string') {
|
||||
typeObject = types[animationType.type];
|
||||
animationTypeString = animationType.type;
|
||||
}
|
||||
|
||||
// First, test that the animation type object has 'testAccumulation'.
|
||||
// We use test() function here so that we can continue the remainder tests
|
||||
// even if this test fails.
|
||||
test(t => {
|
||||
assert_own_property(typeObject, 'testAccumulation', animationTypeString +
|
||||
' should have testAccumulation property');
|
||||
assert_equals(typeof typeObject.testAccumulation, 'function',
|
||||
'testAccumulation method should be a function');
|
||||
}, `${property} (type: ${animationTypeString}) has testAccumulation`
|
||||
+ ' function');
|
||||
|
||||
if (typeObject.testAccumulation &&
|
||||
typeof typeObject.testAccumulation === 'function') {
|
||||
typeObject.testAccumulation(property,
|
||||
setupFunction,
|
||||
animationType.options);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 'Setup');
|
||||
</script>
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Addition for each property</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<script src="property-list.js"></script>
|
||||
<script src="property-types.js"></script>
|
||||
<script src="property-utils.js"></script>
|
||||
<style>
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function() {
|
||||
runAnimationTypeTest(gCSSProperties1, 'testAddition');
|
||||
}, "Setup");
|
||||
</script>
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Addition for each property</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<script src="property-list.js"></script>
|
||||
<script src="property-types.js"></script>
|
||||
<script src="property-utils.js"></script>
|
||||
<style>
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function() {
|
||||
runAnimationTypeTest(gCSSProperties2, 'testAddition');
|
||||
}, "Setup");
|
||||
</script>
|
|
@ -1,59 +0,0 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Addition for each property</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<script src="property-list.js"></script>
|
||||
<script src="property-types.js"></script>
|
||||
<style>
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function() {
|
||||
for (const property in gCSSProperties) {
|
||||
if (!isSupported(property)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const setupFunction = gCSSProperties[property].setup;
|
||||
for (const animationType of gCSSProperties[property].types) {
|
||||
let typeObject;
|
||||
let animationTypeString;
|
||||
if (typeof animationType === 'string') {
|
||||
typeObject = types[animationType];
|
||||
animationTypeString = animationType;
|
||||
} else if (typeof animationType === 'object' &&
|
||||
animationType.type && typeof animationType.type === 'string') {
|
||||
typeObject = types[animationType.type];
|
||||
animationTypeString = animationType.type;
|
||||
}
|
||||
|
||||
// First, test that the animation type object has 'testAddition'.
|
||||
// We use test() function here so that we can continue the remainder tests
|
||||
// even if this test fails.
|
||||
test(t => {
|
||||
assert_own_property(typeObject, 'testAddition', animationTypeString +
|
||||
' should have testAddition property');
|
||||
assert_equals(typeof typeObject.testAddition, 'function',
|
||||
'testAddition method should be a function');
|
||||
}, `${property} (type: ${animationTypeString}) has testAddition`
|
||||
+ ' function');
|
||||
|
||||
if (typeObject.testAddition &&
|
||||
typeof typeObject.testAddition === 'function') {
|
||||
typeObject.testAddition(property,
|
||||
setupFunction,
|
||||
animationType.options);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, "Setup");
|
||||
</script>
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Interpolation for each property</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<script src="property-list.js"></script>
|
||||
<script src="property-types.js"></script>
|
||||
<script src="property-utils.js"></script>
|
||||
<style>
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function() {
|
||||
runAnimationTypeTest(gCSSProperties1, 'testInterpolation');
|
||||
}, 'Setup');
|
||||
</script>
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Interpolation for each property</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<script src="property-list.js"></script>
|
||||
<script src="property-types.js"></script>
|
||||
<script src="property-utils.js"></script>
|
||||
<style>
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function() {
|
||||
runAnimationTypeTest(gCSSProperties2, 'testInterpolation');
|
||||
}, 'Setup');
|
||||
</script>
|
|
@ -1,59 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Interpolation for each property</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-types">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<script src="property-list.js"></script>
|
||||
<script src="property-types.js"></script>
|
||||
<style>
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function() {
|
||||
for (const property in gCSSProperties) {
|
||||
if (!isSupported(property)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const setupFunction = gCSSProperties[property].setup;
|
||||
for (const animationType of gCSSProperties[property].types) {
|
||||
let typeObject;
|
||||
let animationTypeString;
|
||||
if (typeof animationType === 'string') {
|
||||
typeObject = types[animationType];
|
||||
animationTypeString = animationType;
|
||||
} else if (typeof animationType === 'object' &&
|
||||
animationType.type && typeof animationType.type === 'string') {
|
||||
typeObject = types[animationType.type];
|
||||
animationTypeString = animationType.type;
|
||||
}
|
||||
|
||||
// First, test that the animation type object has 'testInterpolation'.
|
||||
// We use test() function() here so that we can continue the remainder tests
|
||||
// even if this test fails.
|
||||
test(t => {
|
||||
assert_own_property(typeObject, 'testInterpolation', animationTypeString +
|
||||
' should have testInterpolation property');
|
||||
assert_equals(typeof typeObject.testInterpolation, 'function',
|
||||
'testInterpolation method should be a function');
|
||||
}, `${property} (type: ${animationTypeString}) has testInterpolation`
|
||||
+ ' function');
|
||||
|
||||
if (typeObject.testInterpolation &&
|
||||
typeof typeObject.testInterpolation === 'function') {
|
||||
typeObject.testInterpolation(property,
|
||||
setupFunction,
|
||||
animationType.options);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 'Setup');
|
||||
</script>
|
|
@ -1,6 +1,6 @@
|
|||
'use strict';
|
||||
|
||||
const gCSSProperties = {
|
||||
const gCSSProperties1 = {
|
||||
'align-content': {
|
||||
// https://drafts.csswg.org/css-align/#propdef-align-content
|
||||
types: [
|
||||
|
@ -701,6 +701,9 @@ const gCSSProperties = {
|
|||
{ type: 'discrete', options: [ [ '1 2', '3 4' ] ] }
|
||||
]
|
||||
},
|
||||
};
|
||||
|
||||
const gCSSProperties2 = {
|
||||
'inline-size': {
|
||||
// https://drafts.csswg.org/css-logical-props/#propdef-inline-size
|
||||
types: [
|
||||
|
|
|
@ -0,0 +1,38 @@
|
|||
'use strict';
|
||||
|
||||
function runAnimationTypeTest(gCSSProperties, testType) {
|
||||
for (const property in gCSSProperties) {
|
||||
if (!isSupported(property)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const setupFunction = gCSSProperties[property].setup;
|
||||
for (const animationType of gCSSProperties[property].types) {
|
||||
let typeObject;
|
||||
let animationTypeString;
|
||||
if (typeof animationType === 'string') {
|
||||
typeObject = types[animationType];
|
||||
animationTypeString = animationType;
|
||||
} else if (typeof animationType === 'object' &&
|
||||
animationType.type && typeof animationType.type === 'string') {
|
||||
typeObject = types[animationType.type];
|
||||
animationTypeString = animationType.type;
|
||||
}
|
||||
|
||||
// First, test that the animation type object has 'testAccumulation', or
|
||||
// 'testAddition', or 'testInterpolation'.
|
||||
// We use test() function here so that we can continue the remainder tests
|
||||
// even if this test fails.
|
||||
test(t => {
|
||||
assert_own_property(typeObject, testType, animationTypeString +
|
||||
` should have ${testType} property`);
|
||||
assert_equals(typeof typeObject[testType], 'function',
|
||||
`${testType} method should be a function`);
|
||||
}, `${property} (type: ${animationTypeString}) has ${testType} function`);
|
||||
|
||||
if (typeObject[testType] && typeof typeObject[testType] === 'function') {
|
||||
typeObject[testType](property, setupFunction, animationType.options);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -2,12 +2,12 @@
|
|||
* AUTO-GENERATED - DO NOT EDIT. Source: https://github.com/gpuweb/cts
|
||||
**/
|
||||
|
||||
// https://github.com/gpuweb/gpuweb/blob/402b69138fbedf4a3c9c85cd1bf7e1cc27c1b34e/spec/index.bs
|
||||
// https://github.com/gpuweb/gpuweb/blob/0a48816412b5d08a5fb8b89005e019165a1a2c63/spec/index.bs
|
||||
// String enums
|
||||
export let ExtensionName;
|
||||
|
||||
(function (ExtensionName) {
|
||||
ExtensionName["AnisotropicFiltering"] = "anisotropic-filtering";
|
||||
ExtensionName["TextureCompressionBC"] = "texture-compression-bc";
|
||||
})(ExtensionName || (ExtensionName = {}));
|
||||
|
||||
export let AddressMode;
|
||||
|
@ -25,8 +25,10 @@ export let BindingType;
|
|||
BindingType["StorageBuffer"] = "storage-buffer";
|
||||
BindingType["ReadonlyStorageBuffer"] = "readonly-storage-buffer";
|
||||
BindingType["Sampler"] = "sampler";
|
||||
BindingType["ComparisonSampler"] = "comparison-sampler";
|
||||
BindingType["SampledTexture"] = "sampled-texture";
|
||||
BindingType["StorageTexture"] = "storage-texture";
|
||||
BindingType["ReadonlyStorageTexture"] = "readonly-storage-texture";
|
||||
BindingType["WriteonlyStorageTexture"] = "writeonly-storage-texture";
|
||||
})(BindingType || (BindingType = {}));
|
||||
|
||||
export let BlendFactor;
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
import { assert } from './util/index.js';
|
||||
import { assert } from './util/util.js';
|
||||
export class SkipTestCase extends Error {} // A Fixture is a class used to instantiate each test case at run time.
|
||||
// A new instance of the Fixture is created for every single test case
|
||||
// (i.e. every time the test function is run).
|
|
@ -3,7 +3,7 @@
|
|||
**/
|
||||
|
||||
import { Logger } from './logger.js';
|
||||
import { makeFilter } from './test_filter/index.js';
|
||||
import { makeFilter } from './test_filter/load_filter.js';
|
||||
import { treeFromFilterResults } from './tree.js';
|
||||
|
||||
function makeQuerySplitterTree(caselist, expectationStrings) {
|
|
@ -3,7 +3,7 @@
|
|||
**/
|
||||
|
||||
/// <reference types="@webgpu/types" />
|
||||
import { assert } from '../util/index.js';
|
||||
import { assert } from '../util/util.js';
|
||||
let impl = undefined;
|
||||
export function getGPU() {
|
||||
if (impl) {
|
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