mirror of
https://github.com/servo/servo.git
synced 2025-07-03 21:43:41 +01:00
Auto merge of #21692 - servo-wpt-sync:wpt_update_12-09-2018, r=jdm
Sync WPT with upstream (12-09-2018) Automated downstream sync of changes from upstream as of 12-09-2018. [no-wpt-sync] <!-- Reviewable:start --> --- This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/21692) <!-- Reviewable:end -->
This commit is contained in:
bors-servo
GitHub
commit
a37bc7d054
430 changed files with 15017 additions and 508 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,2 @@
|
|||
[text-decoration-underline-position-vertical-ja.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-decoration-underline-position-vertical.html]
|
||||
expected: FAIL
|
||||
|
|
@ -68,9 +68,12 @@
|
|||
[outline-width intermediate]
|
||||
expected: FAIL
|
||||
|
||||
[padding-right end]
|
||||
[outline-width end]
|
||||
expected: FAIL
|
||||
|
||||
[border-top-width end]
|
||||
[border-bottom-width end]
|
||||
expected: FAIL
|
||||
|
||||
[bottom intermediate]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
[element-request-fullscreen-options.html]
|
||||
[Element#requestFullscreen({ navigationUI }) support]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -32,3 +32,6 @@
|
|||
[Element interface: attribute onfullscreenchange]
|
||||
expected: FAIL
|
||||
|
||||
[Element interface: operation requestFullscreen(FullscreenOptions)]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
[traverse_the_history_1.html]
|
||||
[Multiple history traversals from the same task]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[traverse_the_history_5.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[fieldset-calculating-min-max-content.html]
|
||||
[min-content]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[fieldset-generated-content.html]
|
||||
[fieldset generated content]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -5,11 +5,29 @@
|
|||
expected: TIMEOUT
|
||||
|
||||
[picture: source (max-width:500px) valid image, img valid image, resize to wide]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[picture: source (max-width:500px) valid image, img broken image, resize to narrow]
|
||||
expected: TIMEOUT
|
||||
|
||||
[picture: source (max-width:500px) valid image, img valid image, resize to narrow]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[picture: source (max-width:500px) broken image, img valid image, resize to narrow]
|
||||
expected: FAIL
|
||||
|
||||
[img (srcset 1 cand) valid image, resize to wide]
|
||||
expected: FAIL
|
||||
|
||||
[picture: same URL in source (max-width:500px) and img, resize to wide]
|
||||
expected: FAIL
|
||||
|
||||
[img (srcset 1 cand) valid image, resize to narrow]
|
||||
expected: FAIL
|
||||
|
||||
[picture: source (max-width:500px) valid image, img broken image, resize to wide]
|
||||
expected: FAIL
|
||||
|
||||
[picture: same URL in source (max-width:500px) and img, resize to narrow]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
[intrinsicsize-with-responsive-images.tentative.html]
|
||||
expected: TIMEOUT
|
||||
[Test image /images/green.png with no specified sizes, width, or height]
|
||||
expected: TIMEOUT
|
||||
|
||||
[Test image /images/green.svg with no specified sizes, width, or height]
|
||||
expected: TIMEOUT
|
||||
|
||||
[Test image /images/green.svg with width = 800, height = 800, and no specified sizes]
|
||||
expected: FAIL
|
||||
|
||||
[Test image (32 x 32) with sizes = 100 and srcset descriptor = 32w]
|
||||
expected: TIMEOUT
|
||||
|
||||
[Test image /images/green.svg with width = 800, no specified sizes, or height]
|
||||
expected: TIMEOUT
|
||||
|
||||
[Test image /images/green.png with width = 800, height = 800, and no specified sizes]
|
||||
expected: FAIL
|
||||
|
||||
[Test image /images/green.png with width = 800, no specified sizes, or height]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
[intrinsicsize-without-unsized-media.tentative.https.sub.html]
|
||||
[Test intrinsicsize for html image element, src=/images/green.svg]
|
||||
expected: FAIL
|
||||
|
||||
[Test intrinsicsize for html image element, src=/images/green.png]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
[null-image-source.html]
|
||||
[img with picture parent]
|
||||
expected: FAIL
|
||||
|
||||
[img with empty srcset]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[script-onerror-insertion-point-2.html]
|
||||
expected: TIMEOUT
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[DOMContentLoaded-defer.html]
|
||||
type: testharness
|
||||
[The end: DOMContentLoaded and defer scripts]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -6,9 +6,6 @@
|
|||
[document.open() does not abort documents that are not navigating (XMLHttpRequest)]
|
||||
expected: TIMEOUT
|
||||
|
||||
[document.open() does not abort documents that are not navigating (establish a WebSocket connection)]
|
||||
expected: TIMEOUT
|
||||
|
||||
[document.open() does not abort documents that are not navigating (fetch())]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
|
|||
|
|
@ -2,3 +2,6 @@
|
|||
[document.open() after parser is aborted]
|
||||
expected: FAIL
|
||||
|
||||
[async document.open() after parser is aborted]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
283
tests/wpt/metadata/quirks/unitless-length/quirks.html.ini
Normal file
283
tests/wpt/metadata/quirks/unitless-length/quirks.html.ini
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
[quirks.html]
|
||||
[top: -\\31 .5]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: -1A]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: -1a]
|
||||
expected: FAIL
|
||||
|
||||
[top: @1]
|
||||
expected: FAIL
|
||||
|
||||
[top: "1a"]
|
||||
expected: FAIL
|
||||
|
||||
[top: @a]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: "1"]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: -/**/1]
|
||||
expected: FAIL
|
||||
|
||||
[top: +/**/1]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: @1a]
|
||||
expected: FAIL
|
||||
|
||||
[top: 1\\31 ]
|
||||
expected: FAIL
|
||||
|
||||
[top: url('1')]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: -\\31 ]
|
||||
expected: FAIL
|
||||
|
||||
[top: calc(1)]
|
||||
expected: FAIL
|
||||
|
||||
[top: \\31 ]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: +1\\31 ]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: 1\\31 .5]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: #0001]
|
||||
expected: FAIL
|
||||
|
||||
[top: calc(2 * 2px)]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: 1a]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: A]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: #01]
|
||||
expected: FAIL
|
||||
|
||||
[top: +\\31 .5]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: #1]
|
||||
expected: FAIL
|
||||
|
||||
[top: -/**/1]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: +\\31 .5]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: \\31 ]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: calc(1)]
|
||||
expected: FAIL
|
||||
|
||||
[top: #001]
|
||||
expected: FAIL
|
||||
|
||||
[top: +\\31 ]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: +\\31 ]
|
||||
expected: FAIL
|
||||
|
||||
[top: +1.5]
|
||||
expected: FAIL
|
||||
|
||||
[top: +1\\31 ]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: @a]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: @1]
|
||||
expected: FAIL
|
||||
|
||||
[top: #1]
|
||||
expected: FAIL
|
||||
|
||||
[top: 1a]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: +1a]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: +1A]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: "a"]
|
||||
expected: FAIL
|
||||
|
||||
[top: #00001]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: -1\\31 .5]
|
||||
expected: FAIL
|
||||
|
||||
[top: "1"]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: -\\31 .5]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: url('1')]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: -1.5]
|
||||
expected: FAIL
|
||||
|
||||
[top: \\31 .5]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: "1a"]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: calc(2 * 2px)]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: +1\\31 .5]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: 1\\31 ]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: +/**/1]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: #00001]
|
||||
expected: FAIL
|
||||
|
||||
[top: url(1)]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: #001]
|
||||
expected: FAIL
|
||||
|
||||
[top: +1\\31 .5]
|
||||
expected: FAIL
|
||||
|
||||
[top: -1a]
|
||||
expected: FAIL
|
||||
|
||||
[top: -1A]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: url(1)]
|
||||
expected: FAIL
|
||||
|
||||
[top: a]
|
||||
expected: FAIL
|
||||
|
||||
[top: A]
|
||||
expected: FAIL
|
||||
|
||||
[top: #000001]
|
||||
expected: FAIL
|
||||
|
||||
[top: 1]
|
||||
expected: FAIL
|
||||
|
||||
[top: 1\\31 .5]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: a]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: 1]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: +1]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: #000001]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: +a]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: +A]
|
||||
expected: FAIL
|
||||
|
||||
[top: 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[top: +A]
|
||||
expected: FAIL
|
||||
|
||||
[top: +a]
|
||||
expected: FAIL
|
||||
|
||||
[top: +1]
|
||||
expected: FAIL
|
||||
|
||||
[top: -1.5]
|
||||
expected: FAIL
|
||||
|
||||
[top: -1\\31 .5]
|
||||
expected: FAIL
|
||||
|
||||
[top: +1a]
|
||||
expected: FAIL
|
||||
|
||||
[top: +1A]
|
||||
expected: FAIL
|
||||
|
||||
[top: @1a]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: \\31 .5]
|
||||
expected: FAIL
|
||||
|
||||
[top: "a"]
|
||||
expected: FAIL
|
||||
|
||||
[top: #01]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: +1.5]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: -A]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: -a]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: -1\\31 ]
|
||||
expected: FAIL
|
||||
|
||||
[top: #0001]
|
||||
expected: FAIL
|
||||
|
||||
[bottom: -1]
|
||||
expected: FAIL
|
||||
|
||||
[top: -\\31 ]
|
||||
expected: FAIL
|
||||
|
||||
[top: -A]
|
||||
expected: FAIL
|
||||
|
||||
[top: -a]
|
||||
expected: FAIL
|
||||
|
||||
[top: -1]
|
||||
expected: FAIL
|
||||
|
||||
[top: -1\\31 ]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -8,20 +8,32 @@
|
|||
[response.formData() with input: a=b&c=d]
|
||||
expected: FAIL
|
||||
|
||||
|
||||
[urlencoded-parser.any.worker.html]
|
||||
[response.formData() with input: a&b&c]
|
||||
[request.formData() with input: &&&a=b&&&&c=d&]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: _charset_=windows-1252&test=%C2x]
|
||||
[response.formData() with input: a=b&c=d&]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: a=b&c=d]
|
||||
expected: FAIL
|
||||
|
||||
[response.formData() with input: &&&a=b&&&&c=d&]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: a=b&c=d&]
|
||||
expected: FAIL
|
||||
|
||||
|
||||
[urlencoded-parser.any.worker.html]
|
||||
[response.formData() with input: a&b&c]
|
||||
expected: FAIL
|
||||
|
||||
[response.formData() with input: a=b&c=d]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: a=b&c=d&]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: a&b&c]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
[audioworkletnode-output-channel-count.https.html]
|
||||
expected: TIMEOUT
|
||||
|
|
@ -2,9 +2,9 @@ version: 1
|
|||
policy:
|
||||
pullRequests: collaborators
|
||||
tasks:
|
||||
$if: tasks_for == "github-push"
|
||||
then:
|
||||
$flattenDeep:
|
||||
- $if: tasks_for == "github-push"
|
||||
then:
|
||||
$map:
|
||||
$flatten:
|
||||
$match: {
|
||||
|
|
@ -61,7 +61,7 @@ tasks:
|
|||
owner: ${event.pusher.email}
|
||||
source: ${event.repository.url}
|
||||
payload:
|
||||
image: harjgam/web-platform-tests:0.14
|
||||
image: jugglinmike/web-platform-tests:0.21
|
||||
maxRunTime: 7200
|
||||
artifacts:
|
||||
public/results:
|
||||
|
|
@ -71,12 +71,86 @@ tasks:
|
|||
- /bin/bash
|
||||
- --login
|
||||
- -c
|
||||
- "~/start.sh ${event.repository.url} ${event.ref[len('refs/heads/'):]} ${event.after} ${browser.name} ${browser.channel} &&
|
||||
cd ~/web-platform-tests &&
|
||||
./tools/ci/ci_taskcluster.sh ${browser.name} ${browser.channel} ${chunk[0]} ${chunk[1]} ${chunk[2]}"
|
||||
# > NOTE: A well-designed template should produce `tasks: []` for any
|
||||
# > unrecognized `task_for` values; this allows later expansion of this
|
||||
# > service to handle more events.
|
||||
#
|
||||
# https://docs.taskcluster.net/docs/reference/integrations/taskcluster-github/docs/taskcluster-yml-v1
|
||||
else: []
|
||||
- set -ex;
|
||||
~/start.sh
|
||||
${event.repository.url}
|
||||
${event.ref}
|
||||
${event.after}
|
||||
${browser.name}
|
||||
${browser.channel};
|
||||
cd ~/web-platform-tests;
|
||||
./tools/ci/taskcluster-run.py
|
||||
${browser.name}
|
||||
--
|
||||
--channel=${browser.channel}
|
||||
--log-wptreport=../artifacts/wpt_report.json
|
||||
--no-fail-on-unexpected
|
||||
--test-type=${chunk[0]}
|
||||
--this-chunk=${chunk[1]}
|
||||
--total-chunks=${chunk[2]};
|
||||
- $if: tasks_for == "github-pull-request"
|
||||
then:
|
||||
$map: [{name: firefox, channel: nightly}, {name: chrome, channel: dev}]
|
||||
each(browser):
|
||||
$map:
|
||||
- name: wpt-${browser.name}-${browser.channel}-stability
|
||||
description: >-
|
||||
Verify that all tests affected by a pull request are stable
|
||||
when executed in ${browser.name}.
|
||||
extra_args: '--verify'
|
||||
- name: wpt-${browser.name}-${browser.channel}-results
|
||||
description: >-
|
||||
Collect results for all tests affected by a pull request in
|
||||
${browser.name}.
|
||||
extra_args: '--no-fail-on-unexpected --log-wptreport=../artifacts/wpt_report.json'
|
||||
each(operation):
|
||||
taskId: {$eval: 'as_slugid(operation.name)'}
|
||||
taskGroupId: {$eval: 'as_slugid("task group")'}
|
||||
created: {$fromNow: ''}
|
||||
deadline: {$fromNow: '24 hours'}
|
||||
provisionerId: aws-provisioner-v1
|
||||
workerType:
|
||||
$if: event.repository.full_name == 'web-platform-tests/wpt'
|
||||
then:
|
||||
wpt-docker-worker
|
||||
else:
|
||||
github-worker
|
||||
metadata:
|
||||
name: ${operation.name}
|
||||
description: ${operation.description}
|
||||
owner: ${event.pull_request.user.login}@users.noreply.github.com
|
||||
source: ${event.repository.url}
|
||||
payload:
|
||||
image: jugglinmike/web-platform-tests:0.21
|
||||
maxRunTime: 7200
|
||||
artifacts:
|
||||
public/results:
|
||||
path: /home/test/artifacts
|
||||
type: directory
|
||||
# Fetch the GitHub-provided merge commit (rather than the pull
|
||||
# request branch) so that the tasks simulate the behavior of the
|
||||
# submitted patch after it is merged. Using the merge commit also
|
||||
# simplifies detection of modified files because the first parent
|
||||
# of the merge commit can consistently be used to summarize the
|
||||
# changes.
|
||||
command:
|
||||
- /bin/bash
|
||||
- --login
|
||||
- -c
|
||||
- set -ex;
|
||||
~/start.sh
|
||||
${event.repository.clone_url}
|
||||
refs/pull/${event.number}/merge
|
||||
FETCH_HEAD
|
||||
${browser.name}
|
||||
${browser.channel};
|
||||
cd ~/web-platform-tests;
|
||||
result=0;
|
||||
./tools/ci/taskcluster-run.py
|
||||
--commit-range HEAD^
|
||||
${browser.name}
|
||||
--
|
||||
--channel=${browser.channel}
|
||||
${operation.extra_args} || result=$?;
|
||||
echo $result > ../artifacts/run-return-code.txt;
|
||||
echo "Command exited with code $result (failures are allowed while this task is being vetted)."
|
||||
|
|
|
|||
|
|
@ -73,8 +73,8 @@ backgroundFetchTest(async (test, backgroundFetch) => {
|
|||
assert_equals(registration.uploadTotal, 0);
|
||||
assert_equals(registration.uploaded, 0);
|
||||
assert_equals(registration.downloadTotal, 0);
|
||||
assert_equals(registration.state, "pending");
|
||||
assert_equals(registration.failureReason, "");
|
||||
assert_equals(registration.result, '');
|
||||
assert_equals(registration.failureReason, '');
|
||||
// Skip `downloaded`, as the transfer may have started already.
|
||||
|
||||
const {type, eventRegistration, results} = await getMessageFromServiceWorker();
|
||||
|
|
@ -82,8 +82,8 @@ backgroundFetchTest(async (test, backgroundFetch) => {
|
|||
assert_equals(results.length, 1);
|
||||
|
||||
assert_equals(eventRegistration.id, registration.id);
|
||||
assert_equals(eventRegistration.state, "success");
|
||||
assert_equals(eventRegistration.failureReason, "");
|
||||
assert_equals(eventRegistration.result, 'success');
|
||||
assert_equals(eventRegistration.failureReason, '');
|
||||
|
||||
assert_true(results[0].url.includes('resources/feature-name.txt'));
|
||||
assert_equals(results[0].status, 200);
|
||||
|
|
@ -97,7 +97,7 @@ backgroundFetchTest(async (test, backgroundFetch) => {
|
|||
// Very large download total that will definitely exceed the quota.
|
||||
const options = {downloadTotal: Number.MAX_SAFE_INTEGER};
|
||||
await promise_rejects(
|
||||
test, "QUOTA_EXCEEDED_ERR",
|
||||
test, 'QUOTA_EXCEEDED_ERR',
|
||||
backgroundFetch.fetch(registrationId, 'resources/feature-name.txt', options),
|
||||
'This fetch should have thrown a quota exceeded error');
|
||||
|
||||
|
|
@ -112,8 +112,8 @@ backgroundFetchTest(async (test, backgroundFetch) => {
|
|||
assert_equals(results.length, 2);
|
||||
|
||||
assert_equals(eventRegistration.id, registration.id);
|
||||
assert_equals(eventRegistration.state, "success");
|
||||
assert_equals(eventRegistration.failureReason, "");
|
||||
assert_equals(eventRegistration.result, 'success');
|
||||
assert_equals(eventRegistration.failureReason, '');
|
||||
|
||||
for (const result of results) {
|
||||
assert_true(result.url.includes('resources/feature-name.txt'));
|
||||
|
|
@ -122,3 +122,26 @@ backgroundFetchTest(async (test, backgroundFetch) => {
|
|||
}
|
||||
|
||||
}, 'Fetches can have requests with duplicate URLs');
|
||||
|
||||
backgroundFetchTest(async (test, backgroundFetch) => {
|
||||
const request =
|
||||
new Request('resources/feature-name.txt',
|
||||
{method: 'POST', body: 'TestBody'});
|
||||
|
||||
const registration = await backgroundFetch.fetch('my-id', request);
|
||||
|
||||
const {type, eventRegistration, results} = await getMessageFromServiceWorker();
|
||||
assert_equals('backgroundfetchsuccess', type);
|
||||
assert_equals(results.length, 1);
|
||||
|
||||
assert_equals(eventRegistration.id, registration.id);
|
||||
assert_equals(eventRegistration.state, 'success');
|
||||
assert_equals(eventRegistration.failureReason, '');
|
||||
|
||||
for (const result of results) {
|
||||
assert_true(result.url.includes('resources/feature-name.txt'));
|
||||
assert_equals(result.status, 200);
|
||||
assert_equals(result.text, 'Background Fetch');
|
||||
}
|
||||
|
||||
}, 'Fetches can have requests with a body');
|
||||
|
|
|
|||
|
|
@ -41,8 +41,8 @@ backgroundFetchTest(async (test, backgroundFetch) => {
|
|||
assert_equals(registration.uploadTotal, 0);
|
||||
assert_equals(registration.uploaded, 0);
|
||||
assert_equals(registration.downloadTotal, 1234);
|
||||
assert_equals(registration.state, "pending");
|
||||
assert_equals(registration.failureReason, "");
|
||||
assert_equals(registration.result, '');
|
||||
assert_equals(registration.failureReason, '');
|
||||
// Skip `downloaded`, as the transfer may have started already.
|
||||
|
||||
const secondRegistration = await backgroundFetch.get(registrationId);
|
||||
|
|
|
|||
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Containment Test: Layout containment ink overflow</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#ink-overflow">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name=assert content="Layout containment treats the element overflowing contents as ink overflow.">
|
||||
|
||||
<style>
|
||||
#wrapper {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: auto;
|
||||
background: red;
|
||||
}
|
||||
|
||||
#contain-layout {
|
||||
contain: layout;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#overflow {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="wrapper">
|
||||
<div id="contain-layout">
|
||||
<div id="overflow"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -43,6 +43,7 @@
|
|||
background-color: red;
|
||||
color: yellow;
|
||||
font-family: monospace;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
div#abs-pos
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
background-color: red;
|
||||
color: yellow;
|
||||
font-family: monospace;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
div#abs-pos
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
padding: 50px;
|
||||
}
|
||||
|
||||
span.block-descendant
|
||||
span.block-descendant, img
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -61,8 +61,8 @@
|
|||
|
||||
<div>
|
||||
<div id="blue-test" class="inline-block">
|
||||
<span class="block-descendant"><img src="support/blue50wBy23h.png" alt="Image download support must be enabled"></span>
|
||||
<span id="last-line-box" class="block-descendant"><img src="support/blue50wBy23h.png" alt="Image download support must be enabled"></span>
|
||||
<span class="block-descendant"><img src="support/blue50wBy25h.png" alt="Image download support must be enabled"></span>
|
||||
<span id="last-line-box" class="block-descendant"><img src="support/blue50wBy25h.png" alt="Image download support must be enabled"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
background-color: green;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 221 B |
Binary file not shown.
|
After Width: | Height: | Size: 203 B |
|
|
@ -0,0 +1,3 @@
|
|||
spec: https://drafts.csswg.org/css-device-adapt/
|
||||
suggested_reviewers:
|
||||
- ChumpChief
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<title>css-device-adapt IDL tests</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-device-adapt/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/WebIDLParser.js"></script>
|
||||
<script src="/resources/idlharness.js"></script>
|
||||
|
||||
<style>
|
||||
p { color: black; }
|
||||
</style>
|
||||
<style>
|
||||
@viewport { width: device-width; }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
idl_test(
|
||||
['css-device-adapt'],
|
||||
['cssom'],
|
||||
idl_array => {
|
||||
idl_array.add_objects({
|
||||
CSSRule: ['cssRule'],
|
||||
CSSViewportRule: ['cssViewportRule'],
|
||||
});
|
||||
self.cssRule = document.styleSheets[0].cssRules[0];
|
||||
self.cssViewportRule = document.styleSheets[1].cssRules[0];
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Filled Percentage Column, Shrinkwrap Width (via float)</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview">
|
||||
<link rel="match" href="references/grid-percent-cols-filled-shrinkwrap-001-ref.html">
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
grid-template-columns: auto 20% auto;
|
||||
border: solid silver;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
}
|
||||
.grid > div {
|
||||
background: blue;
|
||||
}
|
||||
.b {
|
||||
grid-column: 3;
|
||||
}
|
||||
.c {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.ref {
|
||||
grid-template-columns: 40px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two shapes below are identical
|
||||
|
||||
<div class="grid">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid ref">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">XXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Spanned Percentage Column, Shrinkwrap Width (via float)</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview">
|
||||
<link rel="match" href="references/grid-percent-cols-spanned-shrinkwrap-001-ref.html">
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
grid-template-columns: auto 20% auto;
|
||||
border: solid silver;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
}
|
||||
.grid > div {
|
||||
background: blue;
|
||||
}
|
||||
.b {
|
||||
grid-column: 3;
|
||||
}
|
||||
.c {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.ref {
|
||||
grid-template-columns: 40px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two shapes below are identical
|
||||
|
||||
<div class="grid">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">XXXXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid ref">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">XXXXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Filled Percentage Row, Shrinkwrap Height</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview">
|
||||
<link rel="match" href="references/grid-percent-rows-filled-shrinkwrap-001-ref.html">
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
grid-template-rows: auto 20% auto;
|
||||
grid-auto-flow: column;
|
||||
border: solid silver;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
}
|
||||
.grid > div {
|
||||
background: blue;
|
||||
}
|
||||
.b {
|
||||
grid-row: 3;
|
||||
}
|
||||
.c {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.ref {
|
||||
grid-template-rows: 40px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two shapes below are identical
|
||||
|
||||
<div class="grid">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">X<br>X<br>X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid ref">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">X</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Spanned Percentage Row, Shrinkwrap Height</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview">
|
||||
<link rel="match" href="references/grid-percent-rows-spanned-shrinkwrap-001-ref.html">
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
grid-template-rows: auto 20% auto;
|
||||
grid-auto-flow: column;
|
||||
justify-content: center;
|
||||
border: solid silver;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
}
|
||||
.grid > div {
|
||||
background: blue;
|
||||
}
|
||||
.b {
|
||||
grid-row: 3;
|
||||
}
|
||||
.c {
|
||||
grid-row: span 3;
|
||||
}
|
||||
|
||||
.ref {
|
||||
grid-template-rows: 40px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two shapes below are identical
|
||||
|
||||
<div class="grid">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">X<br>X<br>X<br>X<br>X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid ref">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">X<br>X<br>X<br>X<br>X</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
grid-template-columns: 40px 20px 40px;
|
||||
align-content: center;
|
||||
border: solid silver;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
}
|
||||
.grid > div {
|
||||
background: blue;
|
||||
}
|
||||
.b {
|
||||
grid-column: 3;
|
||||
}
|
||||
.c {
|
||||
grid-column: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two shapes below are identical
|
||||
|
||||
<div class="grid">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid ref">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">XXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
grid-template-columns: 40px 20px 40px;
|
||||
align-content: center;
|
||||
border: solid silver;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
}
|
||||
.grid > div {
|
||||
background: blue;
|
||||
}
|
||||
.b {
|
||||
grid-column: 3;
|
||||
}
|
||||
.c {
|
||||
grid-column: span 3;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two shapes below are identical
|
||||
|
||||
<div class="grid">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">XXXXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid ref">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">XXXXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
grid-template-rows: 40px 20px 40px;
|
||||
grid-auto-flow: column;
|
||||
justify-content: center;
|
||||
border: solid silver;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
}
|
||||
.grid > div {
|
||||
background: blue;
|
||||
}
|
||||
.b {
|
||||
grid-row: 3;
|
||||
}
|
||||
.c {
|
||||
grid-row: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two shapes below are identical
|
||||
|
||||
<div class="grid">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">X<br>X<br>X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid ref">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">X</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
grid-template-rows: 40px 20px 40px;
|
||||
grid-auto-flow: column;
|
||||
justify-content: center;
|
||||
border: solid silver;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
}
|
||||
.grid > div {
|
||||
background: blue;
|
||||
}
|
||||
.b {
|
||||
grid-row: 3;
|
||||
}
|
||||
.c {
|
||||
grid-row: span 3;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two shapes below are identical
|
||||
|
||||
<div class="grid">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">X<br>X<br>X<br>X<br>X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid ref">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">X<br>X<br>X<br>X<br>X</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path nonzero path interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path">
|
||||
<link rel="match" href="reference/clip-path-path-interpolation-001-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'path()' for clipping. Test the interpolation of nonzero
|
||||
path function.">
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from {
|
||||
clip-path: path(nonzero, 'M20,20h60 v60 h-60z M30,30 h40 v40 h-40z');
|
||||
}
|
||||
to {
|
||||
clip-path: path(nonzero, 'M50,50h50 v50 h-50z M20,20 h50 v50 h-50z');
|
||||
}
|
||||
}
|
||||
#rect {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
animation: anim 10s -5s paused linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="rect"></div>
|
||||
</body>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path evenodd path interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path">
|
||||
<link rel="match" href="reference/clip-path-path-interpolation-002-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'path()' for clipping. Test the interpolation of evenodd
|
||||
path function.">
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from {
|
||||
clip-path: path(evenodd, 'M20,20h60 v60 h-60z M30,30 h40 v40 h-40z');
|
||||
}
|
||||
to {
|
||||
clip-path: path(evenodd, 'M50,50h50 v50 h-50z M20,20 h50 v50 h-50z');
|
||||
}
|
||||
}
|
||||
#rect {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
animation: anim 10s -5s paused linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="rect" class="path-evenodd-animation"></div>
|
||||
</body>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Reference for clip-path's path nonzero interpolation</title>
|
||||
<style type="text/css">
|
||||
#rect {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
clip-path: url("#clip");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="rect"></div>
|
||||
<svg height="0" width="0">
|
||||
<defs>
|
||||
<clipPath id="clip">
|
||||
<path clip-rule="nonzero" d="M35,35 H90 V90 H35Z M25,25 H70 V70 H25Z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Reference for clip-path's path evenodd interpolation</title>
|
||||
<style type="text/css">
|
||||
#rect {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
clip-path: url("#clip");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="rect"></div>
|
||||
<svg height="0" width="0">
|
||||
<defs>
|
||||
<clipPath id="clip">
|
||||
<path clip-rule="evenodd" d="M35,35 H90 V90 H35Z M25,25 H70 V70 H25Z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.underline { text-decoration: underline; }
|
||||
.overline { text-decoration: overline; }
|
||||
</style>
|
||||
</head>
|
||||
<body lang="en">
|
||||
<div class="overline">サンプル</div>
|
||||
<div class="overline">サンプル</div>
|
||||
<div class="underline">"text-underline-position: right" alone should be same as "auto right"</div>
|
||||
<div class="underline">"text-underline-position: left" alone should be same as "auto left"</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body { writing-mode: vertical-rl; }
|
||||
.underline { text-decoration: underline; }
|
||||
.overline { text-decoration: overline; }
|
||||
</style>
|
||||
</head>
|
||||
<body lang="en">
|
||||
<div>In vertical writing mode with lang=ja, default overline will be same as underline (lang=en). However, when we set text-underline-position to "under left" it should be shifted.</div>
|
||||
<div class="underline">サンプル</div>
|
||||
<div class="underline">サンプル</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body { writing-mode: vertical-rl; }
|
||||
.underline { text-decoration: underline; }
|
||||
.overline { text-decoration: overline; }
|
||||
</style>
|
||||
</head>
|
||||
<body lang="en">
|
||||
<div class="underline">サンプル</div>
|
||||
<div class="underline">サンプル</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-underline-position-property">
|
||||
<link rel="match" href="reference/text-decoration-underline-position-horizontal-ref.html">
|
||||
<style>
|
||||
.underline { text-decoration: underline; }
|
||||
.overline { text-decoration: overline; }
|
||||
</style>
|
||||
</head>
|
||||
<body lang="en">
|
||||
<div class="overline" style="text-underline-position: under right">サンプル</div>
|
||||
<div class="overline" style="text-underline-position: under left">サンプル</div>
|
||||
<div class="underline" style="text-underline-position: right">"text-underline-position: right" alone should be same as "auto right"</div>
|
||||
<div class="underline" style="text-underline-position: left">"text-underline-position: left" alone should be same as "auto left"</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-underline-position-property">
|
||||
<link rel="match" href="reference/text-decoration-underline-position-vertical-ja-ref.html">
|
||||
<style>
|
||||
body { writing-mode: vertical-rl; }
|
||||
.underline { text-decoration: underline; }
|
||||
.overline { text-decoration: overline; }
|
||||
</style>
|
||||
</head>
|
||||
<body lang="ja">
|
||||
<div>In vertical writing mode with lang=ja, default overline will be same as underline (lang=en). However, when we set text-underline-position to "under left" it should be shifted.</div>
|
||||
<div class="underline" style="text-underline-position: under left">サンプル</div>
|
||||
<div class="overline">サンプル</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-underline-position-property">
|
||||
<link rel="match" href="reference/text-decoration-underline-position-vertical-ref.html">
|
||||
<style>
|
||||
body { writing-mode: vertical-rl; }
|
||||
.underline { text-decoration: underline; }
|
||||
.overline { text-decoration: overline; }
|
||||
</style>
|
||||
</head>
|
||||
<body lang="en">
|
||||
<div class="overline" style="text-underline-position: right">サンプル</div>
|
||||
<div class="underline" style="text-underline-position: left">サンプル</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<title>offset-path path() interpolation</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
|
||||
<link rel="match" href="offset-path-path-interpolation-ref.html">
|
||||
<meta name="assert" content="offset-path path supports animation.">
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from { offset-path: path("m 100 100 l 100 100"); }
|
||||
to { offset-path: path("m 100 200 l 100 -100"); }
|
||||
}
|
||||
#target {
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
top: 0px;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
animation: anim 10s -5s paused linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
</body>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>offset-path path interpolation reference</title>
|
||||
<style>
|
||||
#target {
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
top: 0px;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
offset-path: path("M 100 150 L 200 150");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,34 +1,86 @@
|
|||
<!doctype html>
|
||||
<link rel='help' href='https://drafts.csswg.org/selectors-4/#the-scope-pseudo'>
|
||||
<meta name='description' content=':scope should match when context object is a shadow root'>
|
||||
<meta name='description' content=':scope should match when context object is a ShadowRoot or a DocumentFragment'>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<div id='shadowHost'></div>
|
||||
<script>
|
||||
'use strict'
|
||||
const shadowRoot = shadowHost.attachShadow({mode:'open'})
|
||||
shadowRoot.innerHTML = '<div class="div" id="external_div">Shadow Element<div id="nesteddiv">nested</div></div>';
|
||||
const shadowRoot = shadowHost.attachShadow({mode:'open'})
|
||||
const externalDiv = document.createElement('div');
|
||||
externalDiv.setAttribute('id', 'external');
|
||||
const nestedDiv = document.createElement('div');
|
||||
nestedDiv.setAttribute('id', 'nested');
|
||||
shadowRoot.appendChild(externalDiv);
|
||||
externalDiv.appendChild(nestedDiv);
|
||||
|
||||
test(() => {
|
||||
assert_equals(shadowRoot.firstChild.querySelectorAll(':scope > div').length, 1, 'should get the number of direct children of external_div');
|
||||
assert_equals(shadowRoot.firstChild.querySelector(':scope > div'), shadowRoot.getElementById("nesteddiv"), 'should get the first direct child of external_div');
|
||||
assert_equals(shadowRoot.firstChild.querySelector(':scope > div').innerHTML, 'nested', 'should get the text in nesteddiv');
|
||||
const nestedShadowRoot = nestedDiv.attachShadow({mode:'open'})
|
||||
const shadowExternalDiv = document.createElement('div');
|
||||
shadowExternalDiv.setAttribute('id', 'shadow_external');
|
||||
const shadowNestedDiv = document.createElement('div');
|
||||
shadowNestedDiv.setAttribute('id', 'shadow_nested');
|
||||
nestedShadowRoot.appendChild(shadowExternalDiv);
|
||||
shadowExternalDiv.appendChild(shadowNestedDiv);
|
||||
|
||||
test (() => {
|
||||
assert_equals(shadowRoot.firstChild.querySelectorAll(':scope > div').length, 1, 'should get the number of direct children of externalDiv');
|
||||
assert_equals(shadowRoot.firstChild.querySelector(':scope > div'), shadowRoot.getElementById('nested'), 'should get the first direct child of externalDiv');
|
||||
assert_equals(shadowRoot.firstChild.querySelector(':scope > div'), shadowRoot.getElementById('nested'), 'should get nestedDiv');
|
||||
}, 'scope selector works in shadowRoot.firstChild')
|
||||
|
||||
test(() => {
|
||||
assert_equals(shadowRoot.querySelector(':scope > div'), shadowRoot.getElementById('external_div'), 'should get the direct child of shadowRoot');
|
||||
test (() => {
|
||||
assert_equals(shadowRoot.querySelector(':scope > div'), shadowRoot.getElementById('external'), 'should get the direct child of shadowRoot');
|
||||
assert_equals(shadowRoot.querySelectorAll(':scope > div').length, 1, 'should get the number of direct div children of shadowRoot');
|
||||
}, 'Selecting direct child of shadow root with :scope should work')
|
||||
|
||||
test(() => {
|
||||
assert_equals(shadowRoot.querySelector(':scope div'), shadowRoot.getElementById('external_div'), 'should get the first div descendant of shadowRoot');
|
||||
assert_equals(shadowRoot.querySelectorAll(':scope div').length, 2, 'should get the number of the div descendants of shadowRoot');
|
||||
test (() => {
|
||||
assert_equals(shadowRoot.querySelector(':scope div'), shadowRoot.getElementById('external'), 'should get the first div descendant of shadowRoot');
|
||||
assert_equals(shadowRoot.querySelectorAll(':scope div').length, 2, 'should get the number of the div descendants of shadowRoot, :scope div should not match for nestedShadow');
|
||||
}, 'Selecting descendants of shadow root with :scope should work')
|
||||
|
||||
test (() => {
|
||||
assert_equals(nestedShadowRoot.querySelector(':scope > div'), nestedShadowRoot.getElementById('shadow_external'), 'should get the direct child of nestedShadowRoot');
|
||||
assert_equals(nestedShadowRoot.querySelectorAll(':scope > div').length, 1, 'should get the number of direct div children of nestedShadowRoot');
|
||||
}, 'Selecting direct child of nested shadow root with :scope should work')
|
||||
|
||||
test (() => {
|
||||
assert_equals(nestedShadowRoot.querySelector(':scope div'), nestedShadowRoot.getElementById('shadow_external'), 'should get the first div descendant of nestedShadowRoot');
|
||||
assert_equals(nestedShadowRoot.querySelectorAll(':scope div').length, 2, 'should get the number of the div descendants of nestedShadowRoot');
|
||||
}, 'Selecting descendants of nested shadow root with :scope should work')
|
||||
|
||||
const documentFragment = document.createDocumentFragment();
|
||||
const external_div = document.createElement('div');
|
||||
external_div.setAttribute('id', 'external_div');
|
||||
const nested_div = document.createElement('div');
|
||||
nested_div.setAttribute('id', 'nested_div');
|
||||
documentFragment.appendChild(external_div);
|
||||
external_div.appendChild(nested_div);
|
||||
|
||||
test(() => {
|
||||
assert_equals(documentFragment.firstChild.querySelectorAll(':scope > div').length, 1, 'should get the number of direct children of external_div');
|
||||
assert_equals(documentFragment.firstChild.querySelector(':scope > div'), documentFragment.getElementById('nested_div'), 'should get the first direct child of external_div');
|
||||
assert_equals(documentFragment.firstChild.querySelector(':scope > div'), documentFragment.getElementById('nested_div'), 'should get the text in nesteddiv');
|
||||
}, 'scope selector works in documentFragment.firstChild')
|
||||
|
||||
test(() => {
|
||||
assert_equals(documentFragment.querySelector(':scope > div'), documentFragment.getElementById('external_div'), 'should get the direct child of DocumentFragment');
|
||||
assert_equals(documentFragment.querySelectorAll(':scope > div').length, 1, 'should get the number of direct div children of DocumentFragment');
|
||||
}, 'Selecting direct child of document fragment with :scope should work')
|
||||
|
||||
test(() => {
|
||||
assert_equals(documentFragment.querySelector(':scope div'), documentFragment.getElementById('external_div'), 'should get the first div descendant of DocumentFragment');
|
||||
assert_equals(documentFragment.querySelectorAll(':scope div').length, 2, 'should get the number of the div descendants of DocumentFragment');
|
||||
}, 'Selecting descendants of document fragment with :scope should work')
|
||||
|
||||
test(() => {
|
||||
assert_equals(shadowRoot.firstChild.querySelector(':scope'), null, 'should return null');
|
||||
assert_equals(shadowRoot.firstChild.querySelectorAll(':scope').length, 0, 'should return 0');
|
||||
|
||||
assert_equals(shadowRoot.querySelector(':scope'), null, 'should return null');
|
||||
assert_equals(shadowRoot.querySelectorAll(':scope').length, 0, 'should return 0');
|
||||
}, 'querySelector() with ":scope" should return null, whether the context object is an element or a shadow root')
|
||||
|
||||
assert_equals(documentFragment.querySelector(':scope'), null, 'should return null');
|
||||
assert_equals(documentFragment.querySelectorAll(':scope').length, 0, 'should return 0');
|
||||
|
||||
}, 'querySelector() with ":scope" should return null, whether the context object is an element, a shadow root or a document fragment')
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-layout">
|
||||
<link rel="match" href="contain-paint-formatting-context-margin-001-ref.html">
|
||||
<link rel="match" href="contain-layout-formatting-context-margin-001-ref.html">
|
||||
<style>
|
||||
#a {
|
||||
contain:layout;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Gerald Squelart" href="mailto:gsquelart@mozilla.com">
|
||||
<style>
|
||||
.basic {
|
||||
display: grid;
|
||||
border: 1em solid green;
|
||||
}
|
||||
.height-ref {
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.width-ref {
|
||||
width: 40px;
|
||||
}
|
||||
.floatLBasic-ref {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth-ref {
|
||||
float: left;
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="basic"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic floatLBasic-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic floatLWidth-ref"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on grid elements should cause them to be sized and baseline-aligned as if they had no contents.</title>
|
||||
<link rel="author" title="Gerald Squelart" href="mailto:gsquelart@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
|
||||
<link rel="match" href="contain-size-grid-001-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
display: grid;
|
||||
contain:size;
|
||||
border: 1em solid green;
|
||||
background: red;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.minHeight {
|
||||
min-height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.height {
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.maxWidth {
|
||||
max-width: 40px;
|
||||
}
|
||||
.width {
|
||||
width: 40px;
|
||||
}
|
||||
.floatLBasic {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth {
|
||||
float: left;
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--CSS Test: A size-contained grid element with no specified size should render at 0 height regardless of content.-->
|
||||
<div class="contain"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained grid element with specified min-height should render at given min-height regardless of content.-->
|
||||
<div class="contain minHeight"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained grid element with specified height should render at given height regardless of content.-->
|
||||
<div class="contain height"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained grid element with specified max-width should render at given max-width and zero height regardless of content.-->
|
||||
<div class="contain maxWidth"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained grid element with specified width should render at given width and zero height regardless of content.-->
|
||||
<div class="contain width"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated grid element with no specified size should render at 0px by 0px regardless of content.-->
|
||||
<div class="contain floatLBasic"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated grid element with specified width and no specified height should render at given width and 0 height regardless of content.-->
|
||||
<div class="contain floatLWidth"><div class="innerContents">inner</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -21,6 +21,7 @@
|
|||
== contain-size-inline-block-001.html contain-size-inline-block-001-ref.html
|
||||
== contain-size-flex-001.html contain-size-flex-001-ref.html
|
||||
== contain-size-inline-flex-001.html contain-size-inline-flex-001-ref.html
|
||||
== contain-size-grid-001.html contain-size-grid-001-ref.html
|
||||
== contain-size-multicol-001.html contain-size-multicol-001-ref.html
|
||||
== contain-size-fieldset-001.html contain-size-fieldset-001-ref.html
|
||||
== contain-size-fieldset-002.html contain-size-fieldset-002-ref.html
|
||||
|
|
|
|||
|
|
@ -0,0 +1,136 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
border: 2px solid purple;
|
||||
margin: 3px;
|
||||
/* This red should't be visible, because each container should shrinkwrap
|
||||
its sole child (and the child should cover up this background). */
|
||||
background: red;
|
||||
/* Float the containers, to test in "rows", with 1 row per writing-mode. */
|
||||
float: left;
|
||||
}
|
||||
br { clear: both; }
|
||||
|
||||
.container > * {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: teal;
|
||||
border: 1px solid yellow;
|
||||
}
|
||||
.container > * > * {
|
||||
background: pink;
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.pad_top { padding-top: 3px; }
|
||||
.pad_right { padding-right: 4px; }
|
||||
.pad_bottom { padding-bottom: 5px; }
|
||||
.pad_left { padding-left: 6px; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction: ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction: rtl; }
|
||||
.vl { writing-mode: vertical-lr; direction: ltr; }
|
||||
.vr { writing-mode: vertical-rl; direction: ltr; }
|
||||
.vl_rtl { writing-mode: vertical-lr; direction: rtl; }
|
||||
.vr_rtl { writing-mode: vertical-rl; direction: rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Here, we test padding on each side of a flex item, across 6 different
|
||||
writing-mode combinations (writing-mode X direction). -->
|
||||
<div class="container hl">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container hl">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container hl">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container hl">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container hr">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container hr">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container hr">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container hr">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container vl">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container vr">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container vl_rtl">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl_rtl">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl_rtl">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl_rtl">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container vr_rtl">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr_rtl">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr_rtl">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr_rtl">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Test: Testing auto-sized flex containers
|
||||
with various 'writing-mode' values
|
||||
and various padding amounts on flex items.
|
||||
</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
|
||||
<link rel="match" href="flexbox-writing-mode-016-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 2px solid purple;
|
||||
margin: 3px;
|
||||
/* This red should't be visible, because each container should shrinkwrap
|
||||
its sole child (and the child should cover up this background). */
|
||||
background: red;
|
||||
/* Float the containers, to test in "rows", with 1 row per writing-mode. */
|
||||
float: left;
|
||||
}
|
||||
br { clear: both; }
|
||||
|
||||
.container > * {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: teal;
|
||||
border: 1px solid yellow;
|
||||
}
|
||||
.container > * > * {
|
||||
background: pink;
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.pad_top { padding-top: 3px; }
|
||||
.pad_right { padding-right: 4px; }
|
||||
.pad_bottom { padding-bottom: 5px; }
|
||||
.pad_left { padding-left: 6px; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction: ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction: rtl; }
|
||||
.vl { writing-mode: vertical-lr; direction: ltr; }
|
||||
.vr { writing-mode: vertical-rl; direction: ltr; }
|
||||
.vl_rtl { writing-mode: vertical-lr; direction: rtl; }
|
||||
.vr_rtl { writing-mode: vertical-rl; direction: rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Here, we test padding on each side of a flex item, across 6 different
|
||||
writing-mode combinations (writing-mode X direction). -->
|
||||
<div class="container hl">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container hl">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container hl">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container hl">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container hr">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container hr">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container hr">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container hr">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container vl">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container vr">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container vl_rtl">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl_rtl">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl_rtl">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl_rtl">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container vr_rtl">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr_rtl">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr_rtl">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr_rtl">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -261,6 +261,7 @@
|
|||
== flexbox-writing-mode-013.html flexbox-writing-mode-013-ref.html
|
||||
== flexbox-writing-mode-014.html flexbox-writing-mode-014-ref.html
|
||||
== flexbox-writing-mode-015.html flexbox-writing-mode-015-ref.html
|
||||
== flexbox-writing-mode-016.html flexbox-writing-mode-016-ref.html
|
||||
|
||||
# Single-line size clamping
|
||||
== flexbox-single-line-clamp-1.html flexbox-single-line-clamp-1-ref.html
|
||||
|
|
|
|||
|
|
@ -25,4 +25,4 @@ rsync -avz --delete --filter=". ./sync-tests-filter" "$MOZTREE"/layout/reftests/
|
|||
sed -i -e 's/^\(\(fails\|needs-focus\|random\|skip\|asserts\|slow\|require-or\|silentfail\|pref\|test-pref\|ref-pref\|fuzzy\)[^ ]* *\?\)\+//;/^default-preferences /d;s/ \?# \?\(TC: \)\?[bB]ug.*//;s/ # Initial mulet triage:.*//' $(find . -name reftest.list)
|
||||
sed -i -e 's/-moz-crisp-edges/pixelated/g;s/-moz-min-content/min-content/g;s/-moz-max-content/max-content/g' $(find . -regex ".*\.\(xht\|xhtml\|html\|css\)")
|
||||
git add -A .
|
||||
git commit -m"Sync Mozilla tests as of https://hg.mozilla.org/mozilla-central/rev/$MOZREV ." -e .
|
||||
git commit -m"Sync Mozilla CSS tests as of https://hg.mozilla.org/mozilla-central/rev/$MOZREV ." -e .
|
||||
|
|
|
|||
|
|
@ -0,0 +1,122 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const srcs = [
|
||||
"/feature-policy/experimental-features/resources/image.svg",
|
||||
"/feature-policy/experimental-features/resources/image.jpg",
|
||||
"/feature-policy/experimental-features/resources/image.png",
|
||||
];
|
||||
|
||||
// Set new attribute, and wait til the media element is repainted.
|
||||
function updateAttribute(e, attribute, value) {
|
||||
return new Promise(resolve => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
|
||||
e.setAttribute(attribute, value);
|
||||
});
|
||||
}
|
||||
|
||||
// Test intrinsicSize attribute with image element.
|
||||
for (var src of srcs) {
|
||||
promise_test(async() => {
|
||||
var img = document.createElement('IMG');
|
||||
document.body.appendChild(img);
|
||||
img.src = src;
|
||||
await new Promise(resolve =>
|
||||
img.addEventListener('load', () => resolve(), {once: true}));
|
||||
assert_equals(img.width, 300, 'width');
|
||||
assert_equals(img.height, 150, 'height');
|
||||
assert_equals(img.naturalWidth, 300, 'naturalWidth');
|
||||
assert_equals(img.naturalHeight, 150, 'naturalHeight');
|
||||
|
||||
await updateAttribute(img, 'width', '800');
|
||||
assert_equals(img.width, 800, 'width');
|
||||
assert_equals(img.height, 400, 'height');
|
||||
assert_equals(img.naturalWidth, 300, 'naturalWidth');
|
||||
assert_equals(img.naturalHeight, 150, 'naturalHeight');
|
||||
|
||||
await updateAttribute(img, 'intrinsicSize', '400 x 500');
|
||||
assert_equals(img.width, 800, 'width');
|
||||
assert_equals(img.height, 1000, 'height');
|
||||
assert_equals(img.naturalWidth, 400, 'naturalWidth');
|
||||
assert_equals(img.naturalHeight, 500, 'naturalHeight');
|
||||
|
||||
await updateAttribute(img, 'style', 'height:800px;');
|
||||
assert_equals(img.width, 800, 'width');
|
||||
assert_equals(img.height, 800, 'height');
|
||||
assert_equals(img.naturalWidth, 400, 'naturalWidth');
|
||||
assert_equals(img.naturalHeight, 500, 'naturalHeight');
|
||||
|
||||
await updateAttribute(img, 'width', '');
|
||||
assert_equals(img.width, 640, 'width');
|
||||
assert_equals(img.height, 800, 'height');
|
||||
assert_equals(img.naturalWidth, 400, 'naturalWidth');
|
||||
assert_equals(img.naturalHeight, 500, 'naturalHeight');
|
||||
|
||||
await updateAttribute(img, 'intrinsicSize', '');
|
||||
assert_equals(img.width, 1600, 'width');
|
||||
assert_equals(img.height, 800, 'height');
|
||||
assert_equals(img.naturalWidth, 300, 'naturalWidth');
|
||||
assert_equals(img.naturalHeight, 150, 'naturalHeight');
|
||||
|
||||
await updateAttribute(img, 'style', '');
|
||||
assert_equals(img.width, 300, 'width');
|
||||
assert_equals(img.height, 150, 'height');
|
||||
assert_equals(img.naturalWidth, 300, 'naturalWidth');
|
||||
assert_equals(img.naturalHeight, 150, 'naturalHeight');
|
||||
}, 'Test image with src=' + src);
|
||||
}
|
||||
|
||||
// Test intrinsicSize attribute with video element.
|
||||
promise_test(async() => {
|
||||
var video = document.createElement('video');
|
||||
document.body.appendChild(video);
|
||||
video.src = "/feature-policy/experimental-features/resources/video.ogv";
|
||||
await new Promise(resolve =>
|
||||
video.addEventListener('canplaythrough', () => resolve(), {once: true}));
|
||||
assert_equals(video.getBoundingClientRect().width, 300, 'width');
|
||||
assert_equals(video.getBoundingClientRect().height, 150, 'height');
|
||||
assert_equals(video.videoWidth, 300, 'videoWidth');
|
||||
assert_equals(video.videoHeight, 150, 'videoHeight');
|
||||
|
||||
await updateAttribute(video, 'width', '800');
|
||||
assert_equals(video.getBoundingClientRect().width, 800, 'width');
|
||||
assert_equals(video.getBoundingClientRect().height, 400, 'height');
|
||||
assert_equals(video.videoWidth, 300, 'videoWidth');
|
||||
assert_equals(video.videoHeight, 150, 'videoHeight');
|
||||
|
||||
await updateAttribute(video, 'intrinsicSize', '400 x 500');
|
||||
assert_equals(video.getBoundingClientRect().width, 800, 'width');
|
||||
assert_equals(video.getBoundingClientRect().height, 1000, 'width');
|
||||
assert_equals(video.videoWidth, 400, 'videoWidth');
|
||||
assert_equals(video.videoHeight, 500, 'videoHeight');
|
||||
|
||||
await updateAttribute(video, 'style', 'height:800px;');
|
||||
assert_equals(video.getBoundingClientRect().width, 800, 'width');
|
||||
assert_equals(video.getBoundingClientRect().height, 800, 'height');
|
||||
assert_equals(video.videoWidth, 400, 'videoWidth');
|
||||
assert_equals(video.videoHeight, 500, 'videoHeight');
|
||||
|
||||
await updateAttribute(video, 'width', '');
|
||||
assert_equals(video.getBoundingClientRect().width, 640, 'width');
|
||||
assert_equals(video.getBoundingClientRect().height, 800, 'height');
|
||||
assert_equals(video.videoWidth, 400, 'videoWidth');
|
||||
assert_equals(video.videoHeight, 500, 'videoHeight');
|
||||
|
||||
await updateAttribute(video, 'intrinsicSize', '');
|
||||
assert_equals(video.getBoundingClientRect().width, 1600, 'width');
|
||||
assert_equals(video.getBoundingClientRect().height, 800, 'height');
|
||||
assert_equals(video.videoWidth, 300, 'videoWidth');
|
||||
assert_equals(video.videoHeight, 150, 'videoHeight');
|
||||
|
||||
await updateAttribute(video, 'style', '');
|
||||
assert_equals(video.getBoundingClientRect().width, 300, 'width');
|
||||
assert_equals(video.getBoundingClientRect().height, 150, 'height');
|
||||
assert_equals(video.videoWidth, 300, 'videoWidth');
|
||||
assert_equals(video.videoHeight, 150, 'videoHeight');
|
||||
}, 'Test video');
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -17,12 +17,12 @@ const test_cases = [
|
|||
{expected_width: default_width, expected_height: default_height},
|
||||
// Test when only one dimension is specified, img/video uses the default length for
|
||||
// the other dimension.
|
||||
{attribute: "width", value: 500, expected_width: 500, expected_height: default_height},
|
||||
{attribute: "height", value: 800, expected_width: default_width, expected_height: 800},
|
||||
{attribute: "width", value: 500, expected_width: 500, expected_height: 500 / 2},
|
||||
{attribute: "height", value: 800, expected_width: 800 * 2, expected_height: 800},
|
||||
// Test when only one dimension is specified by CSS style, img/video uses the
|
||||
// default length for the other dimension.
|
||||
{attribute: "style", value: "width:500px;", expected_width: 500, expected_height: default_height},
|
||||
{attribute: "style", value: "height:800px;", expected_width: default_width, expected_height: 800},
|
||||
{attribute: "style", value: "width:500px;", expected_width: 500, expected_height: 500 / 2},
|
||||
{attribute: "style", value: "height:800px;", expected_width: 800 * 2, expected_height: 800},
|
||||
// Test when the size of the image is specified, img/video is laid out by the
|
||||
// specified size.
|
||||
{attribute: "width", value: 500, attribute1: "height", value1: 800, expected_width: 500, expected_height:800},
|
||||
|
|
@ -0,0 +1 @@
|
|||
Feature-Policy: unsized-media 'none'
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
var check_report_format = (reports, observer) => {
|
||||
let report = reports[0];
|
||||
assert_equals(report.type, "feature-policy");
|
||||
assert_equals(report.url, document.location.href);
|
||||
assert_equals(report.body.feature, "vr");
|
||||
assert_equals(report.body.sourceFile, document.location.href);
|
||||
assert_equals(typeof report.body.message, "string");
|
||||
assert_equals(typeof report.body.lineNumber, "number");
|
||||
assert_equals(typeof report.body.columnNumber, "number");
|
||||
};
|
||||
|
||||
promise_test(async (t) => {
|
||||
const report = new Promise(resolve => {
|
||||
new ReportingObserver((reports, observer) => resolve([reports, observer]),
|
||||
{types: ['feature-policy']}).observe();
|
||||
});
|
||||
await promise_rejects(t, 'SecurityError', navigator.getVRDisplays(),
|
||||
"VR device access should not be allowed in this document.");
|
||||
const [reports, observer] = await report;
|
||||
check_report_format(reports, observer);
|
||||
}, "VR Report Format");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
Feature-Policy: vr 'none'
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
var check_report_format = (reports, observer) => {
|
||||
let report = reports[0];
|
||||
assert_equals(report.type, "feature-policy");
|
||||
assert_equals(report.url, document.location.href);
|
||||
assert_equals(report.body.feature, "vr");
|
||||
assert_equals(report.body.sourceFile, document.location.href);
|
||||
assert_equals(typeof report.body.message, "string");
|
||||
assert_equals(typeof report.body.lineNumber, "number");
|
||||
assert_equals(typeof report.body.columnNumber, "number");
|
||||
};
|
||||
|
||||
promise_test(async (t) => {
|
||||
const report = new Promise(resolve => {
|
||||
new ReportingObserver((reports, observer) => resolve([reports, observer]),
|
||||
{types: ['feature-policy']}).observe();
|
||||
});
|
||||
await promise_rejects(t, 'SecurityError', navigator.xr.requestDevice(),
|
||||
"XR device access should not be allowed in this document.");
|
||||
const [reports, observer] = await report;
|
||||
check_report_format(reports, observer);
|
||||
}, "XR Report Format");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
Feature-Policy: vr 'none'
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Element#requestFullscreen({ navigationUI }) support</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<body>
|
||||
<script>
|
||||
// Tests for https://github.com/whatwg/fullscreen/pull/129. Because there are
|
||||
// no normative requirements on what navigationUI should do, just test for
|
||||
// basic support. (One could also check that the three allowed enum valid are
|
||||
// supported and no others, but that would overlap with UA-specific tests.)
|
||||
test(() => {
|
||||
let invoked = false;
|
||||
document.body.requestFullscreen({
|
||||
get navigationUI() { invoked = true; return "irrelevant-value"; }
|
||||
});
|
||||
assert_true(invoked, "navigationUI getter invoked");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<title>fieldset calculating min-/max-content</title>
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<style>
|
||||
fieldset { margin: 0; padding: 0; }
|
||||
.min-content { width: 0; }
|
||||
legend { padding: 0; }
|
||||
fieldset, #ref-max-content, #ref-min-content { float: left; clear: left; border: 1px solid; }
|
||||
#log { clear: left; }
|
||||
</style>
|
||||
<fieldset class=max-content><legend>foo fooo</legend>x x</fieldset>
|
||||
<fieldset class=max-content><legend>x x</legend>foo fooo</fieldset>
|
||||
<div id=ref-max-content>foo fooo</div>
|
||||
|
||||
<fieldset class=min-content><legend>foo fooo</legend>x x</fieldset>
|
||||
<fieldset class=min-content><legend>x x</legend>foo fooo</fieldset>
|
||||
<div id=ref-min-content>fooo</div>
|
||||
|
||||
<script>
|
||||
test(() => {
|
||||
const ref = document.querySelector('#ref-max-content');
|
||||
for (const e of document.querySelectorAll('.max-content')) {
|
||||
assert_equals(e.clientWidth, ref.clientWidth);
|
||||
}
|
||||
}, 'max-content');
|
||||
|
||||
test(() => {
|
||||
const ref = document.querySelector('#ref-min-content');
|
||||
for (const e of document.querySelectorAll('.min-content')) {
|
||||
assert_equals(e.clientWidth, ref.clientWidth);
|
||||
}
|
||||
}, 'min-content');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<title>fieldset generated content</title>
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<style>
|
||||
fieldset { display: inline-block; }
|
||||
#test::before, #test::after { content:"X"; }
|
||||
</style>
|
||||
<fieldset id=test><legend>A</legend>Y</fieldset>
|
||||
<fieldset id=ref><legend>A</legend>XYX</fieldset>
|
||||
<script>
|
||||
test(() => {
|
||||
const testElm = document.querySelector('#test');
|
||||
const refElm = document.querySelector('#ref');
|
||||
assert_equals(testElm.clientWidth, refElm.clientWidth, 'clientWidth');
|
||||
assert_equals(testElm.clientHeight, refElm.clientHeight, 'clientHeight');
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<body>
|
||||
<svg width=200 height=200>
|
||||
<image href="/images/background.png" width="32" height="32"/>
|
||||
</svg>
|
||||
<svg width=200 height=200>
|
||||
<image href="/images/background.png" width="300" height="150"/>
|
||||
</svg>
|
||||
<svg width=400 height=400>
|
||||
<image href="/images/background.png" width="300" height="150"/>
|
||||
</svg>
|
||||
<svg width=200 height=200>
|
||||
<image href="/images/background.png" width="300" height="150"/>
|
||||
</svg>
|
||||
<svg width=200 height=200>
|
||||
<image href="/images/background.png" height="50" width="100"/>
|
||||
</svg>
|
||||
<svg width=200 height=200>
|
||||
<image href="/images/background.png" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="match" href="intrinsicsize-svg-image-ref.html">
|
||||
<meta name="assert" content="test">
|
||||
<body>
|
||||
<svg width=200 height=200>
|
||||
<image href="/images/background.png"/>
|
||||
</svg>
|
||||
<svg width=200 height=200>
|
||||
<image href="/images/background.png" intrinsicsize="300x150"/>
|
||||
</svg>
|
||||
<svg width=400 height=400>
|
||||
<image href="/images/background.png" intrinsicsize="300x150"/>
|
||||
</svg>
|
||||
<svg width=200 height=200>
|
||||
<image href="/images/background.png" intrinsicsize="300x150" width="300"/>
|
||||
</svg>
|
||||
<svg width=200 height=200>
|
||||
<image href="/images/background.png" intrinsicsize="300x150" height="50"/>
|
||||
</svg>
|
||||
<svg width=200 height=200>
|
||||
<image href="/images/background.png" intrinsicsize="300x150" width="100" height="100"/>
|
||||
</svg>
|
||||
</body>
|
||||
|
|
@ -6,9 +6,8 @@
|
|||
'use strict';
|
||||
|
||||
const srcs = [
|
||||
"/feature-policy/experimental-features/resources/image.svg",
|
||||
"/feature-policy/experimental-features/resources/image.jpg",
|
||||
"/feature-policy/experimental-features/resources/image.png",
|
||||
"/images/green.svg",
|
||||
"/images/green.png",
|
||||
];
|
||||
|
||||
for (var src of srcs) {
|
||||
|
|
@ -90,7 +89,7 @@ async_test(t => {
|
|||
assert_equals(img.naturalHeight, expected_intrinsic_height, 'naturalHeigh');
|
||||
t.done();
|
||||
}));
|
||||
img.srcset = srcs[2] + ' 32w';
|
||||
img.srcset = '/images/background.png 32w';
|
||||
}, 'Test image (32 x 32) with sizes = 100 and srcset descriptor = 32w');
|
||||
|
||||
</script>
|
||||
|
|
@ -6,9 +6,8 @@
|
|||
'use strict';
|
||||
|
||||
const srcs = [
|
||||
"/feature-policy/experimental-features/resources/image.svg",
|
||||
"/feature-policy/experimental-features/resources/image.jpg",
|
||||
"/feature-policy/experimental-features/resources/image.png",
|
||||
"/images/green.svg",
|
||||
"/images/green.png",
|
||||
];
|
||||
|
||||
// Set new attribute, and wait til the media element is repainted.
|
||||
|
|
@ -19,7 +18,6 @@ function updateAttribute(e, attribute, value) {
|
|||
});
|
||||
}
|
||||
|
||||
// Test intrinsicSize attribute with image element.
|
||||
for (var src of srcs) {
|
||||
promise_test(async() => {
|
||||
var img = document.createElement('IMG');
|
||||
|
|
@ -62,39 +60,7 @@ for (var src of srcs) {
|
|||
assert_equals(img.height, 800, 'height');
|
||||
assert_equals(img.naturalWidth, 400, 'naturalWidth');
|
||||
assert_equals(img.naturalHeight, 500, 'naturalHeight');
|
||||
}, 'Test image with src=' + src);
|
||||
}, 'Test intrinsicsize for html image element, src=' + src);
|
||||
}
|
||||
|
||||
// Test intrinsicSize attribute with video element.
|
||||
promise_test(async() => {
|
||||
var video = document.createElement('video');
|
||||
document.body.appendChild(video);
|
||||
video.src = "/feature-policy/experimental-features/resources/video.ogv";
|
||||
await new Promise(resolve =>
|
||||
video.addEventListener('canplaythrough', () => resolve(), {once: true}));
|
||||
video.intrinsicSize = '400 x 500';
|
||||
assert_equals(video.getBoundingClientRect().width, 400, 'width');
|
||||
assert_equals(video.getBoundingClientRect().height, 500, 'height');
|
||||
assert_equals(video.videoWidth, 400, 'naturalWidth');
|
||||
assert_equals(video.videoHeight, 500, 'naturalHeight');
|
||||
|
||||
video.width = '800';
|
||||
assert_equals(video.getBoundingClientRect().width, 800, 'width');
|
||||
assert_equals(video.getBoundingClientRect().height, 1000, 'height');
|
||||
assert_equals(video.videoWidth, 400, 'naturalWidth');
|
||||
assert_equals(video.videoHeight, 500, 'naturalHeight');
|
||||
|
||||
video.style = 'height:800px;';
|
||||
assert_equals(video.getBoundingClientRect().width, 800, 'width');
|
||||
assert_equals(video.getBoundingClientRect().height, 800, 'height');
|
||||
assert_equals(video.videoWidth, 400, 'naturalWidth');
|
||||
assert_equals(video.videoHeight, 500, 'naturalHeight');
|
||||
|
||||
video.removeAttribute('width');
|
||||
assert_equals(video.getBoundingClientRect().width, 640, 'width');
|
||||
assert_equals(video.getBoundingClientRect().height, 800, 'height');
|
||||
assert_equals(video.videoWidth, 400, 'naturalWidth');
|
||||
assert_equals(video.videoHeight, 500, 'naturalHeight');
|
||||
}, 'Test video');
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
promise_test(async() => {
|
||||
var video = document.createElement('video');
|
||||
document.body.appendChild(video);
|
||||
video.src = "/images/pattern.ogv";
|
||||
await new Promise(resolve =>
|
||||
video.addEventListener('canplaythrough', () => resolve(), {once: true}));
|
||||
video.intrinsicSize = '400 x 500';
|
||||
assert_equals(video.getBoundingClientRect().width, 400, 'width');
|
||||
assert_equals(video.getBoundingClientRect().height, 500, 'height');
|
||||
assert_equals(video.videoWidth, 400, 'naturalWidth');
|
||||
assert_equals(video.videoHeight, 500, 'naturalHeight');
|
||||
|
||||
video.width = '800';
|
||||
assert_equals(video.getBoundingClientRect().width, 800, 'width');
|
||||
assert_equals(video.getBoundingClientRect().height, 1000, 'height');
|
||||
assert_equals(video.videoWidth, 400, 'naturalWidth');
|
||||
assert_equals(video.videoHeight, 500, 'naturalHeight');
|
||||
|
||||
video.style = 'height:800px;';
|
||||
assert_equals(video.getBoundingClientRect().width, 800, 'width');
|
||||
assert_equals(video.getBoundingClientRect().height, 800, 'height');
|
||||
assert_equals(video.videoWidth, 400, 'naturalWidth');
|
||||
assert_equals(video.videoHeight, 500, 'naturalHeight');
|
||||
|
||||
video.removeAttribute('width');
|
||||
assert_equals(video.getBoundingClientRect().width, 640, 'width');
|
||||
assert_equals(video.getBoundingClientRect().height, 800, 'height');
|
||||
assert_equals(video.videoWidth, 400, 'naturalWidth');
|
||||
assert_equals(video.videoHeight, 500, 'naturalHeight');
|
||||
}, 'Test intrinsicsize for html video element');
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1 @@
|
|||
Feature-Policy: unsized-media *
|
||||
13
tests/wpt/web-platform-tests/interfaces/css-device-adapt.idl
Normal file
13
tests/wpt/web-platform-tests/interfaces/css-device-adapt.idl
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// GENERATED CONTENT - DO NOT EDIT
|
||||
// Content was automatically extracted by Reffy into reffy-reports
|
||||
// (https://github.com/tidoust/reffy-reports)
|
||||
// Source: CSS Device Adaptation Module Level 1 (https://drafts.csswg.org/css-device-adapt/)
|
||||
|
||||
partial interface CSSRule {
|
||||
const unsigned short VIEWPORT_RULE = 15;
|
||||
};
|
||||
|
||||
[Exposed=Window]
|
||||
interface CSSViewportRule : CSSRule {
|
||||
readonly attribute CSSStyleDeclaration style;
|
||||
};
|
||||
160
tests/wpt/web-platform-tests/interfaces/css-layout-api.idl
Normal file
160
tests/wpt/web-platform-tests/interfaces/css-layout-api.idl
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
// GENERATED CONTENT - DO NOT EDIT
|
||||
// Content was automatically extracted by Reffy into reffy-reports
|
||||
// (https://github.com/tidoust/reffy-reports)
|
||||
// Source: CSS Layout API Level 1 (https://drafts.css-houdini.org/css-layout-api-1/)
|
||||
|
||||
[Exposed=LayoutWorklet]
|
||||
interface LayoutChild {
|
||||
readonly attribute StylePropertyMapReadOnly styleMap;
|
||||
|
||||
IntrinsicSizesRequest intrinsicSizes();
|
||||
LayoutFragmentRequest layoutNextFragment(LayoutConstraints constraints, ChildBreakToken breakToken);
|
||||
};
|
||||
|
||||
[Exposed=LayoutWorklet]
|
||||
interface LayoutFragment {
|
||||
readonly attribute double inlineSize;
|
||||
readonly attribute double blockSize;
|
||||
|
||||
attribute double inlineOffset;
|
||||
attribute double blockOffset;
|
||||
|
||||
readonly attribute any data;
|
||||
|
||||
readonly attribute ChildBreakToken? breakToken;
|
||||
};
|
||||
|
||||
[Exposed=LayoutWorklet]
|
||||
interface IntrinsicSizes {
|
||||
readonly attribute double minContentSize;
|
||||
readonly attribute double maxContentSize;
|
||||
};
|
||||
|
||||
[Constructor(optional LayoutConstraintsOptions options),Exposed=LayoutWorklet]
|
||||
interface LayoutConstraints {
|
||||
readonly attribute double availableInlineSize;
|
||||
readonly attribute double availableBlockSize;
|
||||
|
||||
readonly attribute double? fixedInlineSize;
|
||||
readonly attribute double? fixedBlockSize;
|
||||
|
||||
readonly attribute double percentageInlineSize;
|
||||
readonly attribute double percentageBlockSize;
|
||||
|
||||
readonly attribute double? blockFragmentationOffset;
|
||||
readonly attribute BlockFragmentationType blockFragmentationType;
|
||||
|
||||
readonly attribute any data;
|
||||
};
|
||||
|
||||
dictionary LayoutConstraintsOptions {
|
||||
double availableInlineSize = 0;
|
||||
double availableBlockSize = 0;
|
||||
|
||||
double fixedInlineSize;
|
||||
double fixedBlockSize;
|
||||
|
||||
double percentageInlineSize;
|
||||
double percentageBlockSize;
|
||||
|
||||
double blockFragmentationOffset;
|
||||
BlockFragmentationType blockFragmentationType = "none";
|
||||
|
||||
any data;
|
||||
};
|
||||
|
||||
enum BlockFragmentationType { "none", "page", "column", "region" };
|
||||
|
||||
[Exposed=LayoutWorklet]
|
||||
interface ChildBreakToken {
|
||||
readonly attribute BreakType breakType;
|
||||
readonly attribute LayoutChild child;
|
||||
};
|
||||
|
||||
[Exposed=LayoutWorklet]
|
||||
interface BreakToken {
|
||||
readonly attribute FrozenArray<ChildBreakToken> childBreakTokens;
|
||||
readonly attribute any data;
|
||||
};
|
||||
|
||||
dictionary BreakTokenOptions {
|
||||
sequence<ChildBreakToken> childBreakTokens;
|
||||
any data = null;
|
||||
};
|
||||
|
||||
enum BreakType { "none", "line", "column", "page", "region" };
|
||||
|
||||
[Exposed=LayoutWorklet]
|
||||
interface LayoutEdgeSizes {
|
||||
readonly attribute double inlineStart;
|
||||
readonly attribute double inlineEnd;
|
||||
|
||||
readonly attribute double blockStart;
|
||||
readonly attribute double blockEnd;
|
||||
|
||||
// Convenience attributes for the sum in one direction.
|
||||
readonly attribute double inline;
|
||||
readonly attribute double block;
|
||||
};
|
||||
|
||||
[Exposed=LayoutWorklet]
|
||||
interface LayoutEdges {
|
||||
readonly attribute LayoutEdgeSizes border;
|
||||
readonly attribute LayoutEdgeSizes scrollbar;
|
||||
readonly attribute LayoutEdgeSizes padding;
|
||||
|
||||
readonly attribute LayoutEdgeSizes all;
|
||||
};
|
||||
|
||||
partial namespace CSS {
|
||||
[SameObject] readonly attribute Worklet layoutWorklet;
|
||||
};
|
||||
|
||||
[Global=(Worklet,LayoutWorklet),Exposed=LayoutWorklet]
|
||||
interface LayoutWorkletGlobalScope : WorkletGlobalScope {
|
||||
void registerLayout(DOMString name, VoidFunction layoutCtor);
|
||||
};
|
||||
|
||||
[Exposed=LayoutWorklet]
|
||||
dictionary LayoutOptions {
|
||||
ChildDisplayType childDisplay = "block";
|
||||
LayoutSizingMode sizing = "block-like";
|
||||
};
|
||||
|
||||
[Exposed=LayoutWorklet]
|
||||
enum ChildDisplayType {
|
||||
"block",
|
||||
"normal",
|
||||
};
|
||||
|
||||
[Exposed=LayoutWorklet]
|
||||
enum LayoutSizingMode {
|
||||
"block-like",
|
||||
"manual",
|
||||
};
|
||||
|
||||
[Exposed=LayoutWorklet]
|
||||
interface IntrinsicSizesRequest {
|
||||
};
|
||||
|
||||
[Exposed=LayoutWorklet]
|
||||
interface LayoutFragmentRequest {
|
||||
};
|
||||
|
||||
typedef (IntrinsicSizesRequest or LayoutFragmentRequest)
|
||||
LayoutFragmentRequestOrIntrinsicSizesRequest;
|
||||
|
||||
// This is the final return value from the author defined layout() method.
|
||||
dictionary FragmentResultOptions {
|
||||
double inlineSize = 0;
|
||||
double blockSize = 0;
|
||||
double autoBlockSize = 0;
|
||||
sequence<LayoutFragment> childFragments = [];
|
||||
any data = null;
|
||||
BreakTokenOptions breakToken = null;
|
||||
};
|
||||
|
||||
dictionary IntrinsicSizesResultOptions {
|
||||
double maxContentSize;
|
||||
double minContentSize;
|
||||
};
|
||||
|
|
@ -311,13 +311,6 @@ dictionary CSSMatrixComponentOptions {
|
|||
boolean is2D;
|
||||
};
|
||||
|
||||
[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet),
|
||||
Constructor(CSSNumericValue x, CSSNumericValue y)]
|
||||
interface CSSPositionValue : CSSStyleValue {
|
||||
attribute CSSNumericValue x;
|
||||
attribute CSSNumericValue y;
|
||||
};
|
||||
|
||||
[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
|
||||
interface CSSImageValue : CSSStyleValue {
|
||||
};
|
||||
|
|
|
|||
39
tests/wpt/web-platform-tests/interfaces/font-metrics-api.idl
Normal file
39
tests/wpt/web-platform-tests/interfaces/font-metrics-api.idl
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
// GENERATED CONTENT - DO NOT EDIT
|
||||
// Content was automatically extracted by Reffy into reffy-reports
|
||||
// (https://github.com/tidoust/reffy-reports)
|
||||
// Source: Font Metrics API Level 1 (https://drafts.css-houdini.org/font-metrics-api/)
|
||||
|
||||
partial interface Document {
|
||||
FontMetrics measureElement(Element element);
|
||||
FontMetrics measureText(DOMString text, StylePropertyMapReadOnly styleMap);
|
||||
};
|
||||
|
||||
interface FontMetrics {
|
||||
readonly attribute double width;
|
||||
readonly attribute sequence<double> advances;
|
||||
|
||||
readonly attribute double boundingBoxLeft;
|
||||
readonly attribute double boundingBoxRight;
|
||||
|
||||
readonly attribute double height;
|
||||
readonly attribute double emHeightAscent;
|
||||
readonly attribute double emHeightDescent;
|
||||
readonly attribute double boundingBoxAscent;
|
||||
readonly attribute double boundingBoxDescent;
|
||||
readonly attribute double fontBoundingBoxAscent;
|
||||
readonly attribute double fontBoundingBoxDescent;
|
||||
|
||||
readonly attribute Baseline dominantBaseline;
|
||||
readonly attribute sequence<Baseline> baselines;
|
||||
readonly attribute sequence<Font> fonts;
|
||||
};
|
||||
|
||||
interface Baseline {
|
||||
readonly attribute DOMString name;
|
||||
readonly attribute double value;
|
||||
};
|
||||
|
||||
interface Font {
|
||||
readonly attribute DOMString name;
|
||||
readonly attribute unsigned long glyphsRendered;
|
||||
};
|
||||
|
|
@ -3,8 +3,18 @@
|
|||
// (https://github.com/tidoust/reffy-reports)
|
||||
// Source: Fullscreen API Standard (https://fullscreen.spec.whatwg.org/)
|
||||
|
||||
enum FullscreenNavigationUI {
|
||||
"auto",
|
||||
"show",
|
||||
"hide"
|
||||
};
|
||||
|
||||
dictionary FullscreenOptions {
|
||||
FullscreenNavigationUI navigationUI = "auto";
|
||||
};
|
||||
|
||||
partial interface Element {
|
||||
Promise<void> requestFullscreen();
|
||||
Promise<void> requestFullscreen(optional FullscreenOptions options);
|
||||
|
||||
attribute EventHandler onfullscreenchange;
|
||||
attribute EventHandler onfullscreenerror;
|
||||
|
|
|
|||
|
|
@ -6,23 +6,73 @@
|
|||
// - Modify DOM in a way that should trigger an IntersectionObserver callback.
|
||||
// - BeginFrame
|
||||
// - requestAnimationFrame handler runs
|
||||
// - First step_timeout()
|
||||
// - Second requestAnimationFrame()
|
||||
// - Style, layout, paint
|
||||
// - IntersectionObserver generates new notifications
|
||||
// - Posts a task to deliver notifications
|
||||
// - First step_timeout handler runs
|
||||
// - Second step_timeout()
|
||||
// - Task to deliver IntersectionObserver notifications runs
|
||||
// - IntersectionObserver callbacks run
|
||||
// - Second step_timeout handler runs
|
||||
// - Second requestAnimationFrameHandler runs
|
||||
// - step_timeout()
|
||||
// - step_timeout handler runs
|
||||
// - myTestFunction1()
|
||||
// - [optional] waitForNotification(myTestFunction2)
|
||||
// - requestAnimationFrame()
|
||||
// - Verify newly-arrived IntersectionObserver notifications
|
||||
// - [optional] Modify DOM to trigger new notifications
|
||||
//
|
||||
// Ideally, it should be sufficient to use requestAnimationFrame followed
|
||||
// by two step_timeouts, with the first step_timeout firing in between the
|
||||
// requestAnimationFrame handler and the task to deliver notifications.
|
||||
// However, the precise timing of requestAnimationFrame, the generation of
|
||||
// a new display frame (when IntersectionObserver notifications are
|
||||
// generated), and the delivery of these events varies between engines, making
|
||||
// this tricky to test in a non-flaky way.
|
||||
//
|
||||
// In particular, in WebKit, requestAnimationFrame and the generation of
|
||||
// a display frame are two separate tasks, so a step_timeout called within
|
||||
// requestAnimationFrame can fire before a display frame is generated.
|
||||
//
|
||||
// In Gecko, on the other hand, requestAnimationFrame and the generation of
|
||||
// a display frame are a single task, and IntersectionObserver notifications
|
||||
// are generated during this task. However, the task posted to deliver these
|
||||
// notifications can fire after the following requestAnimationFrame.
|
||||
//
|
||||
// This means that in general, by the time the second requestAnimationFrame
|
||||
// handler runs, we know that IntersectionObservations have been generated,
|
||||
// and that a task to deliver these notifications has been posted (though
|
||||
// possibly not yet delivered). Then, by the time the step_timeout() handler
|
||||
// runs, these notifications have been delivered.
|
||||
//
|
||||
// Since waitForNotification uses a double-rAF, it is now possible that
|
||||
// IntersectionObservers may have generated more notifications than what is
|
||||
// under test, but have not yet scheduled the new batch of notifications for
|
||||
// delivery. As a result, observer.takeRecords should NOT be used in tests:
|
||||
//
|
||||
// - myTestFunction0()
|
||||
// - waitForNotification(myTestFunction1)
|
||||
// - requestAnimationFrame()
|
||||
// - Modify DOM in a way that should trigger an IntersectionObserver callback.
|
||||
// - BeginFrame
|
||||
// - requestAnimationFrame handler runs
|
||||
// - Second requestAnimationFrame()
|
||||
// - Style, layout, paint
|
||||
// - IntersectionObserver generates a batch of notifications
|
||||
// - Posts a task to deliver notifications
|
||||
// - Task to deliver IntersectionObserver notifications runs
|
||||
// - IntersectionObserver callbacks run
|
||||
// - BeginFrame
|
||||
// - Second requestAnimationFrameHandler runs
|
||||
// - step_timeout()
|
||||
// - IntersectionObserver generates another batch of notifications
|
||||
// - Post task to deliver notifications
|
||||
// - step_timeout handler runs
|
||||
// - myTestFunction1()
|
||||
// - At this point, observer.takeRecords will get the second batch of
|
||||
// notifications.
|
||||
function waitForNotification(t, f) {
|
||||
requestAnimationFrame(function() {
|
||||
t.step_timeout(function() { t.step_timeout(f); });
|
||||
requestAnimationFrame(function() { t.step_timeout(f); });
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -650,6 +650,8 @@ CSS-COLLIDING-REF-NAME: css/css-flexbox/reference/percentage-size-subitems-001-r
|
|||
CSS-COLLIDING-REF-NAME: css/css-grid/grid-items/percentage-size-subitems-001-ref.html
|
||||
CSS-COLLIDING-REF-NAME: css/css-contain/reference/contain-size-button-001-ref.html
|
||||
CSS-COLLIDING-REF-NAME: css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-button-001-ref.html
|
||||
CSS-COLLIDING-REF-NAME: css/css-contain/reference/contain-size-grid-001-ref.html
|
||||
CSS-COLLIDING-REF-NAME: css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-grid-001-ref.html
|
||||
CSS-COLLIDING-SUPPORT-NAME: css/css-backgrounds/support/red.png
|
||||
CSS-COLLIDING-SUPPORT-NAME: css/compositing/mix-blend-mode/support/red.png
|
||||
CSS-COLLIDING-SUPPORT-NAME: css/compositing/background-blending/support/red.png
|
||||
|
|
|
|||
|
|
@ -73,4 +73,23 @@ var testAudio = async_test(function() {
|
|||
this.unreached_func('Error creating MediaStream.'));
|
||||
}, 'verifies that an ImageCapture cannot be created out of an Audio Track');
|
||||
|
||||
var testParameter = test(function() {
|
||||
const invalidParameters = [
|
||||
"invalid",
|
||||
null,
|
||||
123,
|
||||
{},
|
||||
"",
|
||||
true
|
||||
];
|
||||
assert_throws(new TypeError(),
|
||||
function() { var capturer = new ImageCapture(); },
|
||||
'an ImageCapturer can not be created with no parameter');
|
||||
invalidParameters.map(parameter => {
|
||||
assert_throws(new TypeError(),
|
||||
function() { var capturer = new ImageCapture(parameter); },
|
||||
`an ImageCapturer can not be created with a ${parameter} parameter`);
|
||||
});
|
||||
}, 'throw "TypeError" if parameter is not MediaStreamTrack.');
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>ImageCapture track</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="https://w3c.github.io/mediacapture-image/#dom-imagecapture-track">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<canvas id='canvas' width=10 height=10></canvas>
|
||||
<script>
|
||||
|
||||
test(t => {
|
||||
let canvas = document.getElementById('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
context.fillStyle = 'red';
|
||||
context.fillRect(0, 0, 10, 10);
|
||||
|
||||
let stream = canvas.captureStream();
|
||||
let videoTrack = stream.getVideoTracks()[0];
|
||||
|
||||
let capturer = new ImageCapture(videoTrack);
|
||||
assert_true(capturer.track instanceof MediaStreamTrack);
|
||||
assert_equals(capturer.track, videoTrack);
|
||||
|
||||
let cloneTrack = videoTrack.clone();
|
||||
assert_not_equals(videoTrack, cloneTrack);
|
||||
|
||||
capturer.track = cloneTrack;
|
||||
assert_equals(capturer.track, videoTrack);
|
||||
}, "ImageCapture track attribute is readonly")
|
||||
|
||||
</script>
|
||||
|
|
@ -42,4 +42,35 @@ image_capture_test(async (t, imageCaptureTest) => {
|
|||
|
||||
}, 'exercises ImageCapture.getPhotoCapabilities()');
|
||||
|
||||
promise_test(t => {
|
||||
let canvas = document.getElementById('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
context.fillStyle = 'red';
|
||||
context.fillRect(0, 0, 10, 10);
|
||||
let stream = canvas.captureStream();
|
||||
let videoTrack = stream.getVideoTracks()[0];
|
||||
videoTrack.stop();
|
||||
|
||||
let capturer = new ImageCapture(videoTrack);
|
||||
assert_equals(videoTrack.readyState, 'ended');
|
||||
|
||||
return promise_rejects(t, 'InvalidStateError', capturer.getPhotoCapabilities())
|
||||
|
||||
}, 'getPhotoCapabilities() of an ended Track should throw "InvalidStateError"');
|
||||
|
||||
async_test(t => {
|
||||
let canvas = document.getElementById('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
context.fillStyle = 'red';
|
||||
context.fillRect(0, 0, 10, 10);
|
||||
let stream = canvas.captureStream();
|
||||
let videoTrack = stream.getVideoTracks()[0];
|
||||
|
||||
let capturer = new ImageCapture(videoTrack);
|
||||
capturer.getPhotoCapabilities()
|
||||
.then(t.step_func_done(() => assert_unreached('should throw "OperationError"')))
|
||||
.catch(t.step_func_done(e => assert_equals(e.name, 'OperationError')))
|
||||
videoTrack.stop();
|
||||
}, 'throw "OperationError" when the MediaStreamTrack is stopped while getting photo capabilities');
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -27,4 +27,35 @@ image_capture_test(async (t, imageCaptureTest) => {
|
|||
|
||||
}, 'exercises ImageCapture.getPhotoSettings()');
|
||||
|
||||
promise_test(t => {
|
||||
let canvas = document.getElementById('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
context.fillStyle = 'red';
|
||||
context.fillRect(0, 0, 10, 10);
|
||||
let stream = canvas.captureStream();
|
||||
let videoTrack = stream.getVideoTracks()[0];
|
||||
videoTrack.stop();
|
||||
|
||||
let capturer = new ImageCapture(videoTrack);
|
||||
assert_equals(videoTrack.readyState, 'ended');
|
||||
|
||||
return promise_rejects(t, 'InvalidStateError', capturer.getPhotoSettings())
|
||||
|
||||
}, 'getPhotoSettings() of an ended Track should throw "InvalidStateError"');
|
||||
|
||||
async_test(t => {
|
||||
let canvas = document.getElementById('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
context.fillStyle = 'red';
|
||||
context.fillRect(0, 0, 10, 10);
|
||||
let stream = canvas.captureStream();
|
||||
let videoTrack = stream.getVideoTracks()[0];
|
||||
|
||||
let capturer = new ImageCapture(videoTrack);
|
||||
capturer.getPhotoSettings()
|
||||
.then(t.step_func_done(() => assert_unreached('should throw "OperationError"')))
|
||||
.catch(t.step_func_done(e => assert_equals(e.name, 'OperationError')))
|
||||
videoTrack.stop();
|
||||
}, 'throw "OperationError" when the MediaStreamTrack is stopped while getting photo settings');
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -26,4 +26,36 @@ image_capture_test(async t => {
|
|||
|
||||
}, 'exercises ImageCapture.takePhoto()');
|
||||
|
||||
image_capture_test(async t => {
|
||||
let canvas = document.getElementById('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
context.fillStyle = 'red';
|
||||
context.fillRect(0, 0, 10, 10);
|
||||
let stream = canvas.captureStream();
|
||||
|
||||
let capturer = new ImageCapture(stream.getVideoTracks()[0]);
|
||||
let blob = await capturer.takePhoto(null);
|
||||
|
||||
// JS Blob is almost-opaque, can only check |type| and |size|.
|
||||
assert_equals(blob.type, 'image/cat');
|
||||
assert_equals(blob.size, 2);
|
||||
|
||||
}, 'exercises ImageCapture.takePhoto(null)');
|
||||
|
||||
promise_test(t => {
|
||||
let canvas = document.getElementById('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
context.fillStyle = 'red';
|
||||
context.fillRect(0, 0, 10, 10);
|
||||
let stream = canvas.captureStream();
|
||||
let videoTrack = stream.getVideoTracks()[0];
|
||||
videoTrack.stop();
|
||||
|
||||
let capturer = new ImageCapture(videoTrack);
|
||||
assert_equals(videoTrack.readyState, 'ended');
|
||||
|
||||
return promise_rejects(t, 'InvalidStateError', capturer.takePhoto())
|
||||
|
||||
}, 'takePhoto() of an ended Track should throw "InvalidStateError"');
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! Generated by mixed-content/generic/tools/generate.py using mixed-content/generic/template/test.release.html.template. -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Mixed-Content: Blockable content</title>
|
||||
<meta charset='utf-8'>
|
||||
<meta name="description" content="Test behavior of blockable content.">
|
||||
<link rel="author" title="Kristijan Burnik" href="burnik@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/mixed-content/#category-blockable">
|
||||
<meta name="assert" content="opt_in_method: http-csp
|
||||
origin: cross-origin-http
|
||||
source_scheme: https
|
||||
context_nesting: top-level
|
||||
redirection: keep-scheme-redirect
|
||||
subresource: classic-data-worker-fetch
|
||||
expectation: blocked">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/mixed-content/generic/common.js"></script>
|
||||
<script src="/mixed-content/generic/mixed-content-test-case.js?pipe=sub"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
MixedContentTestCase(
|
||||
{
|
||||
"opt_in_method": "http-csp",
|
||||
"origin": "cross-origin-http",
|
||||
"source_scheme": "https",
|
||||
"context_nesting": "top-level",
|
||||
"redirection": "keep-scheme-redirect",
|
||||
"subresource": "classic-data-worker-fetch",
|
||||
"expectation": "blocked"
|
||||
},
|
||||
document.querySelector("meta[name=assert]").content,
|
||||
new SanityChecker()
|
||||
).start();
|
||||
</script>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
Content-Security-Policy: block-all-mixed-content
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! Generated by mixed-content/generic/tools/generate.py using mixed-content/generic/template/test.release.html.template. -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Mixed-Content: Blockable content</title>
|
||||
<meta charset='utf-8'>
|
||||
<meta name="description" content="Test behavior of blockable content.">
|
||||
<link rel="author" title="Kristijan Burnik" href="burnik@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/mixed-content/#category-blockable">
|
||||
<meta name="assert" content="opt_in_method: http-csp
|
||||
origin: cross-origin-http
|
||||
source_scheme: https
|
||||
context_nesting: top-level
|
||||
redirection: no-redirect
|
||||
subresource: classic-data-worker-fetch
|
||||
expectation: blocked">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/mixed-content/generic/common.js"></script>
|
||||
<script src="/mixed-content/generic/mixed-content-test-case.js?pipe=sub"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
MixedContentTestCase(
|
||||
{
|
||||
"opt_in_method": "http-csp",
|
||||
"origin": "cross-origin-http",
|
||||
"source_scheme": "https",
|
||||
"context_nesting": "top-level",
|
||||
"redirection": "no-redirect",
|
||||
"subresource": "classic-data-worker-fetch",
|
||||
"expectation": "blocked"
|
||||
},
|
||||
document.querySelector("meta[name=assert]").content,
|
||||
new SanityChecker()
|
||||
).start();
|
||||
</script>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
Content-Security-Policy: block-all-mixed-content
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! Generated by mixed-content/generic/tools/generate.py using mixed-content/generic/template/test.release.html.template. -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Mixed-Content: Blockable content</title>
|
||||
<meta charset='utf-8'>
|
||||
<meta name="description" content="Test behavior of blockable content.">
|
||||
<link rel="author" title="Kristijan Burnik" href="burnik@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/mixed-content/#category-blockable">
|
||||
<meta name="assert" content="opt_in_method: http-csp
|
||||
origin: cross-origin-http
|
||||
source_scheme: https
|
||||
context_nesting: top-level
|
||||
redirection: swap-scheme-redirect
|
||||
subresource: classic-data-worker-fetch
|
||||
expectation: blocked">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/mixed-content/generic/common.js"></script>
|
||||
<script src="/mixed-content/generic/mixed-content-test-case.js?pipe=sub"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
MixedContentTestCase(
|
||||
{
|
||||
"opt_in_method": "http-csp",
|
||||
"origin": "cross-origin-http",
|
||||
"source_scheme": "https",
|
||||
"context_nesting": "top-level",
|
||||
"redirection": "swap-scheme-redirect",
|
||||
"subresource": "classic-data-worker-fetch",
|
||||
"expectation": "blocked"
|
||||
},
|
||||
document.querySelector("meta[name=assert]").content,
|
||||
new SanityChecker()
|
||||
).start();
|
||||
</script>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
Content-Security-Policy: block-all-mixed-content
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! Generated by mixed-content/generic/tools/generate.py using mixed-content/generic/template/test.release.html.template. -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Mixed-Content: Blockable content</title>
|
||||
<meta charset='utf-8'>
|
||||
<meta name="description" content="Test behavior of blockable content.">
|
||||
<link rel="author" title="Kristijan Burnik" href="burnik@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/mixed-content/#category-blockable">
|
||||
<meta name="assert" content="opt_in_method: http-csp
|
||||
origin: same-host-http
|
||||
source_scheme: https
|
||||
context_nesting: top-level
|
||||
redirection: keep-scheme-redirect
|
||||
subresource: classic-data-worker-fetch
|
||||
expectation: blocked">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/mixed-content/generic/common.js"></script>
|
||||
<script src="/mixed-content/generic/mixed-content-test-case.js?pipe=sub"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
MixedContentTestCase(
|
||||
{
|
||||
"opt_in_method": "http-csp",
|
||||
"origin": "same-host-http",
|
||||
"source_scheme": "https",
|
||||
"context_nesting": "top-level",
|
||||
"redirection": "keep-scheme-redirect",
|
||||
"subresource": "classic-data-worker-fetch",
|
||||
"expectation": "blocked"
|
||||
},
|
||||
document.querySelector("meta[name=assert]").content,
|
||||
new SanityChecker()
|
||||
).start();
|
||||
</script>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
Content-Security-Policy: block-all-mixed-content
|
||||
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