mirror of
https://github.com/servo/servo.git
synced 2025-08-05 21:50:18 +01:00
Update web-platform-tests to revision 3564c21f260aeb6862ceaa56bee9c39b74db3440
This commit is contained in:
WPT Sync Bot
parent
78438113d4
commit
555167ffdb
141 changed files with 3095 additions and 1280 deletions
|
|
@ -7,7 +7,7 @@
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[Opening a blob URL in a new window immediately before revoking it works.]
|
[Opening a blob URL in a new window immediately before revoking it works.]
|
||||||
expected: FAIL
|
expected: TIMEOUT
|
||||||
|
|
||||||
[Opening a blob URL in a noopener about:blank window immediately before revoking it works.]
|
[Opening a blob URL in a noopener about:blank window immediately before revoking it works.]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,2 @@
|
||||||
|
[abspos-block-level-001.html]
|
||||||
|
expected: FAIL
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[toogle-abspos-on-relpos-inline-child.html]
|
||||||
|
expected: FAIL
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[background-position-x-interpolation.html]
|
||||||
|
[background-position-x-interpolation]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[background-position-y-interpolation.html]
|
||||||
|
[background-position-y-interpolation]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[box-shadow-interpolation.html]
|
||||||
|
[box-shadow-interpolation]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
[css3-text-line-break-baspglwj-094.html]
|
|
||||||
type: testharness
|
|
||||||
[ ]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
[shaping-024.html]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
[shaping-025.html]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
[trailing-space-position-001.html]
|
||||||
|
[CSS Test: Positions of trailing collapsible spaces]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[CSS Test: Positions of trailing collapsible spaces 2]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[matchMedia-display-none-iframe.html]
|
||||||
|
expected: ERROR
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[table-with-border-client-width-height.html]
|
||||||
|
[Table's clientWidth/Height and OffsetWidth/Height should be the same]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
[backpressure]
|
[backpressure]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
||||||
[backpressure.any.sharedworker.html]
|
[backpressure.any.sharedworker.html]
|
||||||
[backpressure]
|
[backpressure]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
@ -11,7 +12,32 @@
|
||||||
[backpressure]
|
[backpressure]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[write() should not complete until read relieves backpressure for TextEncoderStream]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[additional writes should wait for backpressure to be relieved for class TextDecoderStream]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[write() should not complete until read relieves backpressure for TextDecoderStream]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[additional writes should wait for backpressure to be relieved for class TextEncoderStream]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
||||||
[backpressure.any.worker.html]
|
[backpressure.any.worker.html]
|
||||||
[backpressure]
|
[backpressure]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[write() should not complete until read relieves backpressure for TextEncoderStream]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[additional writes should wait for backpressure to be relieved for class TextDecoderStream]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[write() should not complete until read relieves backpressure for TextDecoderStream]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[additional writes should wait for backpressure to be relieved for class TextEncoderStream]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -315,18 +315,12 @@
|
||||||
[<iframe>: combined response Content-Type: text/html */*]
|
[<iframe>: combined response Content-Type: text/html */*]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[<iframe>: separate response Content-Type: text/html;" text/plain]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[<iframe>: separate response Content-Type: text/html */*;charset=gbk]
|
[<iframe>: separate response Content-Type: text/html */*;charset=gbk]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[<iframe>: separate response Content-Type: text/html */*]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[<iframe>: separate response Content-Type: text/plain */*]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[<iframe>: separate response Content-Type: text/html;" \\" text/plain]
|
[<iframe>: separate response Content-Type: text/html;" \\" text/plain]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: combined response Content-Type: text/html */*;charset=gbk]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -56,6 +56,9 @@
|
||||||
[separate text/javascript x/x]
|
[separate text/javascript x/x]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[separate text/javascript error]
|
[separate text/javascript;charset=windows-1252 error text/javascript]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[separate text/javascript;charset=windows-1252 text/javascript]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,3 +11,9 @@
|
||||||
[X-Content-Type-Options%3A%20nosniff%0C]
|
[X-Content-Type-Options%3A%20nosniff%0C]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[X-Content-Type-Options%3A%20'NosniFF']
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[X-Content-Type-Options%3A%0D%0AX-Content-Type-Options%3A%20nosniff]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
[traverse_the_history_4.html]
|
|
||||||
[Multiple history traversals, last would be aborted]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
|
|
@ -1,24 +1,5 @@
|
||||||
[open-features-negative-top-left.html]
|
[open-features-negative-top-left.html]
|
||||||
type: testharness
|
type: testharness
|
||||||
expected: TIMEOUT
|
|
||||||
[HTML: window.open `features`: negative values for `top`, `left`]
|
[HTML: window.open `features`: negative values for `top`, `left`]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[features "top=-204" should NOT set "top=204"]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
||||||
[features "top=-204.5" should NOT set "top=204"]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
||||||
[features "left=-204" should NOT set "left=204"]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
||||||
[features "top=-0" should NOT set "top=204"]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
||||||
[features "left=-204.5" should NOT set "left=204"]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
||||||
[features "left=-0" should NOT set "left=204"]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
[img-aspect-ratio.tentative.html]
|
[img-aspect-ratio.html]
|
||||||
[Image width and height attributes are used to infer aspect-ratio]
|
[Image width and height attributes are used to infer aspect-ratio]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
[non-active-document.html]
|
|
||||||
[DOMParser]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[createHTMLDocument]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[<template>]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
[invalid-content-type.html]
|
|
||||||
expected: TIMEOUT
|
|
||||||
[text/json+blah]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
||||||
[application/json+blah]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
||||||
[application/json+protobuf]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
||||||
[application/blahjson]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
||||||
[image/json]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
||||||
[text/x-json]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
[module.html]
|
|
||||||
expected: TIMEOUT
|
|
||||||
[JSON modules]
|
|
||||||
expected: NOTRUN
|
|
||||||
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
[non-object.any.html]
|
|
||||||
[non-object]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
|
|
||||||
[non-object.any.worker.html]
|
|
||||||
[non-object]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
|
|
||||||
[non-object.any.serviceworker.html]
|
|
||||||
[non-object]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
|
|
||||||
[non-object.any.sharedworker.html]
|
|
||||||
[non-object]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
[parse-error.html]
|
|
||||||
expected: TIMEOUT
|
|
||||||
[JSON modules: parse error]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
[utf8.html]
|
|
||||||
expected: TIMEOUT
|
|
||||||
[windows-1252]
|
|
||||||
expected: NOTRUN
|
|
||||||
|
|
||||||
[utf-7]
|
|
||||||
expected: NOTRUN
|
|
||||||
|
|
||||||
[shift-jis]
|
|
||||||
expected: NOTRUN
|
|
||||||
|
|
||||||
[utf-8]
|
|
||||||
expected: NOTRUN
|
|
||||||
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
[valid-content-type.html]
|
|
||||||
expected: TIMEOUT
|
|
||||||
[image/svg+json]
|
|
||||||
expected: NOTRUN
|
|
||||||
|
|
||||||
[text/html+json]
|
|
||||||
expected: NOTRUN
|
|
||||||
|
|
||||||
[application/json]
|
|
||||||
expected: NOTRUN
|
|
||||||
|
|
||||||
[text/json]
|
|
||||||
expected: NOTRUN
|
|
||||||
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
[script-onerror-insertion-point-2.html]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
[nested-context-navigations-iframe.html]
|
[nested-context-navigations-iframe.html]
|
||||||
expected: CRASH
|
expected: TIMEOUT
|
||||||
[Test that iframe navigations are not observable by the parent, even after history navigations by the parent]
|
[Test that iframe navigations are not observable by the parent, even after history navigations by the parent]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
[abort.any.worker.html]
|
||||||
|
[abort after connect should do nothing]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[abort during handshake should work]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[abort before constructing should prevent connection]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
||||||
|
[abort.any.sharedworker.html]
|
||||||
|
[abort]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
||||||
|
[abort.any.html]
|
||||||
|
[abort after connect should do nothing]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[abort during handshake should work]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[abort before constructing should prevent connection]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
||||||
|
[abort.any.serviceworker.html]
|
||||||
|
[abort]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[getViewerPose_emulatedPosition.https.html]
|
||||||
|
[XRFrame getViewerPose has emulatedPosition set properly.]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -2,3 +2,6 @@
|
||||||
[document.featurePolicy.features should advertise xr.]
|
[document.featurePolicy.features should advertise xr.]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[document.featurePolicy.features should advertise xr-spatial-tracking.]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
[webxr_feature_policy.https.html]
|
||||||
|
expected: ERROR
|
||||||
|
[Validate isSessionSupported behavior without xr-spatial-tracking policy]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Validate requestSession behavior without xr-spatial-tracking policy]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
[xrBoundedReferenceSpace_updates.https.html]
|
[xrBoundedReferenceSpace_updates.https.html]
|
||||||
expected: TIMEOUT
|
expected: ERROR
|
||||||
['XRBoundedReferenceSpace updates properly when the changes are applied]
|
['XRBoundedReferenceSpace updates properly when the changes are applied]
|
||||||
expected: TIMEOUT
|
expected: TIMEOUT
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[xrInputSource_emulatedPosition.https.html]
|
||||||
|
[Poses from XRInputSource.gripSpace have emulatedPosition set properly]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[Worker-constructor.html]
|
||||||
|
expected: ERROR
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
suggested_reviewers:
|
suggested_reviewers:
|
||||||
|
- foolip
|
||||||
- jgraham
|
- jgraham
|
||||||
- jugglinmike
|
- jugglinmike
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,11 @@ on:
|
||||||
push:
|
push:
|
||||||
branches:
|
branches:
|
||||||
- master
|
- master
|
||||||
|
pull_request:
|
||||||
|
paths:
|
||||||
|
- 'docs/**'
|
||||||
|
- 'resources/**'
|
||||||
|
- 'tools/**'
|
||||||
name: Build & Publish Documentation Website
|
name: Build & Publish Documentation Website
|
||||||
jobs:
|
jobs:
|
||||||
website-build-and-publish:
|
website-build-and-publish:
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
on: pull_request
|
|
||||||
name: Synchronize the Pull Request Preview
|
|
||||||
jobs:
|
|
||||||
update-pr-preview:
|
|
||||||
runs-on: ubuntu-18.04
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v1
|
|
||||||
with:
|
|
||||||
ref: refs/heads/master
|
|
||||||
fetch-depth: 50
|
|
||||||
- name: update-pr-preview
|
|
||||||
uses: ./tools/docker/github
|
|
||||||
env:
|
|
||||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
||||||
with:
|
|
||||||
entrypoint: python
|
|
||||||
args: tools/ci/update_pr_preview.py https://api.github.com
|
|
||||||
|
|
@ -25,6 +25,7 @@
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
will-change: transform; /* force compositing */
|
||||||
}
|
}
|
||||||
|
|
||||||
.removed {
|
.removed {
|
||||||
|
|
@ -74,4 +75,4 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,7 @@
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
will-change: transform; /* force compositing */
|
||||||
}
|
}
|
||||||
|
|
||||||
#contents {
|
#contents {
|
||||||
|
|
@ -64,4 +65,4 @@
|
||||||
takeScreenshot();
|
takeScreenshot();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<link rel="help" href="https://compat.spec.whatwg.org/#css-gradients-webkit-radial-gradient">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/css3-images/#radial-gradients">
|
||||||
|
<meta name="assert" content="Negative radii values are invalid.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script>
|
||||||
|
test(function() {
|
||||||
|
assert_true(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, 3% 4%, red, blue)"));
|
||||||
|
}, '-webkit-radial-gradient accepts comma before color stops.');
|
||||||
|
|
||||||
|
test(function() {
|
||||||
|
assert_false(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, 3% 4% red, blue)"));
|
||||||
|
}, '-webkit-radial-gradient rejects missing comma before color stops.');
|
||||||
|
</script>
|
||||||
|
|
@ -6,16 +6,16 @@
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
<script>
|
<script>
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_true(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, 3% 4% red, blue)"));
|
assert_true(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, 3% 4%, red, blue)"));
|
||||||
}, '-webkit-radial-gradient accepts positive radii.');
|
}, '-webkit-radial-gradient accepts positive radii.');
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_true(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, 0% 4% red, blue)"));
|
assert_true(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, 0% 4%, red, blue)"));
|
||||||
}, '-webkit-radial-gradient accepts zero radii.');
|
}, '-webkit-radial-gradient accepts zero radii.');
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_false(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, -3% 4% red, blue)"));
|
assert_false(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, -3% 4%, red, blue)"));
|
||||||
assert_false(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, 3% -4% red, blue)"));
|
assert_false(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, 3% -4%, red, blue)"));
|
||||||
assert_false(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, -3% -4% red, blue)"));
|
assert_false(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, -3% -4%, red, blue)"));
|
||||||
}, '-webkit-radial-gradient rejects negative radii.');
|
}, '-webkit-radial-gradient rejects negative radii.');
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
self.GLOBAL = {
|
||||||
|
isWindow: function() { return false; },
|
||||||
|
isWorker: function() { return true; },
|
||||||
|
};
|
||||||
|
importScripts("/resources/testharness.js");
|
||||||
|
|
||||||
|
self.addEventListener('install', event => {
|
||||||
|
event.waitUntil((async () => {
|
||||||
|
try {
|
||||||
|
await cookieStore.subscribeToChanges([
|
||||||
|
{ name: 'cookie-name', matchType: 'equals',
|
||||||
|
url: '/cookie-store/scope/path' }]);
|
||||||
|
|
||||||
|
// If the worker enters the "redundant" state, the UA may terminate it
|
||||||
|
// before all tests have been reported to the client. Stifle errors in
|
||||||
|
// order to avoid this and ensure all tests are consistently reported.
|
||||||
|
} catch (err) {}
|
||||||
|
})());
|
||||||
|
});
|
||||||
|
|
||||||
|
self.addEventListener('message', async event => {
|
||||||
|
const subscriptions = await cookieStore.getChangeSubscriptions();
|
||||||
|
event.ports[0].postMessage(subscriptions.length);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<!doctype html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Async Cookies: reset cookie change subscription list</title>
|
||||||
|
<link rel="help" href="https://github.com/WICG/cookie-store">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/service-workers/service-worker/resources/test-helpers.sub.js">
|
||||||
|
</script>
|
||||||
|
<script src='resources/helpers.js'></script>
|
||||||
|
<script>
|
||||||
|
const worker_url = 'serviceworker_cookieStore_subscriptions_reset.sub.js';
|
||||||
|
const scope = '/cookie-store/';
|
||||||
|
|
||||||
|
async function getSubscriptionCount(serviceWorker) {
|
||||||
|
return sendMessageOverChannel('', serviceWorker);
|
||||||
|
}
|
||||||
|
|
||||||
|
promise_test(async t => {
|
||||||
|
const registration = await service_worker_unregister_and_register(
|
||||||
|
t, worker_url, scope);
|
||||||
|
t.add_cleanup(() => registration.unregister());
|
||||||
|
await wait_for_state(t, registration.installing, 'activated');
|
||||||
|
assert_equals(await getSubscriptionCount(registration.active), 1,
|
||||||
|
'subscription count before unregistration');
|
||||||
|
|
||||||
|
await registration.unregister();
|
||||||
|
|
||||||
|
const new_registration = await navigator.serviceWorker.register(
|
||||||
|
worker_url, { scope });
|
||||||
|
t.add_cleanup(() => new_registration.unregister());
|
||||||
|
await wait_for_state(t, new_registration.installing, 'activated');
|
||||||
|
|
||||||
|
assert_equals(await getSubscriptionCount(new_registration.active), 1,
|
||||||
|
'subscription count after unregistration');
|
||||||
|
}, `cookiechange subscription list resets across service worker
|
||||||
|
unregistrations`);
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<style>
|
||||||
|
.rtl {
|
||||||
|
direction: rtl
|
||||||
|
}
|
||||||
|
.absolute {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.green {
|
||||||
|
background-color: lime;
|
||||||
|
padding: 0 1ch;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<span class="absolute green">Block-level abspos before inline content</span>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>Inline content</div>
|
||||||
|
<div>Block-level abspos after inline content</div>
|
||||||
|
</div>
|
||||||
|
<div class=rtl>
|
||||||
|
<span class="absolute green">Block-level abspos before inline content</span>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
<div class=rtl>
|
||||||
|
<div>Inline content</div>
|
||||||
|
<div>Block-level abspos after inline content</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>CSS Test: Static positions of block-level absolutely positioned objects</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#static-position">
|
||||||
|
<link rel="match" href="abspos-block-level-001-ref.html">
|
||||||
|
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
|
||||||
|
<style>
|
||||||
|
.rtl {
|
||||||
|
direction: rtl
|
||||||
|
}
|
||||||
|
.absolute {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.red {
|
||||||
|
color: red;
|
||||||
|
padding: 0 1ch;
|
||||||
|
}
|
||||||
|
.green {
|
||||||
|
background-color: lime;
|
||||||
|
padding: 0 1ch;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<div class="absolute green">Block-level abspos before inline content</div>
|
||||||
|
<span class="red">Inline content</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>Inline content</span>
|
||||||
|
<div class=absolute>Block-level abspos after inline content</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class=rtl>
|
||||||
|
<div class="absolute green">Block-level abspos before inline content</div>
|
||||||
|
<span class="red">Inline content</span>
|
||||||
|
</div>
|
||||||
|
<div class=rtl>
|
||||||
|
<span>Inline content</span>
|
||||||
|
<div class=absolute>Block-level abspos after inline content</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||||
|
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=732397">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#containing-block-details">
|
||||||
|
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||||
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||||
|
<div style="width:50px; height:50px; padding-left:50px; padding-top:50px; background:red;">
|
||||||
|
<span style="position:relative;">
|
||||||
|
<div id="victim" style="position:absolute; top:-50px; left:-50px; width:100px; height:100px; background:green;"></div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
document.body.offsetTop;
|
||||||
|
victim.style.position = "static";
|
||||||
|
document.body.offsetTop;
|
||||||
|
victim.style.position = "absolute";
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position">
|
||||||
|
<meta name="test" content="background-position-x supports animation">
|
||||||
|
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/interpolation-testcommon.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.parent {
|
||||||
|
background-position-x: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.target {
|
||||||
|
background-position-x: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_interpolation({
|
||||||
|
property: 'background-position-x',
|
||||||
|
from: neutralKeyframe,
|
||||||
|
to: '80px',
|
||||||
|
}, [
|
||||||
|
{at: -0.25, expect: '30px'},
|
||||||
|
{at: 0, expect: '40px'},
|
||||||
|
{at: 0.25, expect: '50px'},
|
||||||
|
{at: 0.5, expect: '60px'},
|
||||||
|
{at: 0.75, expect: '70px'},
|
||||||
|
{at: 1, expect: '80px'},
|
||||||
|
{at: 1.25, expect: '90px'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'background-position-x',
|
||||||
|
from: 'initial',
|
||||||
|
to: 'right',
|
||||||
|
}, [
|
||||||
|
{at: -0.25, expect: '-25%'},
|
||||||
|
{at: 0, expect: '0%'},
|
||||||
|
{at: 0.25, expect: '25%'},
|
||||||
|
{at: 0.5, expect: '50%'},
|
||||||
|
{at: 0.75, expect: '75%'},
|
||||||
|
{at: 1, expect: '100%'},
|
||||||
|
{at: 1.25, expect: '125%'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'background-position-x',
|
||||||
|
from: 'inherit',
|
||||||
|
to: '80px',
|
||||||
|
}, [
|
||||||
|
{at: -0.25, expect: '55px'},
|
||||||
|
{at: 0, expect: '60px'},
|
||||||
|
{at: 0.25, expect: '65px'},
|
||||||
|
{at: 0.5, expect: '70px'},
|
||||||
|
{at: 0.75, expect: '75px'},
|
||||||
|
{at: 1, expect: '80px'},
|
||||||
|
{at: 1.25, expect: '85px'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'background-position-x',
|
||||||
|
from: '300px, 400px',
|
||||||
|
to: '500px, 600px, 700px',
|
||||||
|
}, [
|
||||||
|
{at: -0.25, expect: '250px, 350px, 200px, 375px, 225px, 325px'},
|
||||||
|
{at: 0, expect: '300px, 400px, 300px, 400px, 300px, 400px'},
|
||||||
|
{at: 0.25, expect: '350px, 450px, 400px, 425px, 375px, 475px'},
|
||||||
|
{at: 0.5, expect: '400px, 500px, 500px, 450px, 450px, 550px'},
|
||||||
|
{at: 0.75, expect: '450px, 550px, 600px, 475px, 525px, 625px'},
|
||||||
|
{at: 1, expect: '500px, 600px, 700px, 500px, 600px, 700px'},
|
||||||
|
{at: 1.25, expect: '550px, 650px, 800px, 525px, 675px, 775px'},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position">
|
||||||
|
<meta name="test" content="background-position-y supports animation">
|
||||||
|
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/interpolation-testcommon.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.parent {
|
||||||
|
background-position-y: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.target {
|
||||||
|
background-position-y: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_interpolation({
|
||||||
|
property: 'background-position-y',
|
||||||
|
from: neutralKeyframe,
|
||||||
|
to: '80px',
|
||||||
|
}, [
|
||||||
|
{at: -0.25, expect: '30px'},
|
||||||
|
{at: 0, expect: '40px'},
|
||||||
|
{at: 0.25, expect: '50px'},
|
||||||
|
{at: 0.5, expect: '60px'},
|
||||||
|
{at: 0.75, expect: '70px'},
|
||||||
|
{at: 1, expect: '80px'},
|
||||||
|
{at: 1.25, expect: '90px'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'background-position-y',
|
||||||
|
from: 'initial',
|
||||||
|
to: 'bottom',
|
||||||
|
}, [
|
||||||
|
{at: -0.25, expect: '-25%'},
|
||||||
|
{at: 0, expect: '0%'},
|
||||||
|
{at: 0.25, expect: '25%'},
|
||||||
|
{at: 0.5, expect: '50%'},
|
||||||
|
{at: 0.75, expect: '75%'},
|
||||||
|
{at: 1, expect: '100%'},
|
||||||
|
{at: 1.25, expect: '125%'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'background-position-y',
|
||||||
|
from: 'inherit',
|
||||||
|
to: '80px',
|
||||||
|
}, [
|
||||||
|
{at: -0.25, expect: '55px'},
|
||||||
|
{at: 0, expect: '60px'},
|
||||||
|
{at: 0.25, expect: '65px'},
|
||||||
|
{at: 0.5, expect: '70px'},
|
||||||
|
{at: 0.75, expect: '75px'},
|
||||||
|
{at: 1, expect: '80px'},
|
||||||
|
{at: 1.25, expect: '85px'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'background-position-y',
|
||||||
|
from: '300px, 400px',
|
||||||
|
to: '500px, 600px, 700px',
|
||||||
|
}, [
|
||||||
|
{at: -0.25, expect: '250px, 350px, 200px, 375px, 225px, 325px'},
|
||||||
|
{at: 0, expect: '300px, 400px, 300px, 400px, 300px, 400px'},
|
||||||
|
{at: 0.25, expect: '350px, 450px, 400px, 425px, 375px, 475px'},
|
||||||
|
{at: 0.5, expect: '400px, 500px, 500px, 450px, 450px, 550px'},
|
||||||
|
{at: 0.75, expect: '450px, 550px, 600px, 475px, 525px, 625px'},
|
||||||
|
{at: 1, expect: '500px, 600px, 700px, 500px, 600px, 700px'},
|
||||||
|
{at: 1.25, expect: '550px, 650px, 800px, 525px, 675px, 775px'},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
@ -0,0 +1,171 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#box-shadow">
|
||||||
|
<meta name="test" content="box-shadow supports animation">
|
||||||
|
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/interpolation-testcommon.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.parent {
|
||||||
|
box-shadow: 30px 10px 30px 10px black;
|
||||||
|
}
|
||||||
|
.target {
|
||||||
|
display: inline-block;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
font-size: 3px;
|
||||||
|
border: 2px solid;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
color: green;
|
||||||
|
box-shadow: 10px 30px 10px 30px black;
|
||||||
|
}
|
||||||
|
.expected {
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_interpolation({
|
||||||
|
property: 'box-shadow',
|
||||||
|
from: neutralKeyframe,
|
||||||
|
to: '20px 20px 20px 20px black',
|
||||||
|
}, [
|
||||||
|
{at: -0.3, expect: 'rgb(0, 0, 0) 7px 33px 7px 33px'},
|
||||||
|
{at: 0, expect: 'rgb(0, 0, 0) 10px 30px 10px 30px'},
|
||||||
|
{at: 0.3, expect: 'rgb(0, 0, 0) 13px 27px 13px 27px'},
|
||||||
|
{at: 0.6, expect: 'rgb(0, 0, 0) 16px 24px 16px 24px'},
|
||||||
|
{at: 1, expect: 'rgb(0, 0, 0) 20px 20px 20px 20px'},
|
||||||
|
{at: 1.5, expect: 'rgb(0, 0, 0) 25px 15px 25px 15px'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'box-shadow',
|
||||||
|
from: 'initial',
|
||||||
|
to: '20px 20px 20px 20px black',
|
||||||
|
}, [
|
||||||
|
{at: -0.3, expect: 'rgba(0, 0, 0, 0) -6px -6px 0px -6px'},
|
||||||
|
{at: 0, expect: 'rgba(0, 0, 0, 0) 0px 0px 0px 0px'},
|
||||||
|
{at: 0.3, expect: 'rgba(0, 0, 0, 0.3) 6px 6px 6px 6px'},
|
||||||
|
{at: 0.6, expect: 'rgba(0, 0, 0, 0.6) 12px 12px 12px 12px'},
|
||||||
|
{at: 1, expect: 'rgb(0, 0, 0) 20px 20px 20px 20px'},
|
||||||
|
{at: 1.5, expect: 'rgb(0, 0, 0) 30px 30px 30px 30px'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'box-shadow',
|
||||||
|
from: 'inherit',
|
||||||
|
to: '20px 20px 20px 20px black',
|
||||||
|
}, [
|
||||||
|
{at: -0.3, expect: 'rgb(0, 0, 0) 33px 7px 33px 7px'},
|
||||||
|
{at: 0, expect: 'rgb(0, 0, 0) 30px 10px 30px 10px'},
|
||||||
|
{at: 0.3, expect: 'rgb(0, 0, 0) 27px 13px 27px 13px'},
|
||||||
|
{at: 0.6, expect: 'rgb(0, 0, 0) 24px 16px 24px 16px'},
|
||||||
|
{at: 1, expect: 'rgb(0, 0, 0) 20px 20px 20px 20px'},
|
||||||
|
{at: 1.5, expect: 'rgb(0, 0, 0) 15px 25px 15px 25px'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'box-shadow',
|
||||||
|
from: 'unset',
|
||||||
|
to: '20px 20px 20px 20px black',
|
||||||
|
}, [
|
||||||
|
{at: -0.3, expect: 'rgba(0, 0, 0, 0) -6px -6px 0px -6px'},
|
||||||
|
{at: 0, expect: 'rgba(0, 0, 0, 0) 0px 0px 0px 0px'},
|
||||||
|
{at: 0.3, expect: 'rgba(0, 0, 0, 0.3) 6px 6px 6px 6px'},
|
||||||
|
{at: 0.6, expect: 'rgba(0, 0, 0, 0.6) 12px 12px 12px 12px'},
|
||||||
|
{at: 1, expect: 'rgb(0, 0, 0) 20px 20px 20px 20px'},
|
||||||
|
{at: 1.5, expect: 'rgb(0, 0, 0) 30px 30px 30px 30px'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Test basic functionality, and clipping blur at 0
|
||||||
|
test_interpolation({
|
||||||
|
property: 'box-shadow',
|
||||||
|
from: '15px 10px 5px 6px black',
|
||||||
|
to: '-15px -10px 25px -4px orange',
|
||||||
|
}, [
|
||||||
|
{at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px 9px'},
|
||||||
|
{at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px 6px'},
|
||||||
|
{at: 0.3, expect: 'rgb(77, 50, 0) 6px 4px 11px 3px'},
|
||||||
|
{at: 0.6, expect: 'rgb(153, 99, 0) -3px -2px 17px 0px'},
|
||||||
|
{at: 1, expect: 'rgb(255, 165, 0) -15px -10px 25px -4px'},
|
||||||
|
{at: 1.5, expect: 'rgb(255, 248, 0) -30px -20px 35px -9px'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Test with color as first value.
|
||||||
|
test_interpolation({
|
||||||
|
property: 'box-shadow',
|
||||||
|
from: 'black 15px 10px 5px 6px',
|
||||||
|
to: 'orange -15px -10px 25px -4px',
|
||||||
|
}, [
|
||||||
|
{at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px 9px'},
|
||||||
|
{at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px 6px'},
|
||||||
|
{at: 0.3, expect: 'rgb(77, 50, 0) 6px 4px 11px 3px'},
|
||||||
|
{at: 0.6, expect: 'rgb(153, 99, 0) -3px -2px 17px 0px'},
|
||||||
|
{at: 1, expect: 'rgb(255, 165, 0) -15px -10px 25px -4px'},
|
||||||
|
{at: 1.5, expect: 'rgb(255, 248, 0) -30px -20px 35px -9px'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'box-shadow',
|
||||||
|
from: '15px 10px 5px 6px black inset',
|
||||||
|
to: '-15px -10px 25px -4px orange inset',
|
||||||
|
}, [
|
||||||
|
{at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px 9px inset'},
|
||||||
|
{at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px 6px inset'},
|
||||||
|
{at: 0.3, expect: 'rgb(77, 50, 0) 6px 4px 11px 3px inset'},
|
||||||
|
{at: 0.6, expect: 'rgb(153, 99, 0) -3px -2px 17px 0px inset'},
|
||||||
|
{at: 1, expect: 'rgb(255, 165, 0) -15px -10px 25px -4px inset'},
|
||||||
|
{at: 1.5, expect: 'rgb(255, 248, 0) -30px -20px 35px -9px inset'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'box-shadow',
|
||||||
|
from: '15px 10px 5px 6px black',
|
||||||
|
to: '-15px -10px 25px -4px',
|
||||||
|
}, [
|
||||||
|
{at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px 9px'},
|
||||||
|
{at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px 6px'},
|
||||||
|
{at: 0.3, expect: 'rgb(0, 38, 0) 6px 4px 11px 3px'},
|
||||||
|
{at: 0.6, expect: 'rgb(0, 77, 0) -3px -2px 17px 0px'},
|
||||||
|
{at: 1, expect: 'rgb(0, 128, 0) -15px -10px 25px -4px'},
|
||||||
|
{at: 1.5, expect: 'rgb(0, 192, 0) -30px -20px 35px -9px'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'box-shadow',
|
||||||
|
from: '10px 10px 10px 10px black',
|
||||||
|
to: '10px 10px 10px 10px currentColor',
|
||||||
|
}, [
|
||||||
|
{at: -0.3, expect: 'rgb(0, 0, 0) 10px 10px 10px 10px'},
|
||||||
|
{at: 0, expect: 'rgb(0, 0, 0) 10px 10px 10px 10px'},
|
||||||
|
{at: 0.3, expect: 'rgb(0, 38, 0) 10px 10px 10px 10px'},
|
||||||
|
{at: 0.6, expect: 'rgb(0, 77, 0) 10px 10px 10px 10px'},
|
||||||
|
{at: 1, expect: 'rgb(0, 128, 0) 10px 10px 10px 10px'},
|
||||||
|
{at: 1.5, expect: 'rgb(0, 192, 0) 10px 10px 10px 10px'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Test padding shorter lists
|
||||||
|
test_interpolation({
|
||||||
|
property: 'box-shadow',
|
||||||
|
from: '10px 20px rgba(255, 255, 0, 0.5), inset 5px 10em #008000',
|
||||||
|
to: 'none',
|
||||||
|
}, [
|
||||||
|
{at: -0.3, expect: 'rgba(255, 255, 0, 0.65) 13px 26px 0px 0px, rgb(0, 166, 0) 6.5px 39px 0px 0px inset'},
|
||||||
|
{at: 0, expect: 'rgba(255, 255, 0, 0.5) 10px 20px 0px 0px, rgb(0, 128, 0) 5px 30px 0px 0px inset'},
|
||||||
|
{at: 0.3, expect: 'rgba(255, 255, 0, 0.353) 7px 14px 0px 0px, rgba(0, 128, 0, 0.7) 3.5px 21px 0px 0px inset'},
|
||||||
|
{at: 0.6, expect: 'rgba(255, 255, 0, 0.2) 4px 8px 0px 0px, rgba(0, 128, 0, 0.4) 2px 12px 0px 0px inset'},
|
||||||
|
{at: 1, expect: 'rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset'},
|
||||||
|
{at: 1.5, expect: 'rgba(0, 0, 0, 0) -5px -10px 0px 0px, rgba(0, 0, 0, 0) -2.5px -15px 0px 0px inset'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Test unmatched inset
|
||||||
|
test_no_interpolation({
|
||||||
|
property: 'box-shadow',
|
||||||
|
from: '10px 20px yellow, 5px 10px green',
|
||||||
|
to: 'inset 5px 10px green, 15px 20px blue'
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
<script src="support/testing-utils.js"></script>
|
<script src="support/testing-utils.js"></script>
|
||||||
<style>
|
<style>
|
||||||
#grid {
|
#inline-grid {
|
||||||
display: inline-grid;
|
display: inline-grid;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -34,8 +34,8 @@ document.fonts.ready.then(()=> {
|
||||||
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px");
|
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px");
|
||||||
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, auto)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0px)"]);
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, auto)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0px)"]);
|
||||||
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px");
|
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px");
|
||||||
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, minmax(50px, calc(50px + 50%)))", "repeat(2, minmax(50px, calc(50px + 50%)))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
|
||||||
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
|
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(50px, calc(50px + 50%)))", "repeat(2, minmax(50px, calc(50px + 50%)))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
|
||||||
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
|
||||||
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
|
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
|
||||||
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content repeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px repeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200px"]);
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content repeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px repeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200px"]);
|
||||||
|
|
|
||||||
|
|
@ -34,8 +34,8 @@ document.fonts.ready.then(()=> {
|
||||||
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px");
|
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px");
|
||||||
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, auto)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0px)"]);
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, auto)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0px)"]);
|
||||||
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px");
|
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px");
|
||||||
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, minmax(50px, calc(50px + 50%)))", "repeat(2, minmax(50px, calc(50px + 50%)))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
|
||||||
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
|
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(50px, calc(50px + 50%)))", "repeat(2, minmax(50px, calc(50px + 50%)))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
|
||||||
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
|
||||||
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
|
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
|
||||||
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content repeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px repeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200px"]);
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content repeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px repeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200px"]);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
<!doctype html>
|
||||||
|
<link rel="author" title="Aleks Totic" href="mailto:atotic@chromium.org">
|
||||||
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/129">
|
||||||
|
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1003373">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
--size: 100px;
|
||||||
|
--padding-size: 30px;
|
||||||
|
--too-big-size: calc(var(--size) - var(--padding-size) + 1px);
|
||||||
|
--just-right-size: calc(var(--size) - var(--padding-size));
|
||||||
|
overflow:auto;
|
||||||
|
width: var(--size);
|
||||||
|
height: var(--size);
|
||||||
|
padding-right: var(--padding-size);
|
||||||
|
padding-bottom: var(--padding-size);
|
||||||
|
background: #DDD;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.big {
|
||||||
|
width: var(--too-big-size);
|
||||||
|
height: var(--too-big-size);
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
.small {
|
||||||
|
width: var(--just-right-size);
|
||||||
|
height: var(--just-right-size);
|
||||||
|
background: yellow;
|
||||||
|
}
|
||||||
|
.bigfont {
|
||||||
|
font-size: var(--too-big-size);
|
||||||
|
font-family: Ahem;
|
||||||
|
line-height: 1;
|
||||||
|
color:green;
|
||||||
|
}
|
||||||
|
.smallfont {
|
||||||
|
font-size: var(--just-right-size);
|
||||||
|
font-family: Ahem;
|
||||||
|
line-height: 1;
|
||||||
|
color:yellow;
|
||||||
|
}
|
||||||
|
.red {
|
||||||
|
background:red;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<body onload="runTest()">
|
||||||
|
<p><span style="background:green">green</span> blocks get scrollbars, <span style="background:yellow">yellow</span> do not.</p>
|
||||||
|
<p>Block child gets only block padding.</p>
|
||||||
|
<div class="container" data-scrollbar="v">
|
||||||
|
<div class="big"></div>
|
||||||
|
</div>
|
||||||
|
<div class="container" data-scrollbar="">
|
||||||
|
<div class="small"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Inline child gets block and inline padding.</p>
|
||||||
|
<div class="container bigfont" data-scrollbar="hv">
|
||||||
|
<span>X</span>
|
||||||
|
</div>
|
||||||
|
<div class="container" style="font:36px/1 Ahem;color:green" data-scrollbar="hv">
|
||||||
|
<span>XX</span><br>XX
|
||||||
|
</div>
|
||||||
|
<div class="container smallfont" data-scrollbar="">
|
||||||
|
<span>X</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Inline block child gets block and inline padding.</p>
|
||||||
|
<div class="container" data-scrollbar="hv">
|
||||||
|
<div class="big" style="display:inline-block;vertical-align:bottom;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="container" data-scrollbar="">
|
||||||
|
<div class="small" style="display:inline-block;vertical-align:bottom;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Padding applies to linebox, not linebox overflow.</p>
|
||||||
|
<div class="container" data-scrollbar="">
|
||||||
|
<div class="small" style="display:inline-block;vertical-align:bottom">
|
||||||
|
<div style="height:90px;width:80px;background: rgba(0,0,255,0.3)"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
function hasHorizontalScrollbar(el) {
|
||||||
|
return (el.offsetHeight - el.clientHeight) > 0;
|
||||||
|
}
|
||||||
|
function hasVerticalScrollbar(el) {
|
||||||
|
return (el.offsetWidth - el.clientWidth) > 0;
|
||||||
|
}
|
||||||
|
// Tests needs to be run after load.
|
||||||
|
function runTest() {
|
||||||
|
test(()=> {
|
||||||
|
let i=0;
|
||||||
|
for (el of Array.from(document.querySelectorAll(".container"))) {
|
||||||
|
i++;
|
||||||
|
el.classList.toggle("red");
|
||||||
|
let expected = el.getAttribute("data-scrollbar");
|
||||||
|
if (expected.match(/h/))
|
||||||
|
assert_true(hasHorizontalScrollbar(el), `horizontal scrollbar ${i}`);
|
||||||
|
else
|
||||||
|
assert_false(hasHorizontalScrollbar(el), `horizontal scrollbar ${i}`);
|
||||||
|
if (expected.match(/v/))
|
||||||
|
assert_true(hasVerticalScrollbar(el), `vertical scrollbar ${i}`);
|
||||||
|
else
|
||||||
|
assert_false(hasVerticalScrollbar(el), `vertical scrollbar ${i}`);
|
||||||
|
el.classList.toggle("red");
|
||||||
|
}
|
||||||
|
}, "Container padding is applied approriately to block/inline children.");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
@ -251,13 +251,20 @@
|
||||||
data-expected-width="338" data-expected-height="182" data-offset-y="11" data-offset-x="59"
|
data-expected-width="338" data-expected-height="182" data-offset-y="11" data-offset-x="59"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<!-- Just viewbox. Has aspect_ration, but no intrinsic size
|
<!-- Just viewbox. Has aspect_ratio, but no intrinsic size
|
||||||
inline_width defaults to container width -->
|
inline_width defaults to container width -->
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<img class="target" src="data:image/svg+xml,%3Csvg viewBox='0 0 100 10' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' style='fill:rgb(0,255,0);'/%3E%3C/svg%3E"
|
<img class="target" src="data:image/svg+xml,%3Csvg viewBox='0 0 100 10' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' style='fill:rgb(0,255,0);'/%3E%3C/svg%3E"
|
||||||
data-expected-width="388" data-expected-height="67" data-offset-y="126" data-offset-x="9"
|
data-expected-width="388" data-expected-height="67" data-offset-y="126" data-offset-x="9"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Just viewbox. Has aspect_ratio, but no intrinsic size
|
||||||
|
inline_width is constrained by left/right, height computed proportionally -->
|
||||||
|
<div class="container">
|
||||||
|
<img class="target" style="left:100px;right:100px" src="data:image/svg+xml,%3Csvg viewBox='0 0 100 10' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' style='fill:rgb(0,255,0);'/%3E%3C/svg%3E"
|
||||||
|
data-expected-width="188" data-expected-height="47" data-offset-y="146" data-offset-x="109"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
<!-- Viewbox + svg width. Has aspect_ratio and width. Height is scaled -->
|
<!-- Viewbox + svg width. Has aspect_ratio and width. Height is scaled -->
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<img class="target" src="data:image/svg+xml,%3Csvg viewBox='0 0 100 10' width='100px' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' style='fill:rgb(0,255,0);'/%3E%3C/svg%3E"
|
<img class="target" src="data:image/svg+xml,%3Csvg viewBox='0 0 100 10' width='100px' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='100%' height='100%' style='fill:rgb(0,255,0);'/%3E%3C/svg%3E"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>scroll anchoring accounts for scroll-padding</title>
|
||||||
|
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||||
|
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/#anchor-node-selection">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#optimal-viewing-region">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<style>
|
||||||
|
#scroller {
|
||||||
|
overflow: auto;
|
||||||
|
height: 500px;
|
||||||
|
scroll-padding-top: 200px;
|
||||||
|
}
|
||||||
|
#changer {
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
#content {
|
||||||
|
height: 1000px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="scroller">
|
||||||
|
<div id="changer"></div>
|
||||||
|
<div id="content"></div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
test(() => {
|
||||||
|
scroller.scrollTop = 50;
|
||||||
|
changer.style.height = "200px";
|
||||||
|
assert_equals(scroller.scrollTop, 150, "Shouldn't anchor to #changer, since it's covered by scroll-padding");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/resources/check-layout-th.js"></script>
|
||||||
|
<link rel="author" title="David Grogan" href="dgrogan@chromium.org">
|
||||||
|
<link rel="author" title="Xiaocheng Hu" href="xiaochengh@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#distributing-width-to-columns">
|
||||||
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/94">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
table {
|
||||||
|
width: 200px;
|
||||||
|
border-collapse: collapse;
|
||||||
|
table-layout: auto;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 0px;
|
||||||
|
background: lime;
|
||||||
|
outline: 1px solid blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2>Calc width on col is treated as auto in auto tables</h2>
|
||||||
|
|
||||||
|
<table id=theTable>
|
||||||
|
<col style="width:calc(20% + 80px)">
|
||||||
|
<tr>
|
||||||
|
<td data-expected-width=100></td>
|
||||||
|
<td data-expected-width=100></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
checkLayout('#theTable')
|
||||||
|
</script>
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Simple calc expression in table layout</title>
|
<title>Simple calc expression in table layout</title>
|
||||||
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/94">
|
||||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3482">
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3482">
|
||||||
<link rel="match" href="calc-percent-plus-0px-ref.html">
|
<link rel="match" href="calc-percent-plus-0px-ref.html">
|
||||||
<meta name="assert" content="calc(% + 0px) should be handled as calc(%) in table layout.">
|
<meta name="assert" content="calc(% + 0px) should be handled as calc(%) in auto table layout.">
|
||||||
<table border>
|
<table border style="table-layout: auto">
|
||||||
<tr>
|
<tr>
|
||||||
<td style="width: calc(50% + 0px)">x</td>
|
<td style="width: calc(50% + 0px)">x</td>
|
||||||
<td style="width: 100px">y</td>
|
<td style="width: 100px">y</td>
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Simple calc expression in table layout</title>
|
||||||
|
<table border style="table-layout: fixed; width: 200px">
|
||||||
|
<tr>
|
||||||
|
<td style="width: 50%">x</td>
|
||||||
|
<td>y</td>
|
||||||
|
<td>z</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Simple calc expression in table layout</title>
|
||||||
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/94">
|
||||||
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3482">
|
||||||
|
<link rel="match" href="calc-percent-plus-0px-fixed-ref.html">
|
||||||
|
<meta name="assert" content="calc(% + 0px) should be handled as calc(%) in fixed table layout.">
|
||||||
|
<table border style="table-layout: fixed; width: 200px">
|
||||||
|
<tr>
|
||||||
|
<td style="width: calc(50% + 0px)">x</td>
|
||||||
|
<td>y</td>
|
||||||
|
<td>z</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
<script src="/resources/check-layout-th.js"></script>
|
<script src="/resources/check-layout-th.js"></script>
|
||||||
<link rel="author" title="David Grogan" href="dgrogan@chromium.org">
|
<link rel="author" title="David Grogan" href="dgrogan@chromium.org">
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#distributing-width-to-columns">
|
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#distributing-width-to-columns">
|
||||||
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/94">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
table {
|
table {
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||||
<meta name="flags" content="">
|
<meta name="flags" content="">
|
||||||
<link rel="match" href="reference/hyphens-span-001-ref.html">
|
<link rel="match" href="reference/hyphens-out-of-flow-001-ref.html">
|
||||||
<meta name="assert" content="the presence of an out of flow element has no effect on manual hyhenation">
|
<meta name="assert" content="the presence of an out of flow element has no effect on manual hyhenation">
|
||||||
<style>
|
<style>
|
||||||
span {
|
span {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Text Test reference</title>
|
||||||
|
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
border: solid orange;
|
||||||
|
margin: 5px;
|
||||||
|
width: 6ch;
|
||||||
|
hyphens: manual;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
|
||||||
|
|
||||||
|
<div>high­way</div>
|
||||||
|
<div>high­way</div>
|
||||||
|
<div>high­way</div>
|
||||||
|
<div>high­way</div>
|
||||||
|
<div>high­way</div>
|
||||||
|
<div>high­way</div>
|
||||||
|
<div>high­way</div>
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<html lang="en" >
|
<html lang="en" >
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<title>CSS3 Text, linebreaks: U+07BE TIBETAN KU RU KHA</title>
|
<title>CSS3 Text, linebreaks: U+0FBE TIBETAN KU RU KHA</title>
|
||||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
|
<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
|
||||||
<script src="/resources/testharness.js"></script>
|
<script src="/resources/testharness.js"></script>
|
||||||
|
|
@ -21,10 +21,10 @@
|
||||||
|
|
||||||
|
|
||||||
<div class="test">
|
<div class="test">
|
||||||
<div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa޾bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
|
<div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa྾bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
|
||||||
<div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa޾bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
|
<div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa྾bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
|
||||||
<div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa޾bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
|
<div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa྾bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
|
||||||
<div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa޾bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
|
<div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa྾bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" >
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<title>CSS3 Text, linebreaks: U+1B5C BALINESE WINDU</title>
|
|
||||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
|
||||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
|
|
||||||
<script src="/resources/testharness.js"></script>
|
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
|
||||||
<meta name='flags' content='should dom'>
|
|
||||||
<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
|
|
||||||
<style type='text/css'>
|
|
||||||
.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
|
|
||||||
#breakable2 { white-space: pre-line; }
|
|
||||||
#breakable3 { white-space: pre-wrap; }
|
|
||||||
#breakable4 { white-space: break-spaces; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="test">
|
|
||||||
<div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa᭜bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
|
|
||||||
<div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa᭜bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
|
|
||||||
<div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa᭜bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
|
|
||||||
<div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa᭜bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!--Notes:
|
|
||||||
|
|
||||||
Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
|
|
||||||
|
|
||||||
-->
|
|
||||||
<script>
|
|
||||||
test(function() {
|
|
||||||
assert_true(document.getElementById('breakable').offsetHeight > 35);
|
|
||||||
}, "white-space:normal");
|
|
||||||
test(function() {
|
|
||||||
assert_true(document.getElementById('breakable2').offsetHeight > 35);
|
|
||||||
}, "white-space:pre-line");
|
|
||||||
test(function() {
|
|
||||||
assert_true(document.getElementById('breakable3').offsetHeight > 35);
|
|
||||||
}, "white-space:pre-wrap");
|
|
||||||
test(function() {
|
|
||||||
assert_true(document.getElementById('breakable4').offsetHeight > 35);
|
|
||||||
}, "white-space:break-spaces");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id='log'></div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
background: green;
|
background: green;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
width: 1ch;
|
width: 1ch;
|
||||||
height: 20em;
|
height: 19em;
|
||||||
}
|
}
|
||||||
#test {
|
#test {
|
||||||
width: 1ch;
|
width: 1ch;
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,6 @@
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
font-size: 4em;
|
font-size: 4em;
|
||||||
margin: 1rem;
|
|
||||||
width: 4em;
|
width: 4em;
|
||||||
}
|
}
|
||||||
#test {
|
#test {
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,10 @@
|
||||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property">
|
<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property">
|
||||||
<link rel="match" href="reference/overflow-wrap-cluster-001-ref.html">
|
<link rel="match" href="reference/overflow-wrap-cluster-001-ref.html">
|
||||||
<meta name="assert" content="grapheme clusters must stay together as one unit when a line is broken by overflow-wrap:break-word">
|
<meta name="assert" content="grapheme clusters must stay together as one unit when a line is broken by overflow-wrap:anywhere">
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
font-size: 4em;
|
font-size: 4em;
|
||||||
margin: 1rem;
|
|
||||||
width: 4em;
|
width: 4em;
|
||||||
}
|
}
|
||||||
#test {
|
#test {
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
font-size: 4em;
|
font-size: 4em;
|
||||||
margin: 1rem;
|
|
||||||
width: 4em;
|
width: 4em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<title>CSS Text: getComputedStyle().letterSpacing</title>
|
<title>CSS Text: getComputedStyle().letterSpacing</title>
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-letter-spacing">
|
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-letter-spacing">
|
||||||
<meta name="assert" content="letter-spacing computed value is an absolute length.">
|
<meta name="assert" content="letter-spacing computed value is an absolute length.">
|
||||||
<meta name="assert" content="'normal' computes to zero.">
|
<meta name="assert" content="'normal' computes to zero, but the resolved value of 0px is 'normal', so that's the value that is observed.">
|
||||||
<script src="/resources/testharness.js"></script>
|
<script src="/resources/testharness.js"></script>
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
<script src="/css/support/computed-testcommon.js"></script>
|
<script src="/css/support/computed-testcommon.js"></script>
|
||||||
|
|
@ -18,7 +18,8 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="target"></div>
|
<div id="target"></div>
|
||||||
<script>
|
<script>
|
||||||
test_computed_value("letter-spacing", "normal", "0px");
|
test_computed_value("letter-spacing", "normal");
|
||||||
|
test_computed_value("letter-spacing", "0px", "normal");
|
||||||
|
|
||||||
test_computed_value("letter-spacing", "10px");
|
test_computed_value("letter-spacing", "10px");
|
||||||
test_computed_value("letter-spacing", "-20px");
|
test_computed_value("letter-spacing", "-20px");
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
font-family: 'csstest_noto';
|
font-family: 'csstest_noto';
|
||||||
src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
|
src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
|
||||||
}
|
}
|
||||||
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; }
|
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; }
|
||||||
/* the CSS above is not part of the test */
|
/* the CSS above is not part of the test */
|
||||||
.styled { font-style:italic; }
|
.styled { font-style:italic; }
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
font-family: 'csstest_noto';
|
font-family: 'csstest_noto';
|
||||||
src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
|
src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
|
||||||
}
|
}
|
||||||
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; }
|
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; }
|
||||||
/* the CSS above is not part of the test */
|
/* the CSS above is not part of the test */
|
||||||
.styled { text-decoration:underline; }
|
.styled { text-decoration:underline; }
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,6 @@
|
||||||
<meta name="flags" content="">
|
<meta name="flags" content="">
|
||||||
<link rel="match" href="reference/text-indent-percentage-002-ref.html">
|
<link rel="match" href="reference/text-indent-percentage-002-ref.html">
|
||||||
<meta name="assert" content="Percentages in text-indent refer to width of the element's content box, when used in a calc expression">
|
<meta name="assert" content="Percentages in text-indent refer to width of the element's content box, when used in a calc expression">
|
||||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
|
||||||
<style>
|
<style>
|
||||||
body { background: white; }
|
body { background: white; }
|
||||||
section { position: absolute; }
|
section { position: absolute; }
|
||||||
|
|
@ -15,7 +14,6 @@ section, div {
|
||||||
border-right: 10px solid white;
|
border-right: 10px solid white;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
font-family: Ahem;
|
|
||||||
}
|
}
|
||||||
div {
|
div {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
|
||||||
|
|
@ -6,42 +6,26 @@
|
||||||
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
|
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
<![CDATA[
|
<![CDATA[
|
||||||
|
@font-face {
|
||||||
|
font-family: 'mplus-1p-regular';
|
||||||
|
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||||
|
}
|
||||||
span {
|
span {
|
||||||
|
font-family: 'mplus-1p-regular';
|
||||||
background-color: cyan;
|
background-color: cyan;
|
||||||
}
|
}
|
||||||
.test {
|
.test {
|
||||||
color: Blue;
|
color: Blue;
|
||||||
font-size: 200%;
|
line-height: 1.1em;
|
||||||
line-height: 1.2em;
|
|
||||||
}
|
}
|
||||||
.test div {
|
.test div {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 1em;
|
margin-bottom: .5em;
|
||||||
margin-top: 1em;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: 5em;
|
|
||||||
}
|
}
|
||||||
]]>
|
]]>
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript">
|
|
||||||
// <![CDATA[
|
|
||||||
// Set Font Family to 'IPAMincho'
|
|
||||||
function setFontFamily () {
|
|
||||||
var fontName = 'IPAMincho';
|
|
||||||
var divs = document.getElementsByTagName('div');
|
|
||||||
var i = 0;
|
|
||||||
var div;
|
|
||||||
while (i < divs.length) {
|
|
||||||
div = divs.item(i);
|
|
||||||
if (div.className == 'test') {
|
|
||||||
div.style.fontFamily = fontName;
|
|
||||||
}
|
|
||||||
i++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// ]]>
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -52,12 +36,12 @@
|
||||||
<!-- FULLWIDTH LATIN -->
|
<!-- FULLWIDTH LATIN -->
|
||||||
<div>[<span> </span>]<br />[<span> </span>]</div>
|
<div>[<span> </span>]<br />[<span> </span>]</div>
|
||||||
<div><span>！</span><br /><span>！</span></div>
|
<div><span>！</span><br /><span>！</span></div>
|
||||||
<div><span>”</span><br /><span>”</span></div>
|
<div><span>＂</span><br /><span>＂</span></div>
|
||||||
<div><span>＃</span><br /><span>＃</span></div>
|
<div><span>＃</span><br /><span>＃</span></div>
|
||||||
<div><span>＄</span><br /><span>＄</span></div>
|
<div><span>＄</span><br /><span>＄</span></div>
|
||||||
<div><span>％</span><br /><span>％</span></div>
|
<div><span>％</span><br /><span>％</span></div>
|
||||||
<div><span>＆</span><br /><span>＆</span></div>
|
<div><span>＆</span><br /><span>＆</span></div>
|
||||||
<div><span>’</span><br /><span>’</span></div>
|
<div><span>＇</span><br /><span>＇</span></div>
|
||||||
<div><span>（</span><br /><span>（</span></div>
|
<div><span>（</span><br /><span>（</span></div>
|
||||||
<div><span>）</span><br /><span>）</span></div>
|
<div><span>）</span><br /><span>）</span></div>
|
||||||
<div><span>＊</span><br /><span>＊</span></div>
|
<div><span>＊</span><br /><span>＊</span></div>
|
||||||
|
|
@ -66,7 +50,7 @@
|
||||||
<div><span>－</span><br /><span>－</span></div>
|
<div><span>－</span><br /><span>－</span></div>
|
||||||
<div><span>．</span><br /><span>．</span></div>
|
<div><span>．</span><br /><span>．</span></div>
|
||||||
<div><span>／</span><br /><span>／</span></div>
|
<div><span>／</span><br /><span>／</span></div>
|
||||||
<br />
|
|
||||||
<div><span>０</span><br /><span>０</span></div>
|
<div><span>０</span><br /><span>０</span></div>
|
||||||
<div><span>１</span><br /><span>１</span></div>
|
<div><span>１</span><br /><span>１</span></div>
|
||||||
<div><span>２</span><br /><span>２</span></div>
|
<div><span>２</span><br /><span>２</span></div>
|
||||||
|
|
@ -77,7 +61,7 @@
|
||||||
<div><span>７</span><br /><span>７</span></div>
|
<div><span>７</span><br /><span>７</span></div>
|
||||||
<div><span>８</span><br /><span>８</span></div>
|
<div><span>８</span><br /><span>８</span></div>
|
||||||
<div><span>９</span><br /><span>９</span></div>
|
<div><span>９</span><br /><span>９</span></div>
|
||||||
<br />
|
|
||||||
<div><span>：</span><br /><span>：</span></div>
|
<div><span>：</span><br /><span>：</span></div>
|
||||||
<div><span>；</span><br /><span>；</span></div>
|
<div><span>；</span><br /><span>；</span></div>
|
||||||
<div><span>＜</span><br /><span>＜</span></div>
|
<div><span>＜</span><br /><span>＜</span></div>
|
||||||
|
|
@ -85,7 +69,7 @@
|
||||||
<div><span>＞</span><br /><span>＞</span></div>
|
<div><span>＞</span><br /><span>＞</span></div>
|
||||||
<div><span>？</span><br /><span>？</span></div>
|
<div><span>？</span><br /><span>？</span></div>
|
||||||
<div><span>＠</span><br /><span>＠</span></div>
|
<div><span>＠</span><br /><span>＠</span></div>
|
||||||
<br />
|
|
||||||
<div><span>Ａ</span><br /><span>Ａ</span></div>
|
<div><span>Ａ</span><br /><span>Ａ</span></div>
|
||||||
<div><span>Ｂ</span><br /><span>Ｂ</span></div>
|
<div><span>Ｂ</span><br /><span>Ｂ</span></div>
|
||||||
<div><span>Ｃ</span><br /><span>Ｃ</span></div>
|
<div><span>Ｃ</span><br /><span>Ｃ</span></div>
|
||||||
|
|
@ -112,14 +96,14 @@
|
||||||
<div><span>Ｘ</span><br /><span>Ｘ</span></div>
|
<div><span>Ｘ</span><br /><span>Ｘ</span></div>
|
||||||
<div><span>Ｙ</span><br /><span>Ｙ</span></div>
|
<div><span>Ｙ</span><br /><span>Ｙ</span></div>
|
||||||
<div><span>Ｚ</span><br /><span>Ｚ</span></div>
|
<div><span>Ｚ</span><br /><span>Ｚ</span></div>
|
||||||
<br />
|
|
||||||
<div><span>［</span><br /><span>［</span></div>
|
<div><span>［</span><br /><span>［</span></div>
|
||||||
<div><span>＼</span><br /><span>＼</span></div>
|
<div><span>＼</span><br /><span>＼</span></div>
|
||||||
<div><span>］</span><br /><span>］</span></div>
|
<div><span>］</span><br /><span>］</span></div>
|
||||||
<div><span>＾</span><br /><span>＾</span></div>
|
<div><span>＾</span><br /><span>＾</span></div>
|
||||||
<div><span>＿</span><br /><span>＿</span></div>
|
<div><span>＿</span><br /><span>＿</span></div>
|
||||||
<div><span>｀</span><br /><span>｀</span></div>
|
<div><span>｀</span><br /><span>｀</span></div>
|
||||||
<br />
|
|
||||||
<div><span>ａ</span><br /><span>ａ</span></div>
|
<div><span>ａ</span><br /><span>ａ</span></div>
|
||||||
<div><span>ｂ</span><br /><span>ｂ</span></div>
|
<div><span>ｂ</span><br /><span>ｂ</span></div>
|
||||||
<div><span>ｃ</span><br /><span>ｃ</span></div>
|
<div><span>ｃ</span><br /><span>ｃ</span></div>
|
||||||
|
|
@ -146,7 +130,7 @@
|
||||||
<div><span>ｘ</span><br /><span>ｘ</span></div>
|
<div><span>ｘ</span><br /><span>ｘ</span></div>
|
||||||
<div><span>ｙ</span><br /><span>ｙ</span></div>
|
<div><span>ｙ</span><br /><span>ｙ</span></div>
|
||||||
<div><span>ｚ</span><br /><span>ｚ</span></div>
|
<div><span>ｚ</span><br /><span>ｚ</span></div>
|
||||||
<br />
|
|
||||||
<div><span>｛</span><br /><span>｛</span></div>
|
<div><span>｛</span><br /><span>｛</span></div>
|
||||||
<div><span>｜</span><br /><span>｜</span></div>
|
<div><span>｜</span><br /><span>｜</span></div>
|
||||||
<div><span>｝</span><br /><span>｝</span></div>
|
<div><span>｝</span><br /><span>｝</span></div>
|
||||||
|
|
@ -156,13 +140,12 @@
|
||||||
<div><span>｠</span><br /><span>｠</span></div> <!-- RIGHT WHITE PARENTHESIS -->
|
<div><span>｠</span><br /><span>｠</span></div> <!-- RIGHT WHITE PARENTHESIS -->
|
||||||
|
|
||||||
<!-- HALFWIDTH KATAKANA -->
|
<!-- HALFWIDTH KATAKANA -->
|
||||||
<br />
|
|
||||||
<div><span>。</span><br /><span>。</span></div>
|
<div><span>。</span><br /><span>。</span></div>
|
||||||
<div><span>「</span><br /><span>「</span></div>
|
<div><span>「</span><br /><span>「</span></div>
|
||||||
<div><span>」</span><br /><span>」</span></div>
|
<div><span>」</span><br /><span>」</span></div>
|
||||||
<div><span>、</span><br /><span>、</span></div>
|
<div><span>、</span><br /><span>、</span></div>
|
||||||
<div><span>・</span><br /><span>・</span></div>
|
<div><span>・</span><br /><span>・</span></div>
|
||||||
<br />
|
|
||||||
<div><span>ヲ</span><br /><span>ヲ</span></div>
|
<div><span>ヲ</span><br /><span>ヲ</span></div>
|
||||||
<div><span>ァ</span><br /><span>ァ</span></div>
|
<div><span>ァ</span><br /><span>ァ</span></div>
|
||||||
<div><span>ィ</span><br /><span>ィ</span></div>
|
<div><span>ィ</span><br /><span>ィ</span></div>
|
||||||
|
|
@ -174,7 +157,7 @@
|
||||||
<div><span>ョ</span><br /><span>ョ</span></div>
|
<div><span>ョ</span><br /><span>ョ</span></div>
|
||||||
<div><span>ッ</span><br /><span>ッ</span></div>
|
<div><span>ッ</span><br /><span>ッ</span></div>
|
||||||
<div><span>ー</span><br /><span>ー</span></div>
|
<div><span>ー</span><br /><span>ー</span></div>
|
||||||
<br />
|
|
||||||
<div><span>ア</span><br /><span>ア</span></div>
|
<div><span>ア</span><br /><span>ア</span></div>
|
||||||
<div><span>イ</span><br /><span>イ</span></div>
|
<div><span>イ</span><br /><span>イ</span></div>
|
||||||
<div><span>ウ</span><br /><span>ウ</span></div>
|
<div><span>ウ</span><br /><span>ウ</span></div>
|
||||||
|
|
@ -220,15 +203,14 @@
|
||||||
<div><span>ロ</span><br /><span>ロ</span></div>
|
<div><span>ロ</span><br /><span>ロ</span></div>
|
||||||
<div><span>ワ</span><br /><span>ワ</span></div>
|
<div><span>ワ</span><br /><span>ワ</span></div>
|
||||||
<div><span>ン</span><br /><span>ン</span></div>
|
<div><span>ン</span><br /><span>ン</span></div>
|
||||||
<br />
|
|
||||||
<div><span>゛</span><br /><span>゛</span></div>
|
<div><span> ゙</span><br /><span> ゙</span></div>
|
||||||
<div><span>゜</span><br /><span>゜</span></div>
|
<div><span> ゚</span><br /><span> ゚</span></div>
|
||||||
|
|
||||||
<!-- HALFWIDTH HANGUL -->
|
<!-- HALFWIDTH HANGUL -->
|
||||||
<br />
|
|
||||||
<div>[<span>ᅟ</span>]<br />[<span>ᅟ</span>]</div> <!-- HANGUL FILLER -->
|
<div>[<span>ᅟ</span>]<br />[<span>ᅟ</span>]</div> <!-- HANGUL FILLER -->
|
||||||
<div><span>ᆨ</span><br /><span>ᆨ</span></div> <!-- HANGUL LETTER KIYEOK -->
|
<div><span>ᆨ</span><br /><span>ᆨ</span></div> <!-- HANGUL LETTER KIYEOK -->
|
||||||
<div><span>ᆩ</span><br /><span>ᆩ</span></div> <!-- HANGUL LETTER SSANGKIYEOK -->
|
<div><span>ㄲ</span><br /><span>ㄲ</span></div> <!-- HANGUL LETTER SSANGKIYEOK -->
|
||||||
<div><span>ᆪ</span><br /><span>ᆪ</span></div> <!-- HANGUL LETTER KIYEOK-SIOS -->
|
<div><span>ᆪ</span><br /><span>ᆪ</span></div> <!-- HANGUL LETTER KIYEOK-SIOS -->
|
||||||
<div><span>ᆫ</span><br /><span>ᆫ</span></div> <!-- HANGUL LETTER NIEUN -->
|
<div><span>ᆫ</span><br /><span>ᆫ</span></div> <!-- HANGUL LETTER NIEUN -->
|
||||||
<div><span>ᆬ</span><br /><span>ᆬ</span></div> <!-- HANGUL LETTER NIEUN-CIEUC -->
|
<div><span>ᆬ</span><br /><span>ᆬ</span></div> <!-- HANGUL LETTER NIEUN-CIEUC -->
|
||||||
|
|
@ -242,7 +224,7 @@
|
||||||
<div><span>ᆳ</span><br /><span>ᆳ</span></div> <!-- HANGUL LETTER RIEUL-SIOS -->
|
<div><span>ᆳ</span><br /><span>ᆳ</span></div> <!-- HANGUL LETTER RIEUL-SIOS -->
|
||||||
<div><span>ᆴ</span><br /><span>ᆴ</span></div> <!-- HANGUL LETTER RIEUL-THIEUTH -->
|
<div><span>ᆴ</span><br /><span>ᆴ</span></div> <!-- HANGUL LETTER RIEUL-THIEUTH -->
|
||||||
<div><span>ᆵ</span><br /><span>ᆵ</span></div> <!-- HANGUL LETTER RIEUL-PHIEUPH -->
|
<div><span>ᆵ</span><br /><span>ᆵ</span></div> <!-- HANGUL LETTER RIEUL-PHIEUPH -->
|
||||||
<div><span>ᄚ</span><br /><span>ᄚ</span></div> <!-- HANGUL LETTER RIEUL-HIEUH -->
|
<div><span>ㅀ</span><br /><span>ㅀ</span></div> <!-- HANGUL LETTER RIEUL-HIEUH -->
|
||||||
<div><span>ᄆ</span><br /><span>ᄆ</span></div> <!-- HANGUL LETTER MIEUM -->
|
<div><span>ᄆ</span><br /><span>ᄆ</span></div> <!-- HANGUL LETTER MIEUM -->
|
||||||
<div><span>ᄇ</span><br /><span>ᄇ</span></div> <!-- HANGUL LETTER PIEUP -->
|
<div><span>ᄇ</span><br /><span>ᄇ</span></div> <!-- HANGUL LETTER PIEUP -->
|
||||||
<div><span>ᄈ</span><br /><span>ᄈ</span></div> <!-- HANGUL LETTER SSANGPIEUP -->
|
<div><span>ᄈ</span><br /><span>ᄈ</span></div> <!-- HANGUL LETTER SSANGPIEUP -->
|
||||||
|
|
@ -257,7 +239,6 @@
|
||||||
<div><span>ᇀ</span><br /><span>ᇀ</span></div> <!-- HANGUL LETTER THIEUTH -->
|
<div><span>ᇀ</span><br /><span>ᇀ</span></div> <!-- HANGUL LETTER THIEUTH -->
|
||||||
<div><span>ᄑ</span><br /><span>ᄑ</span></div> <!-- HANGUL LETTER PHIEUPH -->
|
<div><span>ᄑ</span><br /><span>ᄑ</span></div> <!-- HANGUL LETTER PHIEUPH -->
|
||||||
<div><span>ᇂ</span><br /><span>ᇂ</span></div> <!-- HANGUL LETTER HIEUH -->
|
<div><span>ᇂ</span><br /><span>ᇂ</span></div> <!-- HANGUL LETTER HIEUH -->
|
||||||
<br />
|
|
||||||
<div><span>ᅡ</span><br /><span>ᅡ</span></div> <!-- HANGUL LETTER A -->
|
<div><span>ᅡ</span><br /><span>ᅡ</span></div> <!-- HANGUL LETTER A -->
|
||||||
<div><span>ᅢ</span><br /><span>ᅢ</span></div> <!-- HANGUL LETTER AE -->
|
<div><span>ᅢ</span><br /><span>ᅢ</span></div> <!-- HANGUL LETTER AE -->
|
||||||
<div><span>ᅣ</span><br /><span>ᅣ</span></div> <!-- HANGUL LETTER YA -->
|
<div><span>ᅣ</span><br /><span>ᅣ</span></div> <!-- HANGUL LETTER YA -->
|
||||||
|
|
@ -284,7 +265,6 @@
|
||||||
<div><span>ᅵ</span><br /><span>ᅵ</span></div> <!-- HANGUL LETTER I -->
|
<div><span>ᅵ</span><br /><span>ᅵ</span></div> <!-- HANGUL LETTER I -->
|
||||||
|
|
||||||
<!-- FULLWIDTH SIGN -->
|
<!-- FULLWIDTH SIGN -->
|
||||||
<br />
|
|
||||||
<div><span>￠</span><br /><span>￠</span></div> <!-- CENT SIGN -->
|
<div><span>￠</span><br /><span>￠</span></div> <!-- CENT SIGN -->
|
||||||
<div><span>￡</span><br /><span>￡</span></div> <!-- POUND SIGN -->
|
<div><span>￡</span><br /><span>￡</span></div> <!-- POUND SIGN -->
|
||||||
<div><span>￢</span><br /><span>￢</span></div> <!-- NOT SIGN -->
|
<div><span>￢</span><br /><span>￢</span></div> <!-- NOT SIGN -->
|
||||||
|
|
@ -294,8 +274,7 @@
|
||||||
<div><span>￦</span><br /><span>￦</span></div> <!-- WON SIGN -->
|
<div><span>￦</span><br /><span>￦</span></div> <!-- WON SIGN -->
|
||||||
|
|
||||||
<!-- HALFWIDTH SIGN -->
|
<!-- HALFWIDTH SIGN -->
|
||||||
<br />
|
<div><span>│</span><br /><span>│</span></div> <!-- FORMS LIGHT VERTICAL -->
|
||||||
<div><span>｜</span><br /><span>｜</span></div> <!-- FORMS LIGHT VERTICAL -->
|
|
||||||
<div><span>←</span><br /><span>←</span></div> <!-- LEFTWARDS ARROW -->
|
<div><span>←</span><br /><span>←</span></div> <!-- LEFTWARDS ARROW -->
|
||||||
<div><span>↑</span><br /><span>↑</span></div> <!-- UPWARDS ARROW -->
|
<div><span>↑</span><br /><span>↑</span></div> <!-- UPWARDS ARROW -->
|
||||||
<div><span>→</span><br /><span>→</span></div> <!-- RIGHTWARDS ARROW -->
|
<div><span>→</span><br /><span>→</span></div> <!-- RIGHTWARDS ARROW -->
|
||||||
|
|
@ -304,39 +283,26 @@
|
||||||
<div><span>○</span><br /><span>○</span></div> <!-- WHITE CIRCLE -->
|
<div><span>○</span><br /><span>○</span></div> <!-- WHITE CIRCLE -->
|
||||||
|
|
||||||
<!-- HALFWIDTH LATIN -->
|
<!-- HALFWIDTH LATIN -->
|
||||||
<br />
|
|
||||||
<div><span>Ａ</span><br /><span>Ａ</span></div>
|
<div><span>Ａ</span><br /><span>Ａ</span></div>
|
||||||
<div><span>Ｂ</span><br /><span>Ｂ</span></div>
|
<div><span>Ｂ</span><br /><span>Ｂ</span></div>
|
||||||
<div><span>Ｃ</span><br /><span>Ｃ</span></div>
|
<div><span>Ｃ</span><br /><span>Ｃ</span></div>
|
||||||
<br />
|
|
||||||
<div><span>ａ</span><br /><span>ａ</span></div>
|
<div><span>ａ</span><br /><span>ａ</span></div>
|
||||||
<div><span>ｂ</span><br /><span>ｂ</span></div>
|
<div><span>ｂ</span><br /><span>ｂ</span></div>
|
||||||
<div><span>ｃ</span><br /><span>ｃ</span></div>
|
<div><span>ｃ</span><br /><span>ｃ</span></div>
|
||||||
|
|
||||||
<!-- FULLWIDTH KANA -->
|
<!-- FULLWIDTH KANA -->
|
||||||
<br />
|
|
||||||
<div><span>あ</span><br /><span>あ</span></div>
|
<div><span>あ</span><br /><span>あ</span></div>
|
||||||
<div><span>い</span><br /><span>い</span></div>
|
<div><span>い</span><br /><span>い</span></div>
|
||||||
<div><span>う</span><br /><span>う</span></div>
|
<div><span>う</span><br /><span>う</span></div>
|
||||||
<div><span>え</span><br /><span>え</span></div>
|
<div><span>え</span><br /><span>え</span></div>
|
||||||
<div><span>お</span><br /><span>お</span></div>
|
<div><span>お</span><br /><span>お</span></div>
|
||||||
<br />
|
|
||||||
<div><span>ア</span><br /><span>ア</span></div>
|
<div><span>ア</span><br /><span>ア</span></div>
|
||||||
<div><span>イ</span><br /><span>イ</span></div>
|
<div><span>イ</span><br /><span>イ</span></div>
|
||||||
<div><span>ウ</span><br /><span>ウ</span></div>
|
<div><span>ウ</span><br /><span>ウ</span></div>
|
||||||
<div><span>エ</span><br /><span>エ</span></div>
|
<div><span>エ</span><br /><span>エ</span></div>
|
||||||
<div><span>オ</span><br /><span>オ</span></div>
|
<div><span>オ</span><br /><span>オ</span></div>
|
||||||
</div>
|
</div>
|
||||||
<p id="fontChange" style="display: none;">
|
|
||||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and apply it.
|
|
||||||
<button type="button" onclick="setFontFamily()">
|
|
||||||
Apply
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
<script type="text/javascript">
|
|
||||||
if (document.getElementById) {
|
|
||||||
document.getElementById('fontChange').style.display = 'block'
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -11,46 +11,30 @@
|
||||||
<meta name="assert" content="The UA should transform halfwidth character to fullwidth character when text-transform is set to fullwidth." />
|
<meta name="assert" content="The UA should transform halfwidth character to fullwidth character when text-transform is set to fullwidth." />
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
<![CDATA[
|
<![CDATA[
|
||||||
|
@font-face {
|
||||||
|
font-family: 'mplus-1p-regular';
|
||||||
|
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||||
|
}
|
||||||
.test span {
|
.test span {
|
||||||
text-transform: full-width;
|
text-transform: full-width;
|
||||||
}
|
}
|
||||||
/* the CSS below is not part of the test */
|
/* the CSS below is not part of the test */
|
||||||
span {
|
span {
|
||||||
|
font-family: 'mplus-1p-regular';
|
||||||
background-color: cyan;
|
background-color: cyan;
|
||||||
}
|
}
|
||||||
.test {
|
.test {
|
||||||
color: Blue;
|
color: Blue;
|
||||||
font-size: 200%;
|
line-height: 1.1;
|
||||||
line-height: 1.2em;
|
|
||||||
}
|
}
|
||||||
.test div {
|
.test div {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 1em;
|
margin-bottom: .5em;
|
||||||
margin-top: 1em;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: 5em;
|
|
||||||
}
|
}
|
||||||
]]>
|
]]>
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript">
|
|
||||||
// <![CDATA[
|
|
||||||
// Set Font Family to 'IPAMincho'
|
|
||||||
function setFontFamily () {
|
|
||||||
var fontName = 'IPAMincho';
|
|
||||||
var divs = document.getElementsByTagName('div');
|
|
||||||
var i = 0;
|
|
||||||
var div;
|
|
||||||
while (i < divs.length) {
|
|
||||||
div = divs.item(i);
|
|
||||||
if (div.className == 'test') {
|
|
||||||
div.style.fontFamily = fontName;
|
|
||||||
}
|
|
||||||
i++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// ]]>
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -61,12 +45,12 @@
|
||||||
<!-- FULLWIDTH LATIN -->
|
<!-- FULLWIDTH LATIN -->
|
||||||
<div>[<span> </span>]<br />[<span> </span>]</div>
|
<div>[<span> </span>]<br />[<span> </span>]</div>
|
||||||
<div><span>！</span><br /><span>!</span></div>
|
<div><span>！</span><br /><span>!</span></div>
|
||||||
<div><span>”</span><br /><span>"</span></div>
|
<div><span>＂</span><br /><span>"</span></div>
|
||||||
<div><span>＃</span><br /><span>#</span></div>
|
<div><span>＃</span><br /><span>#</span></div>
|
||||||
<div><span>＄</span><br /><span>$</span></div>
|
<div><span>＄</span><br /><span>$</span></div>
|
||||||
<div><span>％</span><br /><span>%</span></div>
|
<div><span>％</span><br /><span>%</span></div>
|
||||||
<div><span>＆</span><br /><span>&</span></div>
|
<div><span>＆</span><br /><span>&</span></div>
|
||||||
<div><span>’</span><br /><span>'</span></div>
|
<div><span>＇</span><br /><span>'</span></div>
|
||||||
<div><span>（</span><br /><span>(</span></div>
|
<div><span>（</span><br /><span>(</span></div>
|
||||||
<div><span>）</span><br /><span>)</span></div>
|
<div><span>）</span><br /><span>)</span></div>
|
||||||
<div><span>＊</span><br /><span>*</span></div>
|
<div><span>＊</span><br /><span>*</span></div>
|
||||||
|
|
@ -75,7 +59,7 @@
|
||||||
<div><span>－</span><br /><span>-</span></div>
|
<div><span>－</span><br /><span>-</span></div>
|
||||||
<div><span>．</span><br /><span>.</span></div>
|
<div><span>．</span><br /><span>.</span></div>
|
||||||
<div><span>／</span><br /><span>/</span></div>
|
<div><span>／</span><br /><span>/</span></div>
|
||||||
<br />
|
|
||||||
<div><span>０</span><br /><span>0</span></div>
|
<div><span>０</span><br /><span>0</span></div>
|
||||||
<div><span>１</span><br /><span>1</span></div>
|
<div><span>１</span><br /><span>1</span></div>
|
||||||
<div><span>２</span><br /><span>2</span></div>
|
<div><span>２</span><br /><span>2</span></div>
|
||||||
|
|
@ -86,7 +70,7 @@
|
||||||
<div><span>７</span><br /><span>7</span></div>
|
<div><span>７</span><br /><span>7</span></div>
|
||||||
<div><span>８</span><br /><span>8</span></div>
|
<div><span>８</span><br /><span>8</span></div>
|
||||||
<div><span>９</span><br /><span>9</span></div>
|
<div><span>９</span><br /><span>9</span></div>
|
||||||
<br />
|
|
||||||
<div><span>：</span><br /><span>:</span></div>
|
<div><span>：</span><br /><span>:</span></div>
|
||||||
<div><span>；</span><br /><span>;</span></div>
|
<div><span>；</span><br /><span>;</span></div>
|
||||||
<div><span>＜</span><br /><span><</span></div>
|
<div><span>＜</span><br /><span><</span></div>
|
||||||
|
|
@ -94,7 +78,7 @@
|
||||||
<div><span>＞</span><br /><span>></span></div>
|
<div><span>＞</span><br /><span>></span></div>
|
||||||
<div><span>？</span><br /><span>?</span></div>
|
<div><span>？</span><br /><span>?</span></div>
|
||||||
<div><span>＠</span><br /><span>@</span></div>
|
<div><span>＠</span><br /><span>@</span></div>
|
||||||
<br />
|
|
||||||
<div><span>Ａ</span><br /><span>A</span></div>
|
<div><span>Ａ</span><br /><span>A</span></div>
|
||||||
<div><span>Ｂ</span><br /><span>B</span></div>
|
<div><span>Ｂ</span><br /><span>B</span></div>
|
||||||
<div><span>Ｃ</span><br /><span>C</span></div>
|
<div><span>Ｃ</span><br /><span>C</span></div>
|
||||||
|
|
@ -121,14 +105,14 @@
|
||||||
<div><span>Ｘ</span><br /><span>X</span></div>
|
<div><span>Ｘ</span><br /><span>X</span></div>
|
||||||
<div><span>Ｙ</span><br /><span>Y</span></div>
|
<div><span>Ｙ</span><br /><span>Y</span></div>
|
||||||
<div><span>Ｚ</span><br /><span>Z</span></div>
|
<div><span>Ｚ</span><br /><span>Z</span></div>
|
||||||
<br />
|
|
||||||
<div><span>［</span><br /><span>[</span></div>
|
<div><span>［</span><br /><span>[</span></div>
|
||||||
<div><span>＼</span><br /><span>\</span></div>
|
<div><span>＼</span><br /><span>\</span></div>
|
||||||
<div><span>］</span><br /><span>]</span></div>
|
<div><span>］</span><br /><span>]</span></div>
|
||||||
<div><span>＾</span><br /><span>^</span></div>
|
<div><span>＾</span><br /><span>^</span></div>
|
||||||
<div><span>＿</span><br /><span>_</span></div>
|
<div><span>＿</span><br /><span>_</span></div>
|
||||||
<div><span>｀</span><br /><span>`</span></div>
|
<div><span>｀</span><br /><span>`</span></div>
|
||||||
<br />
|
|
||||||
<div><span>ａ</span><br /><span>a</span></div>
|
<div><span>ａ</span><br /><span>a</span></div>
|
||||||
<div><span>ｂ</span><br /><span>b</span></div>
|
<div><span>ｂ</span><br /><span>b</span></div>
|
||||||
<div><span>ｃ</span><br /><span>c</span></div>
|
<div><span>ｃ</span><br /><span>c</span></div>
|
||||||
|
|
@ -155,7 +139,7 @@
|
||||||
<div><span>ｘ</span><br /><span>x</span></div>
|
<div><span>ｘ</span><br /><span>x</span></div>
|
||||||
<div><span>ｙ</span><br /><span>y</span></div>
|
<div><span>ｙ</span><br /><span>y</span></div>
|
||||||
<div><span>ｚ</span><br /><span>z</span></div>
|
<div><span>ｚ</span><br /><span>z</span></div>
|
||||||
<br />
|
|
||||||
<div><span>｛</span><br /><span>{</span></div>
|
<div><span>｛</span><br /><span>{</span></div>
|
||||||
<div><span>｜</span><br /><span>|</span></div>
|
<div><span>｜</span><br /><span>|</span></div>
|
||||||
<div><span>｝</span><br /><span>}</span></div>
|
<div><span>｝</span><br /><span>}</span></div>
|
||||||
|
|
@ -165,13 +149,12 @@
|
||||||
<div><span>｠</span><br /><span>⦆</span></div> <!-- RIGHT WHITE PARENTHESIS -->
|
<div><span>｠</span><br /><span>⦆</span></div> <!-- RIGHT WHITE PARENTHESIS -->
|
||||||
|
|
||||||
<!-- HALFWIDTH KATAKANA -->
|
<!-- HALFWIDTH KATAKANA -->
|
||||||
<br />
|
|
||||||
<div><span>。</span><br /><span>｡</span></div>
|
<div><span>。</span><br /><span>｡</span></div>
|
||||||
<div><span>「</span><br /><span>｢</span></div>
|
<div><span>「</span><br /><span>｢</span></div>
|
||||||
<div><span>」</span><br /><span>｣</span></div>
|
<div><span>」</span><br /><span>｣</span></div>
|
||||||
<div><span>、</span><br /><span>､</span></div>
|
<div><span>、</span><br /><span>､</span></div>
|
||||||
<div><span>・</span><br /><span>･</span></div>
|
<div><span>・</span><br /><span>･</span></div>
|
||||||
<br />
|
|
||||||
<div><span>ヲ</span><br /><span>ｦ</span></div>
|
<div><span>ヲ</span><br /><span>ｦ</span></div>
|
||||||
<div><span>ァ</span><br /><span>ｧ</span></div>
|
<div><span>ァ</span><br /><span>ｧ</span></div>
|
||||||
<div><span>ィ</span><br /><span>ｨ</span></div>
|
<div><span>ィ</span><br /><span>ｨ</span></div>
|
||||||
|
|
@ -183,7 +166,7 @@
|
||||||
<div><span>ョ</span><br /><span>ｮ</span></div>
|
<div><span>ョ</span><br /><span>ｮ</span></div>
|
||||||
<div><span>ッ</span><br /><span>ｯ</span></div>
|
<div><span>ッ</span><br /><span>ｯ</span></div>
|
||||||
<div><span>ー</span><br /><span>ｰ</span></div>
|
<div><span>ー</span><br /><span>ｰ</span></div>
|
||||||
<br />
|
|
||||||
<div><span>ア</span><br /><span>ｱ</span></div>
|
<div><span>ア</span><br /><span>ｱ</span></div>
|
||||||
<div><span>イ</span><br /><span>ｲ</span></div>
|
<div><span>イ</span><br /><span>ｲ</span></div>
|
||||||
<div><span>ウ</span><br /><span>ｳ</span></div>
|
<div><span>ウ</span><br /><span>ｳ</span></div>
|
||||||
|
|
@ -229,15 +212,14 @@
|
||||||
<div><span>ロ</span><br /><span>ﾛ</span></div>
|
<div><span>ロ</span><br /><span>ﾛ</span></div>
|
||||||
<div><span>ワ</span><br /><span>ﾜ</span></div>
|
<div><span>ワ</span><br /><span>ﾜ</span></div>
|
||||||
<div><span>ン</span><br /><span>ﾝ</span></div>
|
<div><span>ン</span><br /><span>ﾝ</span></div>
|
||||||
<br />
|
|
||||||
<div><span>゛</span><br /><span>ﾞ</span></div>
|
<div><span> ゙</span><br /><span> ﾞ</span></div>
|
||||||
<div><span>゜</span><br /><span>ﾟ</span></div>
|
<div><span> ゚</span><br /><span> ﾟ</span></div>
|
||||||
|
|
||||||
<!-- HALFWIDTH HANGUL -->
|
<!-- HALFWIDTH HANGUL -->
|
||||||
<br />
|
|
||||||
<div>[<span>ᅟ</span>]<br />[<span>ﾠ</span>]</div> <!-- HANGUL FILLER -->
|
<div>[<span>ᅟ</span>]<br />[<span>ﾠ</span>]</div> <!-- HANGUL FILLER -->
|
||||||
<div><span>ᆨ</span><br /><span>ﾡ</span></div> <!-- HANGUL LETTER KIYEOK -->
|
<div><span>ᆨ</span><br /><span>ﾡ</span></div> <!-- HANGUL LETTER KIYEOK -->
|
||||||
<div><span>ᆩ</span><br /><span>ﾢ</span></div> <!-- HANGUL LETTER SSANGKIYEOK -->
|
<div><span>ㄲ</span><br /><span>ﾢ</span></div> <!-- HANGUL LETTER SSANGKIYEOK -->
|
||||||
<div><span>ᆪ</span><br /><span>ﾣ</span></div> <!-- HANGUL LETTER KIYEOK-SIOS -->
|
<div><span>ᆪ</span><br /><span>ﾣ</span></div> <!-- HANGUL LETTER KIYEOK-SIOS -->
|
||||||
<div><span>ᆫ</span><br /><span>ﾤ</span></div> <!-- HANGUL LETTER NIEUN -->
|
<div><span>ᆫ</span><br /><span>ﾤ</span></div> <!-- HANGUL LETTER NIEUN -->
|
||||||
<div><span>ᆬ</span><br /><span>ﾥ</span></div> <!-- HANGUL LETTER NIEUN-CIEUC -->
|
<div><span>ᆬ</span><br /><span>ﾥ</span></div> <!-- HANGUL LETTER NIEUN-CIEUC -->
|
||||||
|
|
@ -251,7 +233,7 @@
|
||||||
<div><span>ᆳ</span><br /><span>ﾭ</span></div> <!-- HANGUL LETTER RIEUL-SIOS -->
|
<div><span>ᆳ</span><br /><span>ﾭ</span></div> <!-- HANGUL LETTER RIEUL-SIOS -->
|
||||||
<div><span>ᆴ</span><br /><span>ﾮ</span></div> <!-- HANGUL LETTER RIEUL-THIEUTH -->
|
<div><span>ᆴ</span><br /><span>ﾮ</span></div> <!-- HANGUL LETTER RIEUL-THIEUTH -->
|
||||||
<div><span>ᆵ</span><br /><span>ﾯ</span></div> <!-- HANGUL LETTER RIEUL-PHIEUPH -->
|
<div><span>ᆵ</span><br /><span>ﾯ</span></div> <!-- HANGUL LETTER RIEUL-PHIEUPH -->
|
||||||
<div><span>ᄚ</span><br /><span>ﾰ</span></div> <!-- HANGUL LETTER RIEUL-HIEUH -->
|
<div><span>ㅀ</span><br /><span>ﾰ</span></div> <!-- HANGUL LETTER RIEUL-HIEUH -->
|
||||||
<div><span>ᄆ</span><br /><span>ﾱ</span></div> <!-- HANGUL LETTER MIEUM -->
|
<div><span>ᄆ</span><br /><span>ﾱ</span></div> <!-- HANGUL LETTER MIEUM -->
|
||||||
<div><span>ᄇ</span><br /><span>ﾲ</span></div> <!-- HANGUL LETTER PIEUP -->
|
<div><span>ᄇ</span><br /><span>ﾲ</span></div> <!-- HANGUL LETTER PIEUP -->
|
||||||
<div><span>ᄈ</span><br /><span>ﾳ</span></div> <!-- HANGUL LETTER SSANGPIEUP -->
|
<div><span>ᄈ</span><br /><span>ﾳ</span></div> <!-- HANGUL LETTER SSANGPIEUP -->
|
||||||
|
|
@ -266,7 +248,6 @@
|
||||||
<div><span>ᇀ</span><br /><span>ﾼ</span></div> <!-- HANGUL LETTER THIEUTH -->
|
<div><span>ᇀ</span><br /><span>ﾼ</span></div> <!-- HANGUL LETTER THIEUTH -->
|
||||||
<div><span>ᄑ</span><br /><span>ﾽ</span></div> <!-- HANGUL LETTER PHIEUPH -->
|
<div><span>ᄑ</span><br /><span>ﾽ</span></div> <!-- HANGUL LETTER PHIEUPH -->
|
||||||
<div><span>ᇂ</span><br /><span>ﾾ</span></div> <!-- HANGUL LETTER HIEUH -->
|
<div><span>ᇂ</span><br /><span>ﾾ</span></div> <!-- HANGUL LETTER HIEUH -->
|
||||||
<br />
|
|
||||||
<div><span>ᅡ</span><br /><span>ￂ</span></div> <!-- HANGUL LETTER A -->
|
<div><span>ᅡ</span><br /><span>ￂ</span></div> <!-- HANGUL LETTER A -->
|
||||||
<div><span>ᅢ</span><br /><span>ￃ</span></div> <!-- HANGUL LETTER AE -->
|
<div><span>ᅢ</span><br /><span>ￃ</span></div> <!-- HANGUL LETTER AE -->
|
||||||
<div><span>ᅣ</span><br /><span>ￄ</span></div> <!-- HANGUL LETTER YA -->
|
<div><span>ᅣ</span><br /><span>ￄ</span></div> <!-- HANGUL LETTER YA -->
|
||||||
|
|
@ -293,7 +274,6 @@
|
||||||
<div><span>ᅵ</span><br /><span>ￜ</span></div> <!-- HANGUL LETTER I -->
|
<div><span>ᅵ</span><br /><span>ￜ</span></div> <!-- HANGUL LETTER I -->
|
||||||
|
|
||||||
<!-- FULLWIDTH SIGN -->
|
<!-- FULLWIDTH SIGN -->
|
||||||
<br />
|
|
||||||
<div><span>￠</span><br /><span>¢</span></div> <!-- CENT SIGN -->
|
<div><span>￠</span><br /><span>¢</span></div> <!-- CENT SIGN -->
|
||||||
<div><span>￡</span><br /><span>£</span></div> <!-- POUND SIGN -->
|
<div><span>￡</span><br /><span>£</span></div> <!-- POUND SIGN -->
|
||||||
<div><span>￢</span><br /><span>¬</span></div> <!-- NOT SIGN -->
|
<div><span>￢</span><br /><span>¬</span></div> <!-- NOT SIGN -->
|
||||||
|
|
@ -303,8 +283,7 @@
|
||||||
<div><span>￦</span><br /><span>₩</span></div> <!-- WON SIGN -->
|
<div><span>￦</span><br /><span>₩</span></div> <!-- WON SIGN -->
|
||||||
|
|
||||||
<!-- HALFWIDTH SIGN -->
|
<!-- HALFWIDTH SIGN -->
|
||||||
<br />
|
<div><span>│</span><br /><span>￨</span></div> <!-- FORMS LIGHT VERTICAL -->
|
||||||
<div><span>｜</span><br /><span>￨</span></div> <!-- FORMS LIGHT VERTICAL -->
|
|
||||||
<div><span>←</span><br /><span>￩</span></div> <!-- LEFTWARDS ARROW -->
|
<div><span>←</span><br /><span>￩</span></div> <!-- LEFTWARDS ARROW -->
|
||||||
<div><span>↑</span><br /><span>￪</span></div> <!-- UPWARDS ARROW -->
|
<div><span>↑</span><br /><span>￪</span></div> <!-- UPWARDS ARROW -->
|
||||||
<div><span>→</span><br /><span>￫</span></div> <!-- RIGHTWARDS ARROW -->
|
<div><span>→</span><br /><span>￫</span></div> <!-- RIGHTWARDS ARROW -->
|
||||||
|
|
@ -313,39 +292,26 @@
|
||||||
<div><span>○</span><br /><span>￮</span></div> <!-- WHITE CIRCLE -->
|
<div><span>○</span><br /><span>￮</span></div> <!-- WHITE CIRCLE -->
|
||||||
|
|
||||||
<!-- HALFWIDTH LATIN -->
|
<!-- HALFWIDTH LATIN -->
|
||||||
<br />
|
|
||||||
<div><span>Ａ</span><br /><span>Ａ</span></div>
|
<div><span>Ａ</span><br /><span>Ａ</span></div>
|
||||||
<div><span>Ｂ</span><br /><span>Ｂ</span></div>
|
<div><span>Ｂ</span><br /><span>Ｂ</span></div>
|
||||||
<div><span>Ｃ</span><br /><span>Ｃ</span></div>
|
<div><span>Ｃ</span><br /><span>Ｃ</span></div>
|
||||||
<br />
|
|
||||||
<div><span>ａ</span><br /><span>ａ</span></div>
|
<div><span>ａ</span><br /><span>ａ</span></div>
|
||||||
<div><span>ｂ</span><br /><span>ｂ</span></div>
|
<div><span>ｂ</span><br /><span>ｂ</span></div>
|
||||||
<div><span>ｃ</span><br /><span>ｃ</span></div>
|
<div><span>ｃ</span><br /><span>ｃ</span></div>
|
||||||
|
|
||||||
<!-- FULLWIDTH KANA -->
|
<!-- FULLWIDTH KANA -->
|
||||||
<br />
|
|
||||||
<div><span>あ</span><br /><span>あ</span></div>
|
<div><span>あ</span><br /><span>あ</span></div>
|
||||||
<div><span>い</span><br /><span>い</span></div>
|
<div><span>い</span><br /><span>い</span></div>
|
||||||
<div><span>う</span><br /><span>う</span></div>
|
<div><span>う</span><br /><span>う</span></div>
|
||||||
<div><span>え</span><br /><span>え</span></div>
|
<div><span>え</span><br /><span>え</span></div>
|
||||||
<div><span>お</span><br /><span>お</span></div>
|
<div><span>お</span><br /><span>お</span></div>
|
||||||
<br />
|
|
||||||
<div><span>ア</span><br /><span>ア</span></div>
|
<div><span>ア</span><br /><span>ア</span></div>
|
||||||
<div><span>イ</span><br /><span>イ</span></div>
|
<div><span>イ</span><br /><span>イ</span></div>
|
||||||
<div><span>ウ</span><br /><span>ウ</span></div>
|
<div><span>ウ</span><br /><span>ウ</span></div>
|
||||||
<div><span>エ</span><br /><span>エ</span></div>
|
<div><span>エ</span><br /><span>エ</span></div>
|
||||||
<div><span>オ</span><br /><span>オ</span></div>
|
<div><span>オ</span><br /><span>オ</span></div>
|
||||||
</div>
|
</div>
|
||||||
<p id="fontChange" style="display: none;">
|
|
||||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and apply it.
|
|
||||||
<button type="button" onclick="setFontFamily()">
|
|
||||||
Apply
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
<script type="text/javascript">
|
|
||||||
if (document.getElementById) {
|
|
||||||
document.getElementById('fontChange').style.display = 'block'
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,9 @@ div {
|
||||||
font: 20px/1 Ahem;
|
font: 20px/1 Ahem;
|
||||||
}
|
}
|
||||||
#test {
|
#test {
|
||||||
white-space: pre-wrap;
|
white-space: break-spaces;
|
||||||
color: green;
|
color: green;
|
||||||
width: 2ch;
|
width: 1ch;
|
||||||
}
|
}
|
||||||
#ref {
|
#ref {
|
||||||
color: red;
|
color: red;
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ div {
|
||||||
color: transparent;
|
color: transparent;
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
background: green;
|
background: green;
|
||||||
|
width: 2em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ div {
|
||||||
color: transparent;
|
color: transparent;
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
background: green;
|
background: green;
|
||||||
|
width: 1em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>CSS Test: Positions of trailing collapsible spaces</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||||
|
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<style>
|
||||||
|
.container > div {
|
||||||
|
font-family: Ahem;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 1;
|
||||||
|
color: gray;
|
||||||
|
width: 5ch;
|
||||||
|
outline: 2px solid orange;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.pre-wrap {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
.bg { background: purple; }
|
||||||
|
.h { outline: 4px red solid; }
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<section class="container">
|
||||||
|
<div>1234<span data-line="0" class="h"> </span>567</div>
|
||||||
|
<div>1234 <span data-line="0" class="h"> </span>567</div>
|
||||||
|
<div>1234567<span data-line="0" class="h"> </span>567</div>
|
||||||
|
<div>1234567 <span data-line="0" class="h"> </span>567</div>
|
||||||
|
<div class="pre-wrap">1234<span data-line="0" class="bg"> </span>567</div>
|
||||||
|
</section>
|
||||||
|
<script>
|
||||||
|
for (let e of document.querySelectorAll('[data-line]')) {
|
||||||
|
test(() => {
|
||||||
|
let y = e.offsetTop;
|
||||||
|
assert_equals(Math.round(y / 10), parseInt(e.dataset.line));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
@ -14,7 +14,7 @@ div {
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<p>This test passes if the four characters below are arranged in a two-by-two square.
|
<p>This test passes if the four characters below are arranged in a two-by-two square.
|
||||||
<div lang=ja>字字 字字</div>
|
<div>字字 字字</div>
|
||||||
<!--
|
<!--
|
||||||
If keep-all has no effect at all, breaks are allowed everywhere,
|
If keep-all has no effect at all, breaks are allowed everywhere,
|
||||||
and the result will be:
|
and the result will be:
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ span { color: transparent }
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<p>This test passes if the four characters below are arranged in a two-by-two square.
|
<p>This test passes if the four characters below are arranged in a two-by-two square.
|
||||||
<div lang=ja>字字<span>、</span>字字</div>
|
<div>字字<span>、</span>字字</div>
|
||||||
<!--
|
<!--
|
||||||
U+3001 : IDEOGRAPHIC COMMA is made transparent for visual simplicity,
|
U+3001 : IDEOGRAPHIC COMMA is made transparent for visual simplicity,
|
||||||
the change in color has no effect on layout.
|
the change in color has no effect on layout.
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ div {
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<p>This test passes if the four characters below are arranged in a two-by-two square.
|
<p>This test passes if the four characters below are arranged in a two-by-two square.
|
||||||
<div lang=ja>字字 字字</div>
|
<div>字字 字字</div>
|
||||||
<!--
|
<!--
|
||||||
If keep-all has no effect at all, breaks are allowed everywhere,
|
If keep-all has no effect at all, breaks are allowed everywhere,
|
||||||
and the result will be:
|
and the result will be:
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ div {
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<p>This test passes if the four characters below are arranged in a two-by-two square.
|
<p>This test passes if the four characters below are arranged in a two-by-two square.
|
||||||
<div lang=ja>字字 字字</div>
|
<div>字字 字字</div>
|
||||||
<!--
|
<!--
|
||||||
If keep-all has no effect at all, breaks are allowed everywhere,
|
If keep-all has no effect at all, breaks are allowed everywhere,
|
||||||
and the result will be:
|
and the result will be:
|
||||||
|
|
|
||||||
|
|
@ -1,67 +1,235 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>rotate interpolation</title>
|
<title>rotate interpolation</title>
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate">
|
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate">
|
||||||
<meta name="assert" content="rotate supports animation.">
|
|
||||||
<script src="/resources/testharness.js"></script>
|
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
|
||||||
<script src="/css/support/interpolation-testcommon.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script>
|
|
||||||
test_interpolation({
|
|
||||||
property: 'rotate',
|
|
||||||
from: '100deg',
|
|
||||||
to: '180deg',
|
|
||||||
}, [
|
|
||||||
{at: -1, expect: '20deg'},
|
|
||||||
{at: 0, expect: '100deg'},
|
|
||||||
{at: 0.125, expect: '110deg'},
|
|
||||||
{at: 0.875, expect: '170deg'},
|
|
||||||
{at: 1, expect: '180deg'},
|
|
||||||
{at: 2, expect: '260deg'}
|
|
||||||
]);
|
|
||||||
|
|
||||||
test_interpolation({
|
<meta name="assert" content="rotate supports animation.">
|
||||||
property: 'rotate',
|
<script src="/resources/testharness.js"></script>
|
||||||
from: '45deg',
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
to: '-1 1 0 60deg',
|
<script src="/css/support/interpolation-testcommon.js"></script>
|
||||||
}, [
|
</head>
|
||||||
{at: -1, expect: '0.447214 -0.447214 0.774597 104.478deg'},
|
|
||||||
{at: 0, expect: '45deg'},
|
|
||||||
{at: 0.125, expect: '-0.136456 0.136456 0.981203 40.6037deg'},
|
|
||||||
{at: 0.875, expect: '-0.70246 0.70246 0.114452 53.1994deg'},
|
|
||||||
{at: 1, expect: '-1 1 0 60deg'},
|
|
||||||
{at: 2, expect: '-0.637897 0.637897 -0.431479 124.975deg'}
|
|
||||||
]);
|
|
||||||
|
|
||||||
test_interpolation({
|
<style>
|
||||||
property: 'rotate',
|
.parent {
|
||||||
from: 'none',
|
rotate: 90deg;
|
||||||
to: '7 -8 9 400grad',
|
}
|
||||||
}, [
|
|
||||||
{at: -1, expect: '7 -8 9 -400grad'},
|
|
||||||
{at: 0, expect: 'none'},
|
|
||||||
{at: 0.125, expect: '7 -8 9 50grad'},
|
|
||||||
{at: 0.875, expect: '7 -8 9 350grad'},
|
|
||||||
{at: 1, expect: '7 -8 9 400grad'},
|
|
||||||
{at: 2, expect: '7 -8 9 800grad'}
|
|
||||||
]);
|
|
||||||
|
|
||||||
test_interpolation({
|
.target {
|
||||||
property: 'rotate',
|
width: 40px;
|
||||||
from: 'none',
|
height: 20px;
|
||||||
to: 'none',
|
background-color: grey;
|
||||||
}, [
|
rotate: 10deg;
|
||||||
{at: -1, expect: 'none'},
|
}
|
||||||
{at: 0, expect: 'none'},
|
|
||||||
{at: 0.125, expect: 'none'},
|
.expected {
|
||||||
{at: 0.875, expect: 'none'},
|
background-color: green;
|
||||||
{at: 1, expect: 'none'},
|
}
|
||||||
{at: 2, expect: 'none'}
|
</style>
|
||||||
]);
|
|
||||||
</script>
|
<template id="target-template">
|
||||||
</body>
|
<div class="parent">
|
||||||
|
<div class="target">Text</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_interpolation({
|
||||||
|
property: 'rotate',
|
||||||
|
from: '100deg',
|
||||||
|
to: '180deg',
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: '20deg'},
|
||||||
|
{at: 0, expect: '100deg'},
|
||||||
|
{at: 0.125, expect: '110deg'},
|
||||||
|
{at: 0.875, expect: '170deg'},
|
||||||
|
{at: 1, expect: '180deg'},
|
||||||
|
{at: 2, expect: '260deg'}
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'rotate',
|
||||||
|
from: '45deg',
|
||||||
|
to: '-1 1 0 60deg',
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: '0.447214 -0.447214 0.774597 104.478deg'},
|
||||||
|
{at: 0, expect: '45deg'},
|
||||||
|
{at: 0.125, expect: '-0.136456 0.136456 0.981203 40.6037deg'},
|
||||||
|
{at: 0.875, expect: '-0.70246 0.70246 0.114452 53.1994deg'},
|
||||||
|
{at: 1, expect: '-1 1 0 60deg'},
|
||||||
|
{at: 2, expect: '-0.637897 0.637897 -0.431479 124.975deg'}
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'rotate',
|
||||||
|
from: 'none',
|
||||||
|
to: '7 -8 9 400grad',
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: '7 -8 9 -400grad'},
|
||||||
|
{at: 0, expect: 'none'},
|
||||||
|
{at: 0.125, expect: '7 -8 9 50grad'},
|
||||||
|
{at: 0.875, expect: '7 -8 9 350grad'},
|
||||||
|
{at: 1, expect: '7 -8 9 400grad'},
|
||||||
|
{at: 2, expect: '7 -8 9 800grad'}
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'rotate',
|
||||||
|
from: 'none',
|
||||||
|
to: 'none',
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: 'none'},
|
||||||
|
{at: 0, expect: 'none'},
|
||||||
|
{at: 0.125, expect: 'none'},
|
||||||
|
{at: 0.875, expect: 'none'},
|
||||||
|
{at: 1, expect: 'none'},
|
||||||
|
{at: 2, expect: 'none'}
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'rotate',
|
||||||
|
from: 'none',
|
||||||
|
to: '30deg',
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: '-30deg'},
|
||||||
|
{at: 0, expect: 'none'},
|
||||||
|
{at: 0.25, expect: '7.5deg'},
|
||||||
|
{at: 0.75, expect: '22.5deg'},
|
||||||
|
{at: 1, expect: '30deg'},
|
||||||
|
{at: 2, expect: '60deg'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'rotate',
|
||||||
|
from: neutralKeyframe,
|
||||||
|
to: '30deg',
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: '-10deg'},
|
||||||
|
{at: 0, expect: '10deg'},
|
||||||
|
{at: 0.25, expect: '15deg'},
|
||||||
|
{at: 0.75, expect: '25deg'},
|
||||||
|
{at: 1, expect: '30deg'},
|
||||||
|
{at: 2, expect: '50deg'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'rotate',
|
||||||
|
from: 'inherit',
|
||||||
|
to: '270deg',
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: '-90deg'},
|
||||||
|
{at: 0, expect: '90deg'},
|
||||||
|
{at: 0.25, expect: '135deg'},
|
||||||
|
{at: 0.75, expect: '225deg'},
|
||||||
|
{at: 1, expect: '270deg'},
|
||||||
|
{at: 2, expect: '450deg'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'rotate',
|
||||||
|
from: 'unset',
|
||||||
|
to: '30deg',
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: '-30deg'},
|
||||||
|
{at: 0, expect: 'none'},
|
||||||
|
{at: 0.25, expect: '7.5deg'},
|
||||||
|
{at: 0.75, expect: '22.5deg'},
|
||||||
|
{at: 1, expect: '30deg'},
|
||||||
|
{at: 2, expect: '60deg'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'rotate',
|
||||||
|
from: '100deg',
|
||||||
|
to: '-100deg',
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: '300deg'},
|
||||||
|
{at: 0, expect: '100deg'},
|
||||||
|
{at: 0.25, expect: '50deg'},
|
||||||
|
{at: 0.75, expect: '-50deg'},
|
||||||
|
{at: 1, expect: '-100deg'},
|
||||||
|
{at: 2, expect: '-300deg'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'rotate',
|
||||||
|
from: '0 1 0 100deg',
|
||||||
|
to: '0 1 0 -100deg',
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: '0 1 0 300deg'},
|
||||||
|
{at: 0, expect: '0 1 0 100deg'},
|
||||||
|
{at: 0.25, expect: '0 1 0 50deg'},
|
||||||
|
{at: 0.75, expect: '0 1 0 -50deg'},
|
||||||
|
{at: 1, expect: '0 1 0 -100deg'},
|
||||||
|
{at: 2, expect: '0 1 0 -300deg'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'rotate',
|
||||||
|
from: '1 -2.5 3.64 100deg',
|
||||||
|
to: '1 -2.5 3.64 -100deg',
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: '1 -2.5 3.64 300deg'},
|
||||||
|
{at: 0, expect: '1 -2.5 3.64 100deg'},
|
||||||
|
{at: 0.25, expect: '1 -2.5 3.64 50deg'},
|
||||||
|
{at: 0.75, expect: '1 -2.5 3.64 -50deg'},
|
||||||
|
{at: 1, expect: '1 -2.5 3.64 -100deg'},
|
||||||
|
{at: 2, expect: '1 -2.5 3.64 -300deg'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'rotate',
|
||||||
|
from: '1 0 0 0deg',
|
||||||
|
to: '0 1 0 10deg',
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: '0 1 0 -10deg'},
|
||||||
|
{at: 0, expect: '1 0 0 0deg'},
|
||||||
|
{at: 0.25, expect: '0 1 0 2.5deg'},
|
||||||
|
{at: 0.75, expect: '0 1 0 7.5deg'},
|
||||||
|
{at: 1, expect: '0 1 0 10deg'},
|
||||||
|
{at: 2, expect: '0 1 0 20deg'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'rotate',
|
||||||
|
from: '1 1 0 90deg',
|
||||||
|
to: '0 1 1 135deg',
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: '0.67 -0.06 -0.74 124.97deg'},
|
||||||
|
{at: 0, expect: '1 1 0 90deg'},
|
||||||
|
{at: 0.25, expect: '0.54 0.8 0.26 94.83deg'},
|
||||||
|
{at: 0.75, expect: '0.17 0.78 0.61 118.68deg'},
|
||||||
|
{at: 1, expect: '0 1 1 135deg'},
|
||||||
|
{at: 2, expect: '0.52 -0.29 -0.81 151.04deg'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'rotate',
|
||||||
|
from: '0 1 0 0deg',
|
||||||
|
to: '1 0 0 450deg',
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: '1 0 0 -450deg'},
|
||||||
|
{at: 0, expect: '0 1 0 0deg'},
|
||||||
|
{at: 0.25, expect: '1 0 0 112.5deg'},
|
||||||
|
{at: 0.75, expect: '1 0 0 337.5deg'},
|
||||||
|
{at: 1, expect: '1 0 0 450deg'},
|
||||||
|
{at: 2, expect: '1 0 0 900deg'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'rotate',
|
||||||
|
from: '1 0 0 450deg',
|
||||||
|
to: '0 1 0 0deg',
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: '1 0 0 900deg'},
|
||||||
|
{at: 0, expect: '1 0 0 450deg'},
|
||||||
|
{at: 0.25, expect: '1 0 0 337.5deg'},
|
||||||
|
{at: 0.75, expect: '1 0 0 112.5deg'},
|
||||||
|
{at: 1, expect: '0 1 0 0deg'},
|
||||||
|
{at: 2, expect: '1 0 0 -450deg'},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -37,4 +37,9 @@ test(() => {
|
||||||
assert_style_value_equals(expected, CSSNumericValue.parse('max(10px, 10%)'));
|
assert_style_value_equals(expected, CSSNumericValue.parse('max(10px, 10%)'));
|
||||||
}, 'Parsing max() is successful');
|
}, 'Parsing max() is successful');
|
||||||
|
|
||||||
|
test(() => {
|
||||||
|
const expected = new CSSMathMax(CSS.px(10), new CSSMathMin(CSS.percent(10), CSS.px(20)));
|
||||||
|
assert_style_value_equals(expected, CSSNumericValue.parse('clamp(10px, 10%, 20px)'));
|
||||||
|
}, 'Parsing clamp() is successful');
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>CSSOM Test: Table with border-collapse: collapse's clientWidth/Height</title>
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#model" />
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#collapsing-borders" />
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface" />
|
||||||
|
<script src=/resources/testharness.js></script>
|
||||||
|
<script src=/resources/testharnessreport.js></script>
|
||||||
|
<style>
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
border: 8px solid #faa;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>a</td>
|
||||||
|
<td>b</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>c</td>
|
||||||
|
<td>d</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var table = document.getElementsByTagName('table')[0];
|
||||||
|
test(function() {
|
||||||
|
assert_equals(table.clientWidth, table.offsetWidth);
|
||||||
|
assert_equals(table.clientHeight, table.offsetHeight);
|
||||||
|
}, "Table's clientWidth/Height and OffsetWidth/Height should be the same");
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>CSSOM Test: Table with border-collapse: separate's clientWidth/Height</title>
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#model" />
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#separated-borders" />
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface" />
|
||||||
|
<script src=/resources/testharness.js></script>
|
||||||
|
<script src=/resources/testharnessreport.js></script>
|
||||||
|
<style>
|
||||||
|
table {
|
||||||
|
border-collapse: separate;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
border: 8px solid #faa;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>a</td>
|
||||||
|
<td>b</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>c</td>
|
||||||
|
<td>d</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var table = document.getElementsByTagName('table')[0];
|
||||||
|
test(function() {
|
||||||
|
assert_equals(table.clientWidth, table.offsetWidth);
|
||||||
|
assert_equals(table.clientHeight, table.offsetHeight);
|
||||||
|
}, "Table's clientWidth/Height and OffsetWidth/Height should be the same");
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>CSSOM Test: Table with its own specified border's clientWidth/Height</title>
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#model" />
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#separated-borders" />
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface" />
|
||||||
|
<script src=/resources/testharness.js></script>
|
||||||
|
<script src=/resources/testharnessreport.js></script>
|
||||||
|
<style>
|
||||||
|
table {
|
||||||
|
border: 8px solid #faa;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>a</td>
|
||||||
|
<td>b</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>c</td>
|
||||||
|
<td>d</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var table = document.getElementsByTagName('table')[0];
|
||||||
|
test(function() {
|
||||||
|
assert_equals(table.clientWidth, table.offsetWidth);
|
||||||
|
assert_equals(table.clientHeight, table.offsetHeight);
|
||||||
|
}, "Table's clientWidth/Height and OffsetWidth/Height should be the same");
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<!-- Reference case for behavior of 'baseline' and 'last baseline' values
|
||||||
|
for align-items and align-self for sideways writing modes.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<title>CSS Reftest Reference</title>
|
||||||
|
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
float: left;
|
||||||
|
display: flex;
|
||||||
|
writing-mode: sideways-rl;
|
||||||
|
border: 1px dashed blue;
|
||||||
|
font: 14px sans-serif;
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reverse { flex-flow: row wrap-reverse; }
|
||||||
|
|
||||||
|
.start { align-self: start; }
|
||||||
|
.end { align-self: end; }
|
||||||
|
|
||||||
|
.offset { margin-right: 10px;
|
||||||
|
margin-left: 3px; }
|
||||||
|
|
||||||
|
.lime { background: lime; }
|
||||||
|
.yellow { background: yellow; }
|
||||||
|
.orange { background: orange; }
|
||||||
|
.pink { background: pink; }
|
||||||
|
|
||||||
|
.ib { display: inline-block; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="lime offset start">one line (first)</div
|
||||||
|
><div class="yellow offset end">one line (last)</div
|
||||||
|
><div class="orange offset end">two<br/>lines and offset (last)</div
|
||||||
|
><div class="pink offset start">offset (first)</div>
|
||||||
|
</div>
|
||||||
|
<div class="container reverse">
|
||||||
|
<div class="lime offset end">one line (first)</div
|
||||||
|
><div class="offset start"><div class="yellow ib">one line (last)</div
|
||||||
|
><div class="orange ib">two<br/>lines and offset (last)</div></div
|
||||||
|
><div class="pink offset end">offset (first)</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<!-- Testcase for behavior of 'baseline' and 'last baseline' values
|
||||||
|
for align-items (and align-self, implicitly) for sideways
|
||||||
|
writing modes. This test confirms non-interference between the
|
||||||
|
'baseline' and 'last baseline' items.
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<title>CSS Test: Baseline alignment of block flex items with 'baseline' and 'last-baseline' values for 'align-self' against each other.</title>
|
||||||
|
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||||
|
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
|
||||||
|
<link rel="match" href="flexbox-align-self-baseline-horiz-008-ref.xhtml"/>
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
float: left;
|
||||||
|
display: flex;
|
||||||
|
writing-mode: sideways-rl;
|
||||||
|
border: 1px dashed blue;
|
||||||
|
font: 14px sans-serif;
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reverse { flex-flow: row wrap-reverse; }
|
||||||
|
|
||||||
|
.base { align-self: baseline; }
|
||||||
|
.lastbase { align-self: last baseline; }
|
||||||
|
|
||||||
|
.offset { margin-right: 10px;
|
||||||
|
margin-left: 3px; }
|
||||||
|
|
||||||
|
.lime { background: lime; }
|
||||||
|
.yellow { background: yellow; }
|
||||||
|
.orange { background: orange; }
|
||||||
|
.pink { background: pink; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="lime base">one line (first)</div>
|
||||||
|
<div class="yellow lastbase">one line (last)</div>
|
||||||
|
<div class="orange offset lastbase">two<br/>lines and offset (last)</div>
|
||||||
|
<div class="pink offset base">offset (first)</div>
|
||||||
|
</div>
|
||||||
|
<div class="container reverse">
|
||||||
|
<div class="lime base">one line (first)</div>
|
||||||
|
<div class="yellow lastbase">one line (last)</div>
|
||||||
|
<div class="orange offset lastbase">two<br/>lines and offset (last)</div>
|
||||||
|
<div class="pink offset base">offset (first)</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -24,6 +24,7 @@
|
||||||
== flexbox-align-self-baseline-horiz-005.xhtml flexbox-align-self-baseline-horiz-005-ref.xhtml
|
== flexbox-align-self-baseline-horiz-005.xhtml flexbox-align-self-baseline-horiz-005-ref.xhtml
|
||||||
== flexbox-align-self-baseline-horiz-006.xhtml flexbox-align-self-baseline-horiz-006-ref.xhtml
|
== flexbox-align-self-baseline-horiz-006.xhtml flexbox-align-self-baseline-horiz-006-ref.xhtml
|
||||||
== flexbox-align-self-baseline-horiz-007.xhtml flexbox-align-self-baseline-horiz-007-ref.xhtml
|
== flexbox-align-self-baseline-horiz-007.xhtml flexbox-align-self-baseline-horiz-007-ref.xhtml
|
||||||
|
== flexbox-align-self-baseline-horiz-008.xhtml flexbox-align-self-baseline-horiz-008-ref.xhtml
|
||||||
|
|
||||||
== flexbox-align-self-stretch-vert-001.html flexbox-align-self-stretch-vert-001-ref.html
|
== flexbox-align-self-stretch-vert-001.html flexbox-align-self-stretch-vert-001-ref.html
|
||||||
== flexbox-align-self-stretch-vert-002.html flexbox-align-self-stretch-vert-002-ref.html
|
== flexbox-align-self-stretch-vert-002.html flexbox-align-self-stretch-vert-002-ref.html
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@
|
||||||
== will-change-stacking-context-perspective-1.html green-square-100-by-100-ref.html
|
== will-change-stacking-context-perspective-1.html green-square-100-by-100-ref.html
|
||||||
== will-change-stacking-context-position-1.html green-square-100-by-100-ref.html
|
== will-change-stacking-context-position-1.html green-square-100-by-100-ref.html
|
||||||
== will-change-stacking-context-transform-1.html green-square-100-by-100-ref.html
|
== will-change-stacking-context-transform-1.html green-square-100-by-100-ref.html
|
||||||
|
== will-change-stacking-context-translate-1.html green-square-100-by-100-ref.html
|
||||||
== will-change-stacking-context-transform-style-1.html green-square-100-by-100-ref.html
|
== will-change-stacking-context-transform-style-1.html green-square-100-by-100-ref.html
|
||||||
== will-change-stacking-context-z-index-1.html green-square-100-by-100-ref.html
|
== will-change-stacking-context-z-index-1.html green-square-100-by-100-ref.html
|
||||||
== will-change-fixpos-cb-contain-1.html green-square-100-by-100-offset-ref.html
|
== will-change-fixpos-cb-contain-1.html green-square-100-by-100-offset-ref.html
|
||||||
|
|
@ -16,4 +17,5 @@
|
||||||
== will-change-fixpos-cb-perspective-1.html green-square-100-by-100-offset-ref.html
|
== will-change-fixpos-cb-perspective-1.html green-square-100-by-100-offset-ref.html
|
||||||
== will-change-fixpos-cb-position-1.html green-square-100-by-100-offset-ref.html
|
== will-change-fixpos-cb-position-1.html green-square-100-by-100-offset-ref.html
|
||||||
== will-change-fixpos-cb-transform-1.html green-square-100-by-100-offset-ref.html
|
== will-change-fixpos-cb-transform-1.html green-square-100-by-100-offset-ref.html
|
||||||
|
== will-change-fixpos-cb-translate-1.html green-square-100-by-100-offset-ref.html
|
||||||
== will-change-fixpos-cb-transform-style-1.html green-square-100-by-100-offset-ref.html
|
== will-change-fixpos-cb-transform-style-1.html green-square-100-by-100-offset-ref.html
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS will-change: 'will-change: translate' creates a containing block for fixed positioned elements</title>
|
||||||
|
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
|
||||||
|
<link rel="match" href="green-square-100-by-100-offset-ref.html">
|
||||||
|
<meta name="assert" content="If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.">
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0; padding: 0; }
|
||||||
|
div { width: 100px; height: 100px }
|
||||||
|
#wc { will-change: translate; margin: 100px 0 0 100px; background: red }
|
||||||
|
.child { top: 0; left: 0; width: 50px; background: green }
|
||||||
|
#fixpos { position: fixed }
|
||||||
|
#abspos { position: absolute; left: 50px }
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<div id="wc">
|
||||||
|
<div class="child" id="fixpos">
|
||||||
|
</div>
|
||||||
|
<div class="child" id="abspos">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS will-change: 'will-change: translate' creates a stacking context</title>
|
||||||
|
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
|
||||||
|
<link rel="match" href="green-square-100-by-100-ref.html">
|
||||||
|
<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0; padding: 0; }
|
||||||
|
div { width: 100px; height: 100px }
|
||||||
|
#wc { will-change: translate; background: red }
|
||||||
|
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<div id="wc">
|
||||||
|
<div id="child">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
@ -54,7 +54,7 @@ Filename: `{description}.html` or `{test-topic}-###-ref.html`
|
||||||
|
|
||||||
### SVG test
|
### SVG test
|
||||||
|
|
||||||
``` svg
|
``` xml
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
|
||||||
<title>${1:Test title}</title>
|
<title>${1:Test title}</title>
|
||||||
<metadata>
|
<metadata>
|
||||||
|
|
@ -69,7 +69,7 @@ Filename: `{test-topic}-###.svg`
|
||||||
|
|
||||||
### SVG reference
|
### SVG reference
|
||||||
|
|
||||||
``` svg
|
``` xml
|
||||||
<svg xmlns="http://www.w3.org/2000/svg">
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
<title>${1:Reference title}</title>
|
<title>${1:Reference title}</title>
|
||||||
${2:Reference content}
|
${2:Reference content}
|
||||||
|
|
@ -97,7 +97,7 @@ Filename: `{test-topic}-###.html`
|
||||||
|
|
||||||
### SVG
|
### SVG
|
||||||
|
|
||||||
``` svg
|
``` xml
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
|
||||||
<title>${1:Test title}</title>
|
<title>${1:Test title}</title>
|
||||||
<metadata>
|
<metadata>
|
||||||
|
|
@ -133,7 +133,7 @@ Filename: `{test-topic}-###-manual.html`
|
||||||
|
|
||||||
#### SVG
|
#### SVG
|
||||||
|
|
||||||
``` svg
|
``` xml
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
|
||||||
<title>${1:Test title}</title>
|
<title>${1:Test title}</title>
|
||||||
<metadata>
|
<metadata>
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,11 @@
|
||||||
|
|
||||||
const classes = [
|
const classes = [
|
||||||
{
|
{
|
||||||
constructor: TextDecoderStream,
|
name: 'TextDecoderStream',
|
||||||
input: new Uint8Array([65])
|
input: new Uint8Array([65])
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
constructor: TextEncoderStream,
|
name: 'TextEncoderStream',
|
||||||
input: 'A'
|
input: 'A'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
@ -17,7 +17,7 @@ const microtasksRun = () => new Promise(resolve => step_timeout(resolve, 0));
|
||||||
|
|
||||||
for (const streamClass of classes) {
|
for (const streamClass of classes) {
|
||||||
promise_test(async () => {
|
promise_test(async () => {
|
||||||
const stream = new streamClass.constructor();
|
const stream = new self[streamClass.name]();
|
||||||
const writer = stream.writable.getWriter();
|
const writer = stream.writable.getWriter();
|
||||||
const reader = stream.readable.getReader();
|
const reader = stream.readable.getReader();
|
||||||
const events = [];
|
const events = [];
|
||||||
|
|
@ -32,10 +32,10 @@ for (const streamClass of classes) {
|
||||||
assert_array_equals(events, ['paused', 'read', 'write'],
|
assert_array_equals(events, ['paused', 'read', 'write'],
|
||||||
'write should happen after read');
|
'write should happen after read');
|
||||||
}, 'write() should not complete until read relieves backpressure for ' +
|
}, 'write() should not complete until read relieves backpressure for ' +
|
||||||
`${streamClass.constructor.name}`);
|
`${streamClass.name}`);
|
||||||
|
|
||||||
promise_test(async () => {
|
promise_test(async () => {
|
||||||
const stream = new streamClass.constructor();
|
const stream = new self[streamClass.name]();
|
||||||
const writer = stream.writable.getWriter();
|
const writer = stream.writable.getWriter();
|
||||||
const reader = stream.readable.getReader();
|
const reader = stream.readable.getReader();
|
||||||
const events = [];
|
const events = [];
|
||||||
|
|
@ -56,5 +56,5 @@ for (const streamClass of classes) {
|
||||||
'write2'],
|
'write2'],
|
||||||
'writes should not happen before read2');
|
'writes should not happen before read2');
|
||||||
}, 'additional writes should wait for backpressure to be relieved for ' +
|
}, 'additional writes should wait for backpressure to be relieved for ' +
|
||||||
`class ${streamClass.constructor.name}`);
|
`class ${streamClass.name}`);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ const check_report_format = ([reports, observer]) => {
|
||||||
const report = reports[0];
|
const report = reports[0];
|
||||||
assert_equals(report.type, "feature-policy-violation");
|
assert_equals(report.type, "feature-policy-violation");
|
||||||
assert_equals(report.url, document.location.href);
|
assert_equals(report.url, document.location.href);
|
||||||
assert_equals(report.body.featureId, "xr");
|
assert_equals(report.body.featureId, "xr-spatial-tracking");
|
||||||
assert_equals(report.body.sourceFile, document.location.href);
|
assert_equals(report.body.sourceFile, document.location.href);
|
||||||
assert_equals(typeof report.body.lineNumber, "number");
|
assert_equals(typeof report.body.lineNumber, "number");
|
||||||
assert_equals(typeof report.body.columnNumber, "number");
|
assert_equals(typeof report.body.columnNumber, "number");
|
||||||
|
|
@ -23,11 +23,12 @@ promise_test(async t => {
|
||||||
{types: ['feature-policy-violation']}).observe();
|
{types: ['feature-policy-violation']}).observe();
|
||||||
});
|
});
|
||||||
try {
|
try {
|
||||||
await navigator.xr.supportsSession('inline');
|
let supported = await navigator.xr.isSessionSupported('immersive-vr');
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
// If no XR devices are available, supportsSession() will reject with a
|
// IsSessionSupported should only throw with a feature policy violation;
|
||||||
// NotSupportedError, but the report should be generated anyway.
|
// however, inline does not trigger the feature policy,
|
||||||
assert_equals(err.name, 'NotSupportedError');
|
// so immersive-vr must be used.
|
||||||
|
assert_unreached("isSessionSupported should not throw in ReportOnly mode");
|
||||||
}
|
}
|
||||||
check_report_format(await report);
|
check_report_format(await report);
|
||||||
}, "XR report only mode");
|
}, "XR report only mode");
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
Feature-Policy-Report-Only: xr 'none'
|
Feature-Policy-Report-Only: xr-spatial-tracking 'none'
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ var check_report_format = (reports, observer) => {
|
||||||
let report = reports[0];
|
let report = reports[0];
|
||||||
assert_equals(report.type, "feature-policy-violation");
|
assert_equals(report.type, "feature-policy-violation");
|
||||||
assert_equals(report.url, document.location.href);
|
assert_equals(report.url, document.location.href);
|
||||||
assert_equals(report.body.featureId, "xr");
|
assert_equals(report.body.featureId, "xr-spatial-tracking");
|
||||||
assert_equals(report.body.sourceFile, document.location.href);
|
assert_equals(report.body.sourceFile, document.location.href);
|
||||||
assert_equals(typeof report.body.lineNumber, "number");
|
assert_equals(typeof report.body.lineNumber, "number");
|
||||||
assert_equals(typeof report.body.columnNumber, "number");
|
assert_equals(typeof report.body.columnNumber, "number");
|
||||||
|
|
@ -22,8 +22,9 @@ promise_test(async (t) => {
|
||||||
new ReportingObserver((reports, observer) => resolve([reports, observer]),
|
new ReportingObserver((reports, observer) => resolve([reports, observer]),
|
||||||
{types: ['feature-policy-violation']}).observe();
|
{types: ['feature-policy-violation']}).observe();
|
||||||
});
|
});
|
||||||
await promise_rejects(t, 'SecurityError', navigator.xr.supportsSession('inline'),
|
await promise_rejects(t, 'SecurityError',
|
||||||
"XR device access should not be allowed in this document.");
|
navigator.xr.isSessionSupported('immersive-vr'),
|
||||||
|
"XR spatial tracking should not be allowed in this document.");
|
||||||
const [reports, observer] = await report;
|
const [reports, observer] = await report;
|
||||||
check_report_format(reports, observer);
|
check_report_format(reports, observer);
|
||||||
}, "XR Report Format");
|
}, "XR Report Format");
|
||||||
|
|
|
||||||
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