Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-06 00:25:37 +00:00
Code Issues Projects Releases Packages Wiki Activity

Sync WPT with upstream (30-04-2025) (#36785)

Browse source 
Automated downstream sync of changes from upstream as of 30-04-2025
[no-wpt-sync]

Signed-off-by: WPT Sync Bot <ghbot+wpt-sync@servo.org>
This commit is contained in:
Servo WPT Sync 2025-04-30 21:46:03 +02:00 • committed by GitHub
parent c3fcefdc32
commit bfa0a61375
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
254 changed files with 8105 additions and 2275 deletions
Download patch file Download diff file Expand all files Collapse all files

1622
tests/wpt/meta/MANIFEST.json vendored
View file

File diff suppressed because it is too large Load diff

8
tests/wpt/meta/WebCryptoAPI/idlharness.https.any.js.ini vendored Normal file
View file

@ -0,0 +1,8 @@
[idlharness.https.any.html]
[idl_test setup]
expected: FAIL
[idlharness.https.any.worker.html]
[idl_test setup]
expected: FAIL

2
tests/wpt/meta/css/css-align/abspos/align-self-static-position-003.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[align-self-static-position-003.html]
expected: FAIL

2
tests/wpt/meta/css/css-align/abspos/align-self-static-position-004.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[align-self-static-position-004.html]
expected: FAIL

2
tests/wpt/meta/css/css-align/abspos/align-self-static-position-006.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[align-self-static-position-006.html]
expected: FAIL

2
tests/wpt/meta/css/css-align/abspos/align-self-static-position-007.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[align-self-static-position-007.html]
expected: FAIL

2
tests/wpt/meta/css/css-align/abspos/align-self-static-position-008.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[align-self-static-position-008.html]
expected: FAIL

2
tests/wpt/meta/css/css-align/abspos/align-self-stretch-auto-margins-aspect-ratio.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[align-self-stretch-auto-margins-aspect-ratio.html]
expected: FAIL

2
tests/wpt/meta/css/css-align/abspos/align-self-stretch-auto-margins.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[align-self-stretch-auto-margins.html]
expected: FAIL

2
tests/wpt/meta/css/css-align/abspos/justify-self-stretch-auto-margins-aspect-ratio.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[justify-self-stretch-auto-margins-aspect-ratio.html]
expected: FAIL

2
tests/wpt/meta/css/css-align/abspos/justify-self-stretch-auto-margins.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[justify-self-stretch-auto-margins.html]
expected: FAIL

18
tests/wpt/meta/css/css-box/parsing/margin-trim-computed.html.ini vendored
View file

@ -46,3 +46,21 @@
[Property margin-trim value 'inline-start inline-end block-start']
expected: FAIL
[Property margin-trim value 'block-start inline-start block-end inline-end']
expected: FAIL
[Property margin-trim value 'block-start block-end inline-end inline-start']
expected: FAIL
[Property margin-trim value 'block-start block-end inline-start inline-end']
expected: FAIL
[Property margin-trim value 'inline-start block-end block-start inline-end']
expected: FAIL
[Property margin-trim value 'inline-start inline-end block-start block-end']
expected: FAIL
[Property margin-trim value 'inline-end block-end inline-start block-start']
expected: FAIL

18
tests/wpt/meta/css/css-box/parsing/margin-trim.html.ini vendored
View file

@ -43,3 +43,21 @@
[e.style['margin-trim'\] = "inline-end block-end inline-start block-start" should set the property value]
expected: FAIL
[e.style['margin-trim'\] = "block inline" should set the property value]
expected: FAIL
[e.style['margin-trim'\] = "inline block" should set the property value]
expected: FAIL
[e.style['margin-trim'\] = "block-start block-end inline-end inline-start" should set the property value]
expected: FAIL
[e.style['margin-trim'\] = "block-start block-end inline-start inline-end" should set the property value]
expected: FAIL
[e.style['margin-trim'\] = "inline-start block-end block-start inline-end" should set the property value]
expected: FAIL
[e.style['margin-trim'\] = "inline-start inline-end block-start block-end" should set the property value]
expected: FAIL

3
tests/wpt/meta/css/css-fonts/parsing/font-palette-values-invalid.html.ini vendored
View file

@ -73,3 +73,6 @@
[CSS Fonts Module Level 4: parsing @font-palette-values 25]
expected: FAIL
[sibling-index() is invalid in base-palette descriptor]
expected: FAIL

3
tests/wpt/meta/css/css-fonts/test_font_feature_values_parsing.html.ini vendored
View file

@ -316,3 +316,6 @@
[basic parse tests - @font-feature-values bongo { @styleset { complex\\ blah: 1; } }]
expected: FAIL
[basic parse tests - @font-feature-values bongo { @stylistic { blah: sibling-index(); } }]
expected: FAIL

2
tests/wpt/meta/css/css-gaps/tentative/multicol/multicol-gap-decorations-001.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[multicol-gap-decorations-001.html]
expected: FAIL

2
tests/wpt/meta/css/css-gaps/tentative/multicol/multicol-gap-decorations-002.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[multicol-gap-decorations-002.html]
expected: FAIL

2
tests/wpt/meta/css/css-gaps/tentative/multicol/multicol-gap-decorations-003.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[multicol-gap-decorations-003.html]
expected: FAIL

2
tests/wpt/meta/css/css-gaps/tentative/multicol/multicol-gap-decorations-004.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[multicol-gap-decorations-004.html]
expected: FAIL

2
tests/wpt/meta/css/css-gaps/tentative/multicol/multicol-gap-decorations-005.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[multicol-gap-decorations-005.html]
expected: FAIL

2
tests/wpt/meta/css/css-gaps/tentative/multicol/multicol-gap-decorations-006.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[multicol-gap-decorations-006.html]
expected: FAIL

2
tests/wpt/meta/css/css-gaps/tentative/multicol/multicol-gap-decorations-007.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[multicol-gap-decorations-007.html]
expected: FAIL

2
tests/wpt/meta/css/css-gaps/tentative/multicol/multicol-gap-decorations-008.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[multicol-gap-decorations-008.html]
expected: FAIL

2
tests/wpt/meta/css/css-gaps/tentative/multicol/multicol-gap-decorations-009.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[multicol-gap-decorations-009.html]
expected: FAIL

2
tests/wpt/meta/css/css-gaps/tentative/multicol/multicol-gap-decorations-010.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[multicol-gap-decorations-010.html]
expected: FAIL

2
tests/wpt/meta/css/css-gaps/tentative/multicol/multicol-gap-decorations-011.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[multicol-gap-decorations-011.html]
expected: FAIL

2
tests/wpt/meta/css/css-gaps/tentative/multicol/multicol-gap-decorations-012.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[multicol-gap-decorations-012.html]
expected: FAIL

2
tests/wpt/meta/css/css-gaps/tentative/multicol/multicol-gap-decorations-013.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[multicol-gap-decorations-013.html]
expected: FAIL

2
tests/wpt/meta/css/css-gaps/tentative/multicol/multicol-gap-decorations-014.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[multicol-gap-decorations-014.html]
expected: FAIL

3
tests/wpt/meta/css/css-grid/alignment/grid-content-alignment-with-abspos-001.html.ini vendored Normal file
View file

@ -0,0 +1,3 @@
[grid-content-alignment-with-abspos-001.html]
[.grid 1]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/replaced-element-016.tentative.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[replaced-element-016.tentative.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/replaced-element-017.tentative.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[replaced-element-017.tentative.html]
expected: FAIL

2
tests/wpt/meta/css/css-sizing/intrinsic-percent-replaced-030.tentative.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[intrinsic-percent-replaced-030.tentative.html]
expected: FAIL

3
tests/wpt/meta/domparsing/XMLSerializer-serializeToString.html.ini vendored
View file

@ -67,3 +67,6 @@
[Check if a prefix bound to an empty namespace URI ("no namespace") serialize]
expected: FAIL
[Drop inconsistent xmlns="..." by matching on local name]
expected: FAIL

6
tests/wpt/meta/domparsing/xml-parse-serialize-roundtrip.html.ini vendored Normal file
View file

@ -0,0 +1,6 @@
[xml-parse-serialize-roundtrip.html]
[DOMParser and XMLSerializer should round trip with CDATA sections: large CDATA]
expected: FAIL
[DOMParser and XMLSerializer should round trip with CDATA sections: multiple CDATAs]
expected: FAIL

3
tests/wpt/meta/html/browsers/browsing-the-web/overlapping-navigations-and-traversals/cross-document-nav-cross-document-nav.html.ini vendored Normal file
View file

@ -0,0 +1,3 @@
[cross-document-nav-cross-document-nav.html]
[cross-document navigation then cross-document navigation]
expected: FAIL

2
tests/wpt/meta/html/obsolete/requirements-for-implementations/the-marquee-element-0/marquee-with-trusted-types.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[marquee-with-trusted-types.html]
expected: FAIL

3
tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-2.html.ini vendored
View file

@ -1,3 +1,4 @@
[iframe_sandbox_popups_escaping-2.html]
expected: TIMEOUT
[Check that popups from a sandboxed iframe escape the sandbox if\n allow-popups-to-escape-sandbox is used]
expected: FAIL
expected: TIMEOUT

2
tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini vendored
View file

@ -1,4 +1,4 @@
[iframe_sandbox_popups_nonescaping-2.html]
expected: TIMEOUT
[Check that popups from a sandboxed iframe do not escape the sandbox]
expected: NOTRUN
expected: FAIL

2
tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-3.html.ini vendored
View file

@ -1,4 +1,4 @@
[iframe_sandbox_popups_nonescaping-3.html]
expected: TIMEOUT
[Check that popups from a sandboxed iframe do not escape the sandbox]
expected: FAIL
expected: NOTRUN

2
tests/wpt/meta/html/semantics/forms/the-select-element/customizable-select-in-page/customizable-select-in-page-appearance.tentative.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[customizable-select-in-page-appearance.tentative.html]
expected: FAIL

3
tests/wpt/meta/html/semantics/scripting-1/the-script-element/module/dynamic-import/blob-url.any.js.ini vendored
View file

@ -15,3 +15,6 @@
[blob-url.any.html]
[Different blob URLs pointing to the same blob resolve to different modules]
expected: FAIL
[Revoking a blob URL immediately after calling import will not fail]
expected: FAIL

3
tests/wpt/meta/html/syntax/serializing-html-fragments/serializing-cdata-in-html-document.html.ini vendored Normal file
View file

@ -0,0 +1,3 @@
[serializing-cdata-in-html-document.html]
[Serializing CDATA in an HTML document]
expected: FAIL

12
tests/wpt/meta/webaudio/the-audio-api/the-audiobuffersourcenode-interface/sub-sample-buffer-stitching.html.ini vendored
View file

@ -760,3 +760,15 @@
[X Stitched sine-wave buffers at sample rate 43800 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.0038986,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[14680\]\t1.7249685451109781e-36\t2.0512369275093079e-1\t2.0512369275093079e-1\t1.0000000000000000e+0\t3.8985999999999999e-3\n\t[14681\]\t1.1480505578219891e-2\t1.4340442419052124e-1\t1.3192391861230135e-1\t9.1994315626575540e-1\t3.8985999999999999e-3\n\tMax AbsError of 2.0512369275093079e-1 at index of 14680.\n\tMax RelError of 1.0000000000000000e+0 at index of 14680.\n]
expected: FAIL
[X Stitched sine-wave buffers at sample rate 43800 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.0038986,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[14680\]\t-2.7021871583080320e+24\t2.0512369275093079e-1\t2.7021871583080320e+24\t1.3173452184234677e+25\t3.8985999999999999e-3\n\t[14681\]\t1.1480505578219891e-2\t1.4340442419052124e-1\t1.3192391861230135e-1\t9.1994315626575540e-1\t3.8985999999999999e-3\n\tMax AbsError of 2.7021871583080320e+24 at index of 14680.\n\tMax RelError of 1.3173452184234677e+25 at index of 14680.\n]
expected: FAIL
[X SNR (-445.2002225707384 dB) is not greater than or equal to 65.737. Got -445.2002225707384.]
expected: FAIL
[X Stitched sine-wave buffers at sample rate 43800 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.0038986,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[14680\]\t-4.2315589002308092e+19\t2.0512369275093079e-1\t4.2315589002308092e+19\t2.0629303438725304e+20\t3.8985999999999999e-3\n\t[14681\]\t1.1480505578219891e-2\t1.4340442419052124e-1\t1.3192391861230135e-1\t9.1994315626575540e-1\t3.8985999999999999e-3\n\tMax AbsError of 4.2315589002308092e+19 at index of 14680.\n\tMax RelError of 2.0629303438725304e+20 at index of 14680.\n]
expected: FAIL
[X SNR (-349.0959218623025 dB) is not greater than or equal to 65.737. Got -349.0959218623025.]
expected: FAIL

19
tests/wpt/meta/webxr/depth-sensing/cpu/depth_sensing_cpu_matchDepthViewIdentity.https.html.ini vendored Normal file
View file

@ -0,0 +1,19 @@
[depth_sensing_cpu_matchDepthViewIdentity.https.html]
expected: ERROR
[Ensures XRViewGeometry values are identity when matchDepthView is unset, `cpu-optimized` - webgl]
expected: TIMEOUT
[Ensures XRViewGeometry values are identity when matchDepthView is unset, `cpu-optimized` - webgl2]
expected: NOTRUN
[Ensures XRViewGeometry values are identity when matchDepthView=true, `cpu-optimized` - webgl]
expected: NOTRUN
[Ensures XRViewGeometry values are identity when matchDepthView=true, `cpu-optimized` - webgl2]
expected: NOTRUN
[Ensures session can be created when matchDepthView=false, `cpu-optimized` - webgl]
expected: NOTRUN
[Ensures session can be created when matchDepthView=false, `cpu-optimized` - webgl2]
expected: NOTRUN

19
tests/wpt/meta/webxr/depth-sensing/gpu/depth_sensing_gpu_matchDepthViewIdentity.https.html.ini vendored Normal file
View file

@ -0,0 +1,19 @@
[depth_sensing_gpu_matchDepthViewIdentity.https.html]
expected: ERROR
[Ensures XRViewGeometry values are identity when matchDepthView is unset, `gpu-optimized` - webgl]
expected: TIMEOUT
[Ensures XRViewGeometry values are identity when matchDepthView is unset, `gpu-optimized` - webgl2]
expected: NOTRUN
[Ensures XRViewGeometry values are identity when matchDepthView=true, `gpu-optimized` - webgl]
expected: NOTRUN
[Ensures XRViewGeometry values are identity when matchDepthView=true, `gpu-optimized` - webgl2]
expected: NOTRUN
[Ensures session can be created when matchDepthView=false, `gpu-optimized` - webgl]
expected: NOTRUN
[Ensures session can be created when matchDepthView=false, `gpu-optimized` - webgl2]
expected: NOTRUN

2
tests/wpt/tests/.github/workflows/docker.yml vendored
View file

@ -40,7 +40,7 @@ jobs:
latest
type=raw,value=${{ inputs.tag }}
- name: Build and push the Docker image
uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6.15.0
uses: docker/build-push-action@14487ce63c7a62a4a324b0bfb37086795e31c6c1 # v6.16.0
with:
context: ./tools/docker
push: true

13
tests/wpt/tests/ai/language_detection/availability-detached-crash.https.html vendored
View file

@ -2,12 +2,19 @@
<title>Assures no crash upon call of LanguageDetector.availability() on a detached document</title>
<link rel="author" href="mailto:christinesm@chromium.org">
<link rel="help" href="https://issues.chromium.org/issues/384233287">
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<body>
<iframe src="about:blank"></iframe>
<script>
const factory = frames[0].LanguageDetector;
const detector = factory.create();
const iframe = frames[0];
await test_driver.bless('Create LanguageDetector', null, iframe);
const factory = iframe.LanguageDetector;
const detectorPromise = await factory.create();
document.getElementsByTagName("iframe")[0].remove();
detector.availability();
factory.availability();
detectorPromise.then(detector => detector.detect());
</script>
</body>

3
tests/wpt/tests/ai/language_detection/detector-iframe.https.html vendored
View file

@ -37,6 +37,9 @@ function load_iframe(src, permission_policy) {
});
}
// TODO(crbug.com/414428433): Tests in this file intermittently crash.
// Re-enable once potential causes in Permissions Policy implementation
// and test setup are addressed.
promise_test(async t => {
const src = HTTPS_NOTSAMESITE_ORIGIN + IFRAME_PATH;
const iframe = await load_iframe(src, /*permission_policy=*/"");

15
tests/wpt/tests/ai/language_detection/detector-locale.https.window.js vendored
View file

@ -1,5 +1,8 @@
// META: title=Detect english
// META: global=window
// META: timeout=long
// META: script=resources/util.js
// META: script=/resources/testdriver.js
// META: script=../resources/util.js
// META: script=../resources/locale-util.js
@ -45,7 +48,7 @@ promise_test(async t => {
async function getExpectedInputLanguages(expectedInputLanguages) {
return (await LanguageDetector.create({expectedInputLanguages}))
return (await createLanguageDetector({expectedInputLanguages}))
.expectedInputLanguages;
}
@ -63,14 +66,14 @@ function uniqueCount(array) {
promise_test(async t => {
for (const [languageSubtag, variations] of Object.entries(
valid_language_tags)) {
if (await getAvailability(languageSubtag) === 'unavailable') {
if (await getAvailability([languageSubtag]) === 'unavailable') {
continue;
}
await assert_valid_expected_input_languages(languageSubtag)
await assert_valid_expected_input_languages(languageSubtag);
for (const variation of variations) {
await assert_valid_expected_input_languages(variation)
await assert_valid_expected_input_languages(variation);
}
const expectedInputLanguages = await getExpectedInputLanguages(variations);
@ -94,10 +97,10 @@ function assert_rejects_invalid_expected_input_languages(
promise_test(async t => {
for (const languageTag of invalid_language_tags) {
assert_rejects_invalid_expected_input_languages(
t, LanguageDetector.create, [languageTag]);
t, createLanguageDetector, [languageTag]);
}
assert_rejects_invalid_expected_input_languages(
t, LanguageDetector.create, invalid_language_tags);
t, createLanguageDetector, invalid_language_tags);
}, 'LanguageDetector.create() throws RangeError for invalid language tags');
promise_test(async t => {

49
tests/wpt/tests/ai/language_detection/detector.https.window.js vendored
View file

@ -1,19 +1,32 @@
// META: title=Detect english
// META: global=window
// META: timeout=long
// META: script=resources/util.js
// META: script=/resources/testdriver.js
// META: script=../resources/util.js
// META: script=../resources/locale-util.js
'use strict';
promise_test(async t => {
// Language detection is available after call to `create()`.
await LanguageDetector.create();
// Creating the language detector without user activation rejects with
// NotAllowedError.
const createPromise = LanguageDetector.create();
await promise_rejects_dom(t, 'NotAllowedError', createPromise);
// Creating the translator with user activation succeeds.
await createLanguageDetector();
// Creating it should have switched it to available.
const availability = await LanguageDetector.availability();
assert_equals(availability, 'available');
}, 'Simple LanguageDetector.availability() call');
// Now that it is available, we should no longer need user activation.
await LanguageDetector.create();
}, 'LanguageDetector.create() requires user activation when availability is "downloadable.');
promise_test(async t => {
const detector = await LanguageDetector.create();
const detector = await createLanguageDetector();
const results = await detector.detect('Hello world!');
// must at least have the 'und' result.
@ -62,30 +75,30 @@ promise_test(async t => {
throw error;
}
await promise_rejects_exactly(t, error, LanguageDetector.create({monitor}));
await promise_rejects_exactly(t, error, createLanguageDetector({monitor}));
}, 'If monitor throws an error, LanguageDetector.create() rejects with that error');
promise_test(async t => {
testMonitor(LanguageDetector.create);
testMonitor(createLanguageDetector);
}, 'LanguageDetector.create() notifies its monitor on downloadprogress');
promise_test(async t => {
const controller = new AbortController();
controller.abort();
const createPromise = LanguageDetector.create({signal: controller.signal});
const createPromise = createLanguageDetector({signal: controller.signal});
await promise_rejects_dom(t, 'AbortError', createPromise);
}, 'LanguageDetector.create() call with an aborted signal.');
promise_test(async t => {
await testAbortPromise(t, signal => {
return LanguageDetector.create({signal});
return createLanguageDetector({signal});
});
}, 'Aborting LanguageDetector.create().');
}, 'Aborting createLanguageDetector().');
promise_test(async t => {
const detector = await LanguageDetector.create();
const detector = await createLanguageDetector();
const text = 'Hello world!';
const promises = [detector.detect(text), detector.measureInputUsage(text)];
@ -101,7 +114,7 @@ promise_test(async t => {
promise_test(async t => {
const controller = new AbortController();
const detector = await LanguageDetector.create({signal: controller.signal});
const detector = await createLanguageDetector({signal: controller.signal});
const text = 'Hello world!';
const promises = [detector.detect(text), detector.measureInputUsage(text)];
@ -120,7 +133,7 @@ promise_test(async t => {
const controller = new AbortController();
controller.abort();
const detector = await LanguageDetector.create();
const detector = await createLanguageDetector();
const detectPromise =
detector.detect('Hello world!', {signal: controller.signal});
@ -128,14 +141,14 @@ promise_test(async t => {
}, 'LanguageDetector.detect() call with an aborted signal.');
promise_test(async t => {
const detector = await LanguageDetector.create();
const detector = await createLanguageDetector();
await testAbortPromise(t, signal => {
return detector.detect('Hello world!', {signal});
});
}, 'Aborting LanguageDetector.detect().');
promise_test(async t => {
const detector = await LanguageDetector.create();
const detector = await createLanguageDetector();
const text = 'Hello world!';
const largeText = text.repeat(10000);
@ -157,7 +170,7 @@ promise_test(async t => {
const controller = new AbortController();
controller.abort();
const detector = await LanguageDetector.create();
const detector = await createLanguageDetector();
const measureInputUsagePromise =
detector.measureInputUsage('hello', {signal: controller.signal});
@ -165,17 +178,17 @@ promise_test(async t => {
}, 'LanguageDetector.measureInputUsage() call with an aborted signal.');
promise_test(async t => {
const detector = await LanguageDetector.create();
const detector = await createLanguageDetector();
await testAbortPromise(t, signal => {
return detector.measureInputUsage('hello', {signal});
});
}, 'Aborting LanguageDetector.measureInputUsage().');
promise_test(async () => {
const detector = await LanguageDetector.create();
const detector = await createLanguageDetector();
assert_equals(detector.expectedInputLanguages, null);
}, 'Creating LanguageDetector without expectedInputLanguages');
promise_test(async t => {
await testCreateMonitorWithAbort(t, LanguageDetector.create);
await testCreateMonitorWithAbort(t, createLanguageDetector);
}, 'Progress events are not emitted after aborted.');

7
tests/wpt/tests/ai/language_detection/detector.optional.https.window.js vendored
View file

@ -1,5 +1,8 @@
// META: title=Detect english
// META: global=window
// META: timeout=long
// META: script=resources/util.js
// META: script=/resources/testdriver.js
// META: script=../resources/util.js
'use strict';
@ -36,7 +39,7 @@ promise_test(async t => {
const expectedInputLanguages = Object.keys(testInput);
const detector = await LanguageDetector.create({expectedInputLanguages});
const detector = await createLanguageDetector({expectedInputLanguages});
for (const [language, input] of Object.entries(testInput)) {
await assert_detects_correct_language(detector, input, language);
@ -45,7 +48,7 @@ promise_test(async t => {
promise_test(async () => {
const expectedInputLanguages = ['en', 'es'];
const detector = await LanguageDetector.create({expectedInputLanguages});
const detector = await createLanguageDetector({expectedInputLanguages});
assert_array_equals(detector.expectedInputLanguages, expectedInputLanguages);
assert_true(Object.isFrozen(detector.expectedInputLanguages));
}, 'Creating LanguageDetector with expectedInputLanguages');

4
tests/wpt/tests/ai/language_detection/resources/util.js vendored Normal file
View file

@ -0,0 +1,4 @@
async function createLanguageDetector(options = {}) {
await test_driver.bless();
return await LanguageDetector.create(options);
}

6
tests/wpt/tests/audio-output/setSinkId.https.html vendored
View file

@ -26,14 +26,8 @@ promise_test(async t => {
const list = await navigator.mediaDevices.enumerateDevices();
assert_greater_than(list.length, 0,
"media device list includes at least one device");
const audioInputList = list.filter(({kind}) => kind == "audioinput");
const outputDevicesList = list.filter(({kind}) => kind == "audiooutput");
// List of exposed microphone groupIds
const exposedGroupIds = new Set(audioInputList.map(device => device.groupId));
for (const { deviceId, groupId } of outputDevicesList) {
assert_true(exposedGroupIds.has(groupId),
"audiooutput device groupId must match an exposed microphone");
assert_greater_than(deviceId.length, 0, "deviceId.length");
const p1 = audio.setSinkId(deviceId);

18
tests/wpt/tests/clear-site-data/support/clear-site-data-prefetchCache.py vendored Normal file
View file

@ -0,0 +1,18 @@
def main(request, response):
headers = [(b"Content-Type", b"text/html")]
headers += [(b"Clear-Site-Data", b'"prefetchCache"')]
content = f'''
<script>
setTimeout(() => {{
if(window.opener) {{
window.opener.postMessage("message", "*");
}} else {{
window.parent.postMessage("message", "*");
}}
window.close();
}}, 1000);
</script>
<body>
{request.url}
</body>'''
return 200, headers, content

18
tests/wpt/tests/clear-site-data/support/clear-site-data-prerenderCache.py vendored Normal file
View file

@ -0,0 +1,18 @@
def main(request, response):
headers = [(b"Content-Type", b"text/html")]
headers += [(b"Clear-Site-Data", b'"prerenderCache"')]
content = f'''
<script>
setTimeout(() => {{
if(window.opener) {{
window.opener.postMessage("message", "*");
}} else {{
window.parent.postMessage("message", "*");
}}
window.close();
}}, 1000);
</script>
<body>
{request.url}
</body>'''
return 200, headers, content

19
tests/wpt/tests/cookie-store/change_eventhandler_for_already_expired.https.window.js vendored
View file

@ -20,3 +20,22 @@ cookie_test(async t => {
{deleted: [], changed: [{name: 'alt-cookie', value: 'IGNORE'}]},
'Deletion not observed after document.cookie sets already-expired cookie');
}, 'CookieStore setting already-expired cookie should not be observed');
cookie_test(async t => {
const eventPromise = observeNextCookieChangeEvent();
await cookieStore.set({
name: 'cookie',
value: 'ALREADY-EXPIRED',
expires: new Date(new Date() - 10_000),
partitioned: true,
});
await cookieStore.set('alt-cookie', 'IGNORE');
assert_equals(
await getCookieString(),
'alt-cookie=IGNORE',
'Already-expired cookie not included in CookieStore');
await verifyCookieChangeEvent(
eventPromise,
{deleted: [], changed: [{name: 'alt-cookie', value: 'IGNORE'}]},
'Deletion not observed after document.cookie sets already-expired cookie');
}, 'CookieStore setting already-expired partitioned cookie should not be observed');

15
tests/wpt/tests/cookie-store/change_eventhandler_for_document_cookie.https.window.js vendored
View file

@ -78,6 +78,21 @@ cookie_test(async t => {
'Deletion not observed after document.cookie sets already-expired cookie');
}, 'document.cookie set already-expired cookie should not be observed by CookieStore');
cookie_test(async t => {
let eventPromise = observeNextCookieChangeEvent();
await setCookieStringDocument('DOCUMENT-cookie=VALUE; path=/');
await verifyCookieChangeEvent(
eventPromise, {changed: [{name: 'DOCUMENT-cookie', value: 'VALUE'}]},
'Original cookie is observed.');
eventPromise = observeNextCookieChangeEvent();
// Overwrite the original cookie with a duplicate, this should not dispatch an event.
await setCookieStringDocument('DOCUMENT-cookie=VALUE; path=/');
await setCookieStringDocument('DOCUMENT-alt-cookie=IGNORE; path=/');
await verifyCookieChangeEvent(
eventPromise, {changed: [{name: 'DOCUMENT-alt-cookie', value: 'IGNORE'}]},
'Duplicate cookie is not observed.');
}, 'document.cookie duplicate cookie should not be observed by CookieStore');
cookie_test(async t => {
let eventPromise = observeNextCookieChangeEvent();

16
tests/wpt/tests/cookie-store/change_eventhandler_for_http_cookie_and_set_cookie_headers.https.window.js vendored
View file

@ -62,6 +62,22 @@ cookie_test(async t => {
'Deletion not observed after HTTP sets already-expired cookie');
}, 'HTTP set already-expired cookie should not be observed by CookieStore');
cookie_test(async t => {
let eventPromise = observeNextCookieChangeEvent();
await setCookieStringHttp('HTTP-cookie=VALUE; path=/');
await verifyCookieChangeEvent(
eventPromise, {changed: [{name: 'HTTP-cookie', value: 'VALUE'}]},
'Original cookie is observed.');
eventPromise = observeNextCookieChangeEvent();
// Overwrite the original cookie with a duplicate, this should not dispatch an event.
await setCookieStringHttp('HTTP-cookie=VALUE; path=/');
await setCookieStringHttp('HTTP-alt-cookie=IGNORE; path=/');
await verifyCookieChangeEvent(
eventPromise, {changed: [{name: 'HTTP-alt-cookie', value: 'IGNORE'}]},
'Duplicate cookie is not observed.');
}, 'HTTP duplicate cookie should not be observed by CookieStore');
cookie_test(async t => {
let eventPromise = observeNextCookieChangeEvent();

43
tests/wpt/tests/cookie-store/change_eventhandler_for_no_change.https.window.js vendored Normal file
View file

@ -0,0 +1,43 @@
// META: title=Cookie Store API: Test that setting a duplicate cookie does not fire a second event.
// META: script=resources/cookie-test-helpers.js
'use strict';
cookie_test(async t => {
let eventPromise = observeNextCookieChangeEvent();
await cookieStore.set('cookie', 'VALUE');
await verifyCookieChangeEvent(
eventPromise, {changed: [{name: 'cookie', value: 'VALUE'}]},
'Original cookie is observed.');
eventPromise = observeNextCookieChangeEvent();
await cookieStore.set('cookie', 'VALUE');
await cookieStore.set('alt-cookie', 'IGNORE');
await verifyCookieChangeEvent(
eventPromise, {changed: [{name: 'alt-cookie', value: 'IGNORE'}]},
'Duplicate cookie is not observed.');
}, 'CookieStore duplicate cookie should not be observed');
cookie_test(async t => {
let eventPromise = observeNextCookieChangeEvent();
await cookieStore.set({
name: 'cookie',
value: 'VALUE',
partitioned: true,
});
await verifyCookieChangeEvent(
eventPromise,
{changed: [{name: 'cookie', value: 'VALUE', partitioned: true}]},
'Original cookie is observed.');
eventPromise = observeNextCookieChangeEvent();
await cookieStore.set({
name: 'cookie',
value: 'VALUE',
partitioned: true,
});
await cookieStore.set('alt-cookie', 'IGNORE');
await verifyCookieChangeEvent(
eventPromise, {changed: [{name: 'alt-cookie', value: 'IGNORE'}]},
'Duplicate cookie is not observed.');
}, 'CookieStore duplicate partitioned cookie should not be observed');

30
tests/wpt/tests/css/css-align/abspos/align-items-static-position-001-ref.tentative.html vendored Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<style>
.block {
display: block;
width: 75%;
height: 75%;
border: 5px dotted blue;
}
.container {
border: 1px solid;
position: relative;
width: 100px;
height: 100px;
display: inline-block;
margin-left: 50px;
margin-bottom: 50px;
}
.abs {
width: 50px;
height: 50px;
position: absolute;
background: purple;
justify-self: center;
}
</style>
<div class="container"><div class="block">
<div class="abs"></div>
</div></div>

39
tests/wpt/tests/css/css-align/abspos/align-items-static-position-001.tentative.html vendored Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<title>Align-items only applies to OOF elements of block elements when statically positioned if it would apply if not OOF.</title>
<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-auto">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-auto">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-alignment">
<link rel="help" href="https://issues.chromium.org/issues/409806799">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12121">
<link rel="match" href="align-items-static-position-001-ref.tentative.html">
<style>
.block {
display: block;
width: 75%;
height: 75%;
border: 5px dotted blue;
align-items: center;
justify-items: center;
}
.container {
border: 1px solid;
position: relative;
width: 100px;
height: 100px;
display: inline-block;
margin-left: 50px;
margin-bottom: 50px;
}
.abs {
width: 50px;
height: 50px;
position: absolute;
background: purple;
}
</style>
<div class="container"><div class="block">
<div class="abs"></div>
</div></div>

32
tests/wpt/tests/css/css-align/abspos/align-items-static-position-002-ref.tentative.html vendored Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.inline {
display: inline;
color: transparent;
font: 10px Ahem;
line-height: 25px;
}
.container {
border: 1px solid;
position: relative;
width: 100px;
height: 100px;
display: inline-block;
margin-left: 50px;
margin-bottom: 50px;
}
.abs {
width: 50px;
height: 50px;
position: absolute;
background: purple;
}
</style>
<div class="container"><div class="inline">text
<div class="abs"></div>
<br>text
</div></div>

41
tests/wpt/tests/css/css-align/abspos/align-items-static-position-002.tentative.html vendored Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<title>Align-items doesn't apply to OOF elements of inline elements when statically positioned because they would apply if not OOF.</title>
<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-auto">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-auto">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-alignment">
<link rel="help" href="https://issues.chromium.org/issues/409806799">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12121">
<link rel="match" href="align-items-static-position-002-ref.tentative.html">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.inline {
display: inline;
color: transparent;
font: 10px Ahem;
line-height: 25px;
align-items: center;
justify-items: center;
}
.container {
border: 1px solid;
position: relative;
width: 100px;
height: 100px;
display: inline-block;
margin-left: 50px;
margin-bottom: 50px;
}
.abs {
width: 50px;
height: 50px;
position: absolute;
background: purple;
}
</style>
<div class="container"><div class="inline">text
<div class="abs"></div>
<br>text
</div></div>

59
tests/wpt/tests/css/css-align/abspos/align-self-static-position-003-ref.html vendored Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.inline {
display: inline;
color: transparent;
font: 10px Ahem;
line-height: 25px;
}
.container {
border: 1px solid;
position: relative;
width: 100px;
height: 100px;
display: inline-block;
margin-left: 50px;
margin-bottom: 50px;
}
.abs {
width: 50px;
height: 50px;
position: absolute;
background: purple;
}
</style>
<!-- start aligned -->
<div class="container"><div class="inline">text
<div class="abs" style="top: 25px;"></div>
</div></div>
<div class="container"><div class="inline">text
<div class="abs" style="top: 0px;"></div>
</div></div>
<div class="container"><div class="inline">text
<div class="abs" style="top: 25px;"></div>
</div></div>
<br>
<!-- end aligned -->
<div class="container"><div class="inline">text
<div class="abs" style="bottom: 50px; left: -50px"></div>
</div></div>
<div class="container"><div class="inline">text
<div class="abs" style="bottom: 0px; left: -50px;"></div>
</div></div>
<div class="container"><div class="inline">text
<div class="abs" style="bottom: 50px; left: 50px;"></div>
</div></div>
<br>
<!-- center aligned -->
<div class="container"><div class="inline">text
<div class="abs" style="top: 12.5px; left: -25px;"></div>
</div></div>
<div class="container"><div class="inline">text
<div class="abs" style="top: 25px; left: -25px;"></div>
</div></div>
<div class="container"><div class="inline">text
<div class="abs" style="top: 12.5px; left: 25px;"></div>
</div></div>

110
tests/wpt/tests/css/css-align/abspos/align-self-static-position-003.html vendored Normal file
View file

@ -0,0 +1,110 @@
<!DOCTYPE html>
<title>Align-self applies to OOF elements of inline elements when statically positioned.</title>
<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-auto">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-auto">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-alignment">
<link rel="help" href="https://issues.chromium.org/issues/409806799">
<link rel="match" href="align-self-static-position-003-ref.html">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.inline {
display: inline;
color: transparent;
font: 10px Ahem;
line-height: 25px;
}
.container {
border: 1px solid;
position: relative;
width: 100px;
height: 100px;
display: inline-block;
margin-left: 50px;
margin-bottom: 50px;
}
.abs {
width: 50px;
height: 50px;
position: absolute;
background: purple;
}
.static-positioned-inline {
left: auto;
right: auto;
}
.static-positioned-block {
top: auto;
bottom: auto;
}
.positioned-inline {
left: 0;
right: 0;
}
.positioned-block {
top: 0;
bottom: 0;
}
.center {
justify-self: center;
align-self: center;
}
.end {
justify-self: end;
align-self: end;
}
.start {
justify-self: start;
align-self: start;
}
</style>
<!-- start aligned -->
<div class="container"><div class="inline">text
<div class="abs static-positioned-inline static-positioned-block start"></div>
<br>text
</div></div>
<div class="container"><div class="inline">text
<div class="abs static-positioned-inline positioned-block start"></div>
<br>text
</div></div>
<div class="container"><div class="inline">text
<div class="abs positioned-inline static-positioned-block start"></div>
<br>text
</div></div>
<br>
<!-- end aligned -->
<div class="container"><div class="inline">text
<div class="abs static-positioned-inline static-positioned-block end"></div>
<br>text
</div></div>
<div class="container"><div class="inline">text
<div class="abs static-positioned-inline positioned-block end"></div>
<br>text
</div></div>
<div class="container"><div class="inline">text
<div class="abs positioned-inline static-positioned-block end"></div>
<br>text
</div></div>
<br>
<!-- center aligned -->
<div class="container"><div class="inline">text
<div class="abs static-positioned-inline static-positioned-block center"></div>
<br>text
</div></div>
<div class="container"><div class="inline">text
<div class="abs static-positioned-inline positioned-block center"></div>
<br>text
</div></div>
<div class="container"><div class="inline">text
<div class="abs positioned-inline static-positioned-block center"></div>
<br>text
</div></div>

67
tests/wpt/tests/css/css-align/abspos/align-self-static-position-004-ref.html vendored Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.inline {
display: inline;
color: transparent;
font: 10px Ahem;
line-height: 25px;
}
.container {
border: 1px solid;
position: relative;
width: 100px;
height: 100px;
display: inline-block;
margin-left: 50px;
margin-bottom: 50px;
}
.abs {
width: 50px;
height: 50px;
position: absolute;
background: purple;
}
.vertRL {
writing-mode: vertical-rl;
}
.vertLR {
writing-mode: vertical-lr;
}
</style>
<!-- start aligned -->
<div class="container vertRL"><div class="inline">text
<div class="abs" style="top: 0px; right: 25px;"></div>
</div></div>
<div class="container vertLR"><div class="inline">text
<div class="abs" style="top: 0px; left: 25px;"></div>
</div></div>
<div class="container vertRL"><div class="inline">text
<div class="abs" style="top: 0px; right: 0px;"></div>
</div></div>
<br>
<!-- end aligned -->
<div class="container vertLR"><div class="inline">text
<div class="abs" style="top: -50px; right: 50px"></div>
</div></div>
<div class="container vertRL"><div class="inline">text
<div class="abs" style="bottom: 0px; left: 50px;"></div>
</div></div>
<div class="container vertLR"><div class="inline">text
<div class="abs" style="top: -50px; right: 0px;"></div>
</div></div>
<br>
<!-- center aligned -->
<div class="container vertLR"><div class="inline">text
<div class="abs" style="right: 12.5px; top: -25px;"></div>
</div></div>
<div class="container vertRL"><div class="inline">text
<div class="abs" style="top: 25px; left: 12.5px;"></div>
</div></div>
<div class="container vertLR"><div class="inline">text
<div class="abs" style="top: -25px; left: 25px;"></div>
</div></div>

118
tests/wpt/tests/css/css-align/abspos/align-self-static-position-004.html vendored Normal file
View file

@ -0,0 +1,118 @@
<!DOCTYPE html>
<title>Align-self applies to OOF elements of inline elements when statically positioned with different writing modes.</title>
<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-auto">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-auto">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-alignment">
<link rel="help" href="https://issues.chromium.org/issues/409806799">
<link rel="match" href="align-self-static-position-004-ref.html">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.inline {
display: inline;
color: transparent;
font: 10px Ahem;
line-height: 25px;
}
.container {
border: 1px solid;
position: relative;
width: 100px;
height: 100px;
display: inline-block;
margin-left: 50px;
margin-bottom: 50px;
}
.abs {
width: 50px;
height: 50px;
position: absolute;
background: purple;
}
.static-positioned-inline {
left: auto;
right: auto;
}
.static-positioned-block {
top: auto;
bottom: auto;
}
.positioned-inline {
left: 0;
right: 0;
}
.positioned-block {
top: 0;
bottom: 0;
}
.center {
justify-self: center;
align-self: center;
}
.end {
justify-self: end;
align-self: end;
}
.start {
justify-self: start;
align-self: start;
}
.vertRL {
writing-mode: vertical-rl;
}
.vertLR {
writing-mode: vertical-lr;
}
</style>
<!-- start aligned -->
<div class="container vertRL"><div class="inline">text
<div class="abs static-positioned-inline static-positioned-block start"></div>
<br>text
</div></div>
<div class="container vertLR"><div class="inline">text
<div class="abs static-positioned-inline positioned-block start"></div>
<br>text
</div></div>
<div class="container vertRL"><div class="inline">text
<div class="abs positioned-inline static-positioned-block start"></div>
<br>text
</div></div>
<br>
<!-- end aligned -->
<div class="container vertLR"><div class="inline">text
<div class="abs static-positioned-inline static-positioned-block end"></div>
<br>text
</div></div>
<div class="container vertRL"><div class="inline">text
<div class="abs static-positioned-inline positioned-block end"></div>
<br>text
</div></div>
<div class="container vertLR"><div class="inline">text
<div class="abs positioned-inline static-positioned-block end"></div>
<br>text
</div></div>
<br>
<!-- center aligned -->
<div class="container vertRL"><div class="inline">text
<div class="abs static-positioned-inline static-positioned-block center"></div>
<br>text
</div></div>
<div class="container vertLR"><div class="inline">text
<div class="abs static-positioned-inline positioned-block center"></div>
<br>text
</div></div>
<div class="container vertRL"><div class="inline">text
<div class="abs positioned-inline static-positioned-block center"></div>
<br>text
</div></div>

21
tests/wpt/tests/css/css-align/abspos/align-self-static-position-005-ref.html vendored Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.container {
position: relative;
border: 1px solid;
}
.abs {
position: absolute;
background: purple;
opacity: 0.5;
bottom: 0px;
}
</style>
<div class="container">
<span style="font: 20px Ahem;">hello
<span class="abs">hello</span>
<span style="vertical-align: top; font-size: 50px;">world</span>
</span>
</div>

29
tests/wpt/tests/css/css-align/abspos/align-self-static-position-005.html vendored Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<title>Align-self applies to OOF elements of inline elements when statically positioned.</title>
<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-normal">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-alignment">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos">
<link rel="help" href="https://issues.chromium.org/issues/409806799">
<link rel="match" href="align-self-static-position-005-ref.html">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.container {
position: relative;
border: 1px solid;
}
.abs {
position: absolute;
background: purple;
align-self: end;
opacity: 0.5;
}
</style>
<div class="container">
<span style="font: 20px Ahem;">hello
<span class="abs">hello</span>
<span style="vertical-align: top; font-size: 50px;">world</span>
</span>
</div>

48
tests/wpt/tests/css/css-align/abspos/align-self-static-position-006-ref.html vendored Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<style>
.block {
width: 75px;
height: 75px;
z-index: -1;
border: 5px dotted blue;
}
.container {
border: 1px solid;
position: relative;
width: 100px;
height: 100px;
display: inline-block;
margin-left: 50px;
margin-bottom: 50px;
}
.abs {
width: 50px;
height: 50px;
position: absolute;
background: purple;
}
</style>
<!-- start aligned -->
<div class="container"><div class="block">
<div class="abs"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="left: 30px;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs"></div>
</div></div>
<br>
<!-- end aligned -->
<div class="container"><div class="block">
<div class="abs" style="top: -45px; left: 30px;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="top: -45px;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="top: -45px; left: 30px;"></div>
</div></div>
<br>

64
tests/wpt/tests/css/css-align/abspos/align-self-static-position-006.html vendored Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<title>Align-self:self-start/end applies to OOF elements of block elements when statically positioned.</title>
<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-auto">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-auto">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-alignment">
<link rel="help" href="https://issues.chromium.org/issues/409806799">
<link rel="match" href="align-self-static-position-006-ref.html">
<style>
.block {
display: block;
width: 75%;
height: 75%;
border: 5px dotted blue;
}
.container {
border: 1px solid;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
margin-left: 50px;
margin-bottom: 50px;
}
.abs {
width: 50px;
height: 50px;
position: absolute;
background: purple;
}
.end {
justify-self: self-end;
align-self: self-end;
}
.start {
justify-self: self-start;
align-self: self-start;
}
</style>
<!-- self-start aligned -->
<div class="container"><div class="block">
<div class="abs start"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs start" style="direction: rtl;"></div>
</div></div>
<div class="container"><div class="block" style="direction: rtl;">
<div class="abs start" style="direction: ltr;"></div>
</div></div>
<br>
<!-- self-end aligned -->
<div class="container"><div class="block">
<div class="abs end"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs end" style="direction: rtl;"></div>
</div></div>
<div class="container"><div class="block" style="direction: rtl;">
<div class="abs end" style="direction: ltr;"></div>
</div></div>

48
tests/wpt/tests/css/css-align/abspos/align-self-static-position-007-ref.html vendored Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.inline {
display: inline;
color: transparent;
font: 10px Ahem;
line-height: 25px;
}
.container {
border: 1px solid;
position: relative;
width: 100px;
height: 100px;
display: inline-block;
margin-left: 50px;
margin-bottom: 50px;
}
.abs {
width: 50px;
height: 50px;
position: absolute;
background: purple;
}
</style>
<!-- start aligned -->
<div class="container"><div class="inline">text
<div class="abs" style="top: 25px;"></div>
</div></div>
<div class="container"><div class="inline">text
<div class="abs" style="left: -50px;"></div>
</div></div>
<div class="container"><div class="inline">text
<div class="abs" style="top: 0px;"></div>
</div></div>
<br>
<!-- end aligned -->
<div class="container"><div class="inline">text
<div class="abs" style="bottom: 50px; left: -50px"></div>
</div></div>
<div class="container"><div class="inline">text
<div class="abs" style="top: 0px;"></div>
</div></div>
<div class="container"><div class="inline">text
<div class="abs" style="top: -25px; left: -50px;"></div>
</div></div>

71
tests/wpt/tests/css/css-align/abspos/align-self-static-position-007.html vendored Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<title>Align-self:self-start/end applies to OOF elements of inline elements when statically positioned.</title>
<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-auto">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-auto">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-alignment">
<link rel="help" href="https://issues.chromium.org/issues/409806799">
<link rel="match" href="align-self-static-position-007-ref.html">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.inline {
display: inline;
color: transparent;
font: 10px Ahem;
line-height: 25px;
}
.container {
border: 1px solid;
position: relative;
width: 100px;
height: 100px;
display: inline-block;
margin-left: 50px;
margin-bottom: 50px;
}
.abs {
width: 50px;
height: 50px;
position: absolute;
background: purple;
}
.end {
justify-self: self-end;
align-self: self-end;
}
.start {
justify-self: self-start;
align-self: self-start;
}
</style>
<!-- self-start aligned -->
<div class="container"><div class="inline">text
<div class="abs start"></div>
<br>text
</div></div>
<div class="container"><div class="inline">text
<div class="abs start" style="direction: rtl;"></div>
<br>text
</div></div>
<div class="container"><div class="inline" style="direction: rtl;">text
<div class="abs start" style="direction: ltr;"></div>
<br>text
</div></div>
<br>
<!-- self-end aligned -->
<div class="container"><div class="inline">text
<div class="abs end"></div>
<br>text
</div></div>
<div class="container"><div class="inline">text
<div class="abs end" style="direction: rtl;"></div>
<br>text
</div></div>
<div class="container"><div class="inline" style="direction: rtl;">text
<div class="abs end" style="direction: ltr;"></div>
<br>text
</div></div>

103
tests/wpt/tests/css/css-align/abspos/align-self-static-position-008-ref.html vendored Normal file
View file

@ -0,0 +1,103 @@
<!DOCTYPE html>
<style>
.block {
display: block;
width: 75%;
height: 75%;
border: 5px dotted blue;
}
.container {
border: 1px solid;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
margin-left: 50px;
margin-bottom: 50px;
}
.abs {
width: 50px;
height: 50px;
position: absolute;
background: purple;
}
</style>
<!-- justify-self -->
<div class="container"><div class="block">
<div class="abs" style="justify-self: start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: end;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: end;"></div>
</div></div>
<br>
<div class="container"><div class="block">
<div class="abs" style="left: 25px;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: end;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: start;"></div>
</div></div>
<br>
<!-- align-self -->
<div class="container"><div class="block">
<div class="abs" style="align-self: start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: end;"></div>
</div></div>
<br>
<div class="container"><div class="block">
<div class="abs" style="top: 25px;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: end;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: start;"></div>
</div></div>

110
tests/wpt/tests/css/css-align/abspos/align-self-static-position-008.html vendored Normal file
View file

@ -0,0 +1,110 @@
<!DOCTYPE html>
<title>Align-self applies to OOF elements of block elements when statically positioned.</title>
<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-auto">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-auto">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-alignment">
<link rel="help" href="https://issues.chromium.org/issues/409806799">
<link rel="match" href="align-self-static-position-008-ref.html">
<style>
.block {
display: block;
width: 75%;
height: 75%;
border: 5px dotted blue;
}
.container {
border: 1px solid;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
margin-left: 50px;
margin-bottom: 50px;
}
.abs {
width: 50px;
height: 50px;
position: absolute;
background: purple;
}
</style>
<!-- justify-self -->
<div class="container"><div class="block">
<div class="abs" style="justify-self: auto;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: normal;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: right;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: left;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: flex-start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: flex-end;"></div>
</div></div>
<br>
<div class="container"><div class="block">
<div class="abs" style="justify-self: anchor-center;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: baseline;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: first baseline;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: last baseline;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: legacy;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="justify-self: stretch;"></div>
</div></div>
<br>
<!-- align-self -->
<div class="container"><div class="block">
<div class="abs" style="align-self: auto;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: normal;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: right;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: left;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: flex-start;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: flex-end;"></div>
</div></div>
<br>
<div class="container"><div class="block">
<div class="abs" style="align-self: anchor-center;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: baseline;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: first baseline;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: last baseline;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: legacy;"></div>
</div></div>
<div class="container"><div class="block">
<div class="abs" style="align-self: stretch;"></div>
</div></div>

30
tests/wpt/tests/css/css-align/abspos/align-self-stretch-auto-margins-aspect-ratio.html vendored Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11195#issuecomment-2824879710">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
.container {
position: relative;
width: 200px;
height: 200px;
top: -50px;
left: -50px;
}
.abspos {
position: absolute;
inset: 10px auto 10px 50px;
margin: auto 0 auto 0;
align-self: stretch;
background: green;
}
.abspos::before {
content: '';
min-width: 100px;
height: 100%;
aspect-ratio: 1;
display: block;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="container">
<div class="abspos"></div>
</div>

29
tests/wpt/tests/css/css-align/abspos/align-self-stretch-auto-margins.html vendored Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11195#issuecomment-2824879710">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
.container {
position: relative;
width: 200px;
height: 200px;
top: -50px;
left: -50px;
}
.abspos {
position: absolute;
inset: 10px 50px 10px 50px;
margin: auto 0 auto 0;
align-self: stretch;
background: green;
}
.abspos::before {
content: '';
width: 100px;
height: 100px;
display: block;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="container">
<div class="abspos"></div>
</div>

30
tests/wpt/tests/css/css-align/abspos/justify-self-stretch-auto-margins-aspect-ratio.html vendored Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11195#issuecomment-2824879710">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
.container {
position: relative;
width: 200px;
height: 200px;
top: -50px;
left: -50px;
}
.abspos {
position: absolute;
inset: 50px 10px auto 10px;
margin: 0 auto 0 auto;
justify-self: stretch;
background: green;
}
.abspos::before {
content: '';
width: 100%;
min-height: 100px;
aspect-ratio: 1;
display: block;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="container">
<div class="abspos"></div>
</div>

29
tests/wpt/tests/css/css-align/abspos/justify-self-stretch-auto-margins.html vendored Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11195#issuecomment-2824879710">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
.container {
position: relative;
width: 200px;
height: 200px;
top: -50px;
left: -50px;
}
.abspos {
position: absolute;
inset: 50px 10px 50px 10px;
margin: 0 auto 0 auto;
justify-self: stretch;
background: green;
}
.abspos::before {
content: '';
width: 100px;
height: 100px;
display: block;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="container">
<div class="abspos"></div>
</div>

17
tests/wpt/tests/css/css-animations/crashtests/chrome-bug-405795970.html vendored Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<link rel="help" href="https://crbug.com/405795970">
<style>
@keyframes --anim {
from {
width: calc(10px * sibling-index());
}
to {
width: calc(50px);
}
}
#target {
animation: --anim 2s;
}
</style>
<p>Pass if no crash</p>
<div id="target"></div>

9
tests/wpt/tests/css/css-box/parsing/margin-trim-computed.html vendored
View file

@ -27,8 +27,13 @@ test_computed_value("margin-trim", "inline-start block-start", "block-start inli
test_computed_value("margin-trim", "inline-end block-start", "block-start inline-end");
test_computed_value("margin-trim", "inline-end block-end", "block-end inline-end");
test_computed_value("margin-trim", "block-start block-end inline-start", "block-start inline-start block-end");
test_computed_value("margin-trim", "inline-start block-start inline-end block-end", "block-start inline-start block-end inline-end");
test_computed_value("margin-trim", "inline-start inline-end block-start", "block-start inline-start inline-end");
test_computed_value("margin-trim", "block-start inline-start block-end inline-end", "block inline");
test_computed_value("margin-trim", "block-start block-end inline-end inline-start", "block inline");
test_computed_value("margin-trim", "block-start block-end inline-start inline-end", "block inline");
test_computed_value("margin-trim", "inline-start block-end block-start inline-end", "block inline");
test_computed_value("margin-trim", "inline-start inline-end block-start block-end", "block inline");
test_computed_value("margin-trim", "inline-end block-end inline-start block-start", "block inline");
</script>
</body>
</html>

14
tests/wpt/tests/css/css-box/parsing/margin-trim.html vendored
View file

@ -21,6 +21,9 @@ test_valid_value("margin-trim", "block-end");
test_valid_value("margin-trim", "inline-start");
test_valid_value("margin-trim", "inline-end");
test_valid_value("margin-trim", "block inline");
test_valid_value("margin-trim", "inline block");
// Serialize values into either block or inline
test_valid_value("margin-trim", "block-start block-end", "block");
test_valid_value("margin-trim", "inline-start inline-end", "inline");
@ -29,10 +32,15 @@ test_valid_value("margin-trim", "inline-end inline-start", "inline");
test_valid_value("margin-trim", "inline-start block-start");
test_valid_value("margin-trim", "inline-end block-start block-end");
test_valid_value("margin-trim", "block-start inline-start block-end inline-end");
test_valid_value("margin-trim", "inline-end block-end inline-start block-start");
test_invalid_value("margin-trim", "block inline");
// Serialize 4 values into "block inline"
test_valid_value("margin-trim", "block-start inline-start block-end inline-end", "block inline");
test_valid_value("margin-trim", "block-start block-end inline-end inline-start", "block inline");
test_valid_value("margin-trim", "block-start block-end inline-start inline-end", "block inline");
test_valid_value("margin-trim", "inline-start block-end block-start inline-end", "block inline");
test_valid_value("margin-trim", "inline-start inline-end block-start block-end", "block inline");
test_valid_value("margin-trim", "inline-end block-end inline-start block-start", "block inline");
test_invalid_value("margin-trim", "block block");
test_invalid_value("margin-trim", "inline inline");
test_invalid_value("margin-trim", "block inline-start inline-end");

1
tests/wpt/tests/css/css-easing/linear-timing-functions-syntax.html vendored
View file

@ -26,6 +26,7 @@ test_valid_value("animation-timing-function", "linear(0, 0.5 25% 75%, 1 100% 100
test_valid_value("animation-timing-function", "linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 0.998, 1 100% 100%)");
test_valid_value("animation-timing-function", "linear(0, 0 40%, 1, 0.5, 1)");
test_valid_value("animation-timing-function", "linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 1.004, 0.998, 1 100% 100%)");
test_valid_value("animation-timing-function", "linear(calc(0/0), 1)", "linear(0 0%, 1 100%)");
test_invalid_value("animation-timing-function", "linear()");
test_invalid_value("animation-timing-function", "linear(0)");

1
tests/wpt/tests/css/css-easing/step-timing-functions-syntax.html vendored
View file

@ -29,6 +29,7 @@ test_invalid_value("animation-timing-function", "steps(0, jump-start)");
test_invalid_value("animation-timing-function", "steps(0, jump-end)");
test_invalid_value("animation-timing-function", "steps(0, jump-both)");
test_invalid_value("animation-timing-function", "steps(1, jump-none)");
test_invalid_value("animation-timing-function", "steps(calc(0/0), jump-none)");
</script>
</body>

14
tests/wpt/tests/css/css-fonts/parsing/font-palette-values-invalid.html vendored
View file

@ -140,13 +140,18 @@
@font-palette-values --A {
override-colors: 0 color-mix(in lch, red, color-mix(in lch, currentcolor, black));
}
/* 24 */
@font-palette-values --A {
base-palette: sibling-index();
}
</style>
</head>
<body>
<script>
let rules = document.getElementById("style").sheet.cssRules;
test(function() {
assert_equals(rules.length, 24);
assert_equals(rules.length, 25);
});
test(function() {
@ -343,6 +348,13 @@ test(function() {
assert_equals(text.indexOf("override-colors"), -1);
assert_equals(rule.overrideColors, "");
});
test(function() {
let text = rules[24].cssText;
let rule = rules[24];
assert_equals(text.indexOf("base-palette"), -1);
assert_equals(rule.basePalette, "");
}, "sibling-index() is invalid in base-palette descriptor");
</script>
</body>
</html>

1
tests/wpt/tests/css/css-fonts/test_font_feature_values_parsing.html vendored
View file

@ -81,6 +81,7 @@ var testrules = [
{ rule: _("@styleset { ok-1: 1; }"), serializationSame: true },
{ rule: _("@annotation { ok-1: 3; }"), serializationSame: true },
{ rule: _("@stylistic { blah: 3; }"), serializationSame: true },
{ rule: _("@stylistic { blah: sibling-index(); }"), serializationNoValueDefn: true },
{ rule: makeRule("bongo", "\n@styleset\n { blah: 3; super-blah: 4 5;\n more-blah: 5 6 7;\n }"), serializationSame: true },
{ rule: makeRule("bongo", "\n@styleset\n {\n blah:\n 3\n;\n super-blah:\n 4\n 5\n;\n more-blah:\n 5 6\n 7;\n }"), serializationSame: true },

49
tests/wpt/tests/css/css-gaps/tentative/multicol/multicol-gap-decorations-001-ref.html vendored Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
.container {
border: 2px solid rgb(96 139 168);
width: 200px;
height: 130px;
column-gap: 10px;
display: flex;
}
.items {
background: rgb(96 139 168 / 0.2);
height: 130px;
margin: 0px;
width: 60px;
}
.row-gap {
position: absolute;
height: 10px;
width: 200px;
background: gold;
left: 2px;
top: 62px;
}
.column-gap {
position: absolute;
height: 130px;
width: 10px;
background: blue;
top: 2px;
}
</style>
<div class="container">
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
</div>
<div class="column-gap" style="left:62px;"></div>
<div class="column-gap" style="left:132px;"></div>
<div class="row-gap"></div>

45
tests/wpt/tests/css/css-gaps/tentative/multicol/multicol-gap-decorations-001.html vendored Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: Multicolumn gap decorations painted with column-wrap.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="multicol-gap-decorations-001-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
.container {
border: 2px solid rgb(96 139 168);
width: 200px;
height: 130px;
column-count: 3;
column-width: 60px;
column-height: 60px;
column-gap: 10px;
row-gap: 10px;
column-rule-width: 10px;
column-rule-style: solid;
column-rule-color: blue;
row-rule-width: 10px;
row-rule-style: solid;
row-rule-color: gold;
column-wrap: wrap;
}
p {
background: rgb(96 139 168 / 0.2);
height: 60px;
margin: 0px;
}
</style>
<div class="container">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>

96
tests/wpt/tests/css/css-gaps/tentative/multicol/multicol-gap-decorations-002-ref.html vendored Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
.outer {
border: 2px solid rgb(96 139 168);
width: 200px;
height: 200px;
}
.container1 {
position: absolute;
top: 2px;
column-gap: 10px;
display: flex;
}
.items1 {
background: rgb(96 139 168 / 0.2);
height: 40px;
margin: 0px;
width: 60px;
}
.container2 {
position: absolute;
top: 60px;
column-gap: 10px;
display: flex;
}
.items2 {
background: rgb(96 139 168 / 0.2);
height: 130px;
margin: 0px;
width: 60px;
}
.row-gap {
position: absolute;
height: 10px;
width: 200px;
background: gold;
left: 2px;
top: 120px;
}
.column-gap1 {
position: absolute;
height: 40px;
width: 10px;
background: blue;
top: 2px;
}
.column-gap2 {
position: absolute;
height: 142px;
width: 10px;
background: blue;
top: 60px;
}
.spanner {
position: absolute;
background: cyan;
width: 200px;
height: 18px;
top: 42px;
left: 2px;
opacity: 0.5;
}
</style>
<div class="outer">
<div class="container1">
<div class="items1"></div>
<div class="items1"></div>
<div class="items1"></div>
</div>
<div class="container2">
<div class="items2"></div>
<div class="items2"></div>
<div class="items2"></div>
</div>
<div class="column-gap1" style="left:62px;"></div>
<div class="column-gap1" style="left:132px;"></div>
<div class="column-gap2" style="left:62px;"></div>
<div class="column-gap2" style="left:132px;"></div>
<div class="row-gap"></div>
<div class="spanner"></div>
</div>

59
tests/wpt/tests/css/css-gaps/tentative/multicol/multicol-gap-decorations-002.html vendored Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: Multicolumn gap decorations painted with column-wrap and a spanner.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="multicol-gap-decorations-002-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
.container {
border: 2px solid rgb(96 139 168);
width: 200px;
height: 200px;
column-height: 60px;
column-gap: 10px;
row-gap: 10px;
column-rule-width: 10px;
column-rule-style: solid;
column-rule-color: blue;
row-rule-width: 10px;
row-rule-style: solid;
row-rule-color: gold;
column-wrap: wrap;
column-width: 60px;
column-count: 3;
column-fill: auto;
}
p {
background: rgb(96 139 168 / 0.2);
height: 60px;
margin: 0px;
}
h2 {
column-span: all;
background-color: cyan;
color: #fff;
margin: 0px;
opacity: 0.5;
height: 18px;
}
</style>
<div class="container">
<p></p>
<p></p>
<h2></h2>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>

59
tests/wpt/tests/css/css-gaps/tentative/multicol/multicol-gap-decorations-003-ref.html vendored Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
.outer {
border: 2px solid rgb(96 139 168);
width: 200px;
height: 200px;
}
.container1 {
position: absolute;
top: 2px;
column-gap: 10px;
display: flex;
height: 200px;
}
.items1 {
background: rgb(96 139 168 / 0.2);
height: 40px;
margin: 0px;
width: 60px;
height: 200px;
}
.column-gap1 {
position: absolute;
height: 200px;
width: 10px;
background: blue;
top: 2px;
}
.spanner {
position: absolute;
background: cyan;
width: 200px;
height: 18px;
top: 42px;
left: 2px;
opacity: 0.5;
}
</style>
<div class="outer">
<div class="container1">
<div class="items1"></div>
<div class="items1"></div>
<div class="items1"></div>
</div>
<div class="column-gap1" style="left:62px;"></div>
<div class="column-gap1" style="left:132px;"></div>
</div>

35
tests/wpt/tests/css/css-gaps/tentative/multicol/multicol-gap-decorations-003.html vendored Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: Multicolumn gap decorations painted basic case.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="multicol-gap-decorations-003-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#container {
border: 2px solid rgb(96 139 168);
width: 200px;
column-count: 3;
column-width: 60px;
column-gap: 10px;
column-rule-width: 10px;
column-rule-style: solid;
column-rule-color: blue;
}
p {
background: rgb(96 139 168 / 0.2);
height: 200px;
margin: 0px;
}
</style>
<div id="container">
<p></p>
<p></p>
<p></p>
</div>

78
tests/wpt/tests/css/css-gaps/tentative/multicol/multicol-gap-decorations-004-ref.html vendored Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
.outer {
border: 2px solid rgb(96 139 168);
width: 200px;
height: 130px;
}
.container1 {
width: 200px;
height: 130px;
column-gap: 10px;
display: flex;
}
.items1 {
background: rgb(96 139 168 / 0.2);
height: 60px;
margin: 0px;
width: 60px;
}
.container2 {
position: absolute;
top: 72px;
left: 2px;
width: 200px;
height: 60px;
column-gap: 10px;
display: flex;
}
.items2 {
background: rgb(96 139 168 / 0.2);
height: 60px;
margin: 0px;
width: 60px;
}
.row-gap {
position: absolute;
height: 4px;
width: 200px;
background: gold;
left: 2px;
top: 65px;
}
.column-gap {
position: absolute;
height: 130px;
width: 4px;
background: blue;
top: 2px;
}
</style>
<div class="outer">
<div class="container1">
<div class="items1"></div>
<div class="items1"></div>
<div class="items1"></div>
</div>
<div class="container2">
<div class="items2"></div>
<div class="items2"></div>
<div class="items2"></div>
</div>
<div class="column-gap" style="left:65px;"></div>
<div class="column-gap" style="left:135px;"></div>
<div class="row-gap"></div>
</div>

46
tests/wpt/tests/css/css-gaps/tentative/multicol/multicol-gap-decorations-004.html vendored Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: Multicolumn gap decorations painted with smaller width than gap and column-wrap.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="multicol-gap-decorations-004-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
.container {
border: 2px solid rgb(96 139 168);
width: 200px;
height: 130px;
column-count: 3;
column-width: 60px;
column-height: 60px;
column-gap: 10px;
row-gap: 10px;
column-rule-width: 4px;
column-rule-style: solid;
column-rule-color: blue;
row-rule-width: 4px;
row-rule-style: solid;
row-rule-color: gold;
column-wrap: wrap;
column-fill: auto;
}
p {
background: rgb(96 139 168 / 0.2);
height: 60px;
margin: 0px;
}
</style>
<div class="container">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>

64
tests/wpt/tests/css/css-gaps/tentative/multicol/multicol-gap-decorations-005-ref.html vendored Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
.outer {
display: flex;
border: 1px solid #ccc;
height: 50px;
width: 210px;
column-gap: 10px;
}
.outer-items {
background: rgb(96 139 168 / 0.2);
height 50px;
width: 100px;
}
.inner {
display: flex;
height: 50px;
column-gap: 10px;
width: 100px;
}
.inner-items {
height: 50px;
width: 45px;
background: black;
}
.column-gap {
position: absolute;
height: 50px;
top: 1px;
left: 101px;
width: 10px;
}
.row-gap {
position: absolute;
background: purple;
height: 10px;
top: 21px;
left: 111px;
width: 100px;
}
</style>
<div class="outer">
<div class="outer-items"></div>
<div class="outer-items" id="nested">
<div class="inner">
<div class="inner-items"></div>
<div class="inner-items"></div>
</div>
</div>
</div>
<div class="column-gap" style="background: blue;"></div>
<div class="column-gap" style="background: gold; left: 156px"></div>
<div class="row-gap"></div>

64
tests/wpt/tests/css/css-gaps/tentative/multicol/multicol-gap-decorations-005.html vendored Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: Multicolumn gap decorations painted with nested multicol with column wrap.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="multicol-gap-decorations-005-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
.outer-container {
column-count: 2;
column-gap: 10px;
column-rule-width: 10px;
column-rule-style: solid;
column-rule-color: blue;
border: 1px solid #ccc;
width: 210px;
height: 50px;
}
.nested-container {
column-count: 2;
column-gap: 10px;
width: 100px;
column-rule-width: 10px;
column-rule-style: solid;
column-rule-color: gold;
row-gap: 10px;
row-rule-width: 10px;
row-rule-style: solid;
row-rule-color: purple;
column-wrap: wrap;
column-fill: auto;
column-height: 20px;
}
.column1 {
background: rgb(96 139 168 / 0.2);
width: 100px;
height: 50px
}
.nested-column {
background: black;
width: 45px;
height: 20px;
}
</style>
<div class="outer-container">
<div class="column1">
</div>
<div class="column2">
<div class="nested-container">
<div class="nested-column"></div>
<div class="nested-column"></div>
<div class="nested-column"></div>
<div class="nested-column"></div>
</div>
</div>
</div>

52
tests/wpt/tests/css/css-gaps/tentative/multicol/multicol-gap-decorations-006-ref.html vendored Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
.outer-container {
columns: 3;
column-fill: auto;
height: 100px;
width: 600px;
gap: 10px;
background: yellow;
}
.nested-container {
columns: 2;
box-decoration-break: clone;
padding: 10px;
gap: 10px;
background: cyan;
}
.inner-column {
height: 250px;
background: hotpink;
width: 80px;
}
#col-gap1 {
position: absolute;
height: 80px;
width: 1px;
background: green;
top: 18px;
left: 104px;
}
#col-gap2 {
position: absolute;
width: 1px;
background: green;
top: 18px;
left: 307px;
height: 45px;
}
</style>
<div class="outer-container">
<div class="nested-container">
<div class="inner-column"></div>
</div>
</div>
<div id="col-gap1"></div>
<div id="col-gap2"></div>

39
tests/wpt/tests/css/css-gaps/tentative/multicol/multicol-gap-decorations-006.html vendored Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<title>
CSS Gap Decorations: Multicolumn gap decorations painted with nested fragmented multicol.
</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="match" href="multicol-gap-decorations-006-ref.html">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
.outer-container {
columns: 3;
column-fill: auto;
height: 100px;
width: 600px;
gap: 10px;
background: yellow;
}
.nested-container {
columns: 2;
box-decoration-break: clone;
padding: 10px;
column-rule: solid;
column-rule-color: green;
column-rule-width: 1px;
background: cyan;
gap: 10px;
}
.inner-column {
height: 250px;
background: hotpink;
width: 80px;
}
</style>
<div class="outer-container">
<div class="nested-container">
<div class="inner-column"></div>
</div>
</div>

133
tests/wpt/tests/css/css-gaps/tentative/multicol/multicol-gap-decorations-007-ref.html vendored Normal file
View file

@ -0,0 +1,133 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body {
margin: 0px;
}
#outer {
width: 620px;
height: 200px;
background: yellow;
}
.inner1 {
border-top: 2px solid;
border-left: 2px solid;
border-right: 2px solid;
background: cyan;
height: 198px;
width: 296px;
}
.inner2 {
border-bottom: 2px solid;
border-left: 2px solid;
border-right: 2px solid;
position: absolute;
left: 320px;
top: 0px;
height: 130px;
width: 296px;
background: cyan
}
.inner-flex {
display: flex;
column-gap: 20px;
}
.inner-items {
background: hotpink;
width: 85.333px;
}
.column-gap1 {
width: 10px;
background: blue;
position: absolute;
top: 2px;
}
.column-gap2 {
width: 10px;
background: blue;
position: absolute;
top: 40px;
}
.spanner {
background: grey;
opacity: 0.5;
height: 18px;
width: 296px;
}
.row-gap1 {
height: 10px;
background: green;
position: relative;
width: 296px;
top: 105px;
}
.row-gap2 {
height: 10px;
background: green;
position: absolute;
width: 296px;
top: 105px;
}
.column-gap3 {
background: blue;
height: 130px;
position: absolute;
width: 10px;
top: 0px;
}
</style>
<div id="outer">
<div class="inner1">
<div class="inner-flex">
<div class="inner-items" style="height:20px;"></div>
<div class="inner-items" style="height:20px" ;></div>
<div class="inner-items" style="height:20px;"></div>
</div>
<div class="inner-flex" style="position: absolute; left:2px; top:40px">
<div class="inner-items" style="height:100px;"></div>
<div class="inner-items" style="height:100px" ;></div>
<div class="inner-items" style="height:100px;"></div>
</div>
<div class="inner-flex" style="position: absolute; left:2px; top:160px">
<div class="inner-items" style="height:40px;"></div>
<div class="inner-items" style="height:40px" ;></div>
<div class="inner-items" style="height:40px;"></div>
</div>
<div class="spanner"></div>
<div class="column-gap1" style="height: 20px; left:calc(2px + 85.333px + 5px)"></div>
<div class="column-gap1" style="height: 20px; left:calc(2px + 85.333px + 5px + 10px + 5px + 85.333px + 5px)">
</div>
<div class="column-gap2" style="height: 160px; left:calc(2px + 85.333px + 5px)"></div>
<div class="column-gap2" style="height: 160px; left:calc(2px + 85.333px + 5px + 10px + 5px + 85.333px + 5px)">
</div>
<div class="row-gap1"></div>
</div>
<div class="inner2">
<div class="inner-flex">
<div class="inner-items" style="height:100px"></div>
<div class="inner-items" style="height:100px"></div>
<div class="inner-items" style="height:100px"></div>
</div>
<div class="inner-flex" style="position: absolute; top:120px;">
<div class="inner-items" style="height:10px"></div>
<div class="inner-items" style="height:10px"></div>
<div class="inner-items" style="height:10px"></div>
</div>
<div class="column-gap3" style="left:calc(85.333px + 5px);"></div>
<div class="column-gap3" style="left:calc(85.333px + 5px + 10px + 5px + 85.333px + 5px);"></div>
<div class="row-gap2"></div>
</div>
</div>

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