| author | Bogdan Tara <btara@mozilla.com> |
| Fri, 27 Sep 2019 12:47:39 +0300 | |
| changeset 495327 | aa8f530a1a35ba9b1c84303dbe15107d0026d77c |
| parent 495237 | dc547158dbf5a76c61741b43af4acd8dc8a7868a (current diff) |
| parent 495326 | 55d7658978ed751dcb334083dedfb4e083d761cd (diff) |
| child 495328 | 9e8b395430a8265f55e0d01f29c9b7ad122c6fbc |
| push id | 96553 |
| push user | btara@mozilla.com |
| push date | Fri, 27 Sep 2019 09:50:50 +0000 |
| treeherder | autoland@9e8b395430a8 [default view] [failures only] |
| perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
| reviewers | merge |
| milestone | 71.0a1 |
| first release with | nightly linux32
aa8f530a1a35
/
71.0a1
/
20190927094817
/
files
nightly linux64
aa8f530a1a35
/
71.0a1
/
20190927094817
/
files
nightly mac
aa8f530a1a35
/
71.0a1
/
20190927094817
/
files
nightly win32
aa8f530a1a35
/
71.0a1
/
20190927094817
/
files
nightly win64
aa8f530a1a35
/
71.0a1
/
20190927094817
/
files
|
| last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
| releases | nightly linux32
71.0a1
/
20190927094817
/
pushlog to previous
nightly linux64
71.0a1
/
20190927094817
/
pushlog to previous
nightly mac
71.0a1
/
20190927094817
/
pushlog to previous
nightly win32
71.0a1
/
20190927094817
/
pushlog to previous
nightly win64
71.0a1
/
20190927094817
/
pushlog to previous
|
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/FileAPI/__dir__.ini @@ -0,0 +1,1 @@ +lsan-allowed: [Alloc, Create, Malloc, Then, mozilla::BasePrincipal::CreateContentPrincipal, mozilla::SchedulerGroup::CreateEventTargetFor, mozilla::dom::ServiceWorkerJobQueue::RunJob, mozilla::dom::ServiceWorkerManager::Unregister, mozilla::dom::ServiceWorkerRegistrationMainThread::Unregister, mozilla::dom::UnregisterCallback::UnregisterCallback, mozilla::net::nsStandardURL::TemplatedMutator, operator]
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/content-security-policy/securitypolicyviolation/__dir__.ini @@ -0,0 +1,1 @@ +lsan-allowed: [Alloc, Create, Malloc, Then, mozilla::BasePrincipal::CreateContentPrincipal, mozilla::SchedulerGroup::CreateEventTargetFor, mozilla::dom::ServiceWorkerJobQueue::RunJob, mozilla::dom::ServiceWorkerManager::Unregister, mozilla::dom::ServiceWorkerRegistrationMainThread::Unregister, mozilla::dom::UnregisterCallback::UnregisterCallback, mozilla::net::nsStandardURL::TemplatedMutator, operator]
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/cookie-store/__dir__.ini @@ -0,0 +1,1 @@ +lsan-allowed: [Alloc, Malloc, Then, mozilla::BasePrincipal::CreateContentPrincipal, mozilla::SchedulerGroup::CreateEventTargetFor, mozilla::dom::ServiceWorkerJobQueue::RunJob, mozilla::dom::ServiceWorkerManager::Unregister, mozilla::dom::ServiceWorkerRegistrationMainThread::Unregister, mozilla::dom::UnregisterCallback::UnregisterCallback, mozilla::net::nsStandardURL::TemplatedMutator, operator]
--- a/testing/web-platform/meta/cookie-store/serviceworker_cookieStore_subscriptions.tentative.https.html.ini +++ b/testing/web-platform/meta/cookie-store/serviceworker_cookieStore_subscriptions.tentative.https.html.ini @@ -1,22 +1,22 @@ [serviceworker_cookieStore_subscriptions.tentative.https.html] disabled: if os == "linux": https://bugzilla.mozilla.org/show_bug.cgi?id=1573036 if (os == "win") and (processor == "aarch64"): https://bugzilla.mozilla.org/show_bug.cgi?id=1573036 expected: - if (os == "mac") and not debug: ["OK", "TIMEOUT"] + if (os == "mac") and not debug: ["TIMEOUT", "OK"] TIMEOUT [getChangeSubscriptions returns subscriptions passed to subscribeToChanges] expected: - if (os == "mac") and not debug: ["FAIL", "TIMEOUT"] + if (os == "mac") and not debug: ["TIMEOUT", "FAIL"] TIMEOUT [subscribeToChanges rejects when called outside the install handler] expected: - if (os == "mac") and not debug: ["FAIL", "NOTRUN"] + if (os == "mac") and not debug: ["NOTRUN", "FAIL"] NOTRUN [cookiechange dispatched with cookie change that matches subscription] expected: - if (os == "mac") and not debug: ["FAIL", "NOTRUN"] + if (os == "mac") and not debug: ["NOTRUN", "FAIL"] NOTRUN
deleted file mode 100644 --- a/testing/web-platform/meta/css/CSS2/floats/zero-width-floats-positioning.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[zero-width-floats-positioning.html] - expected: FAIL
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/css/css-color/opacity-overlapping-letters.html.ini @@ -0,0 +1,2 @@ +[opacity-overlapping-letters.html] + expected: FAIL
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/css/css-content/inheritance.html.ini @@ -0,0 +1,13 @@ +[inheritance.html] + [Property bookmark-state does not inherit] + expected: FAIL + + [Property bookmark-state has initial value open] + expected: FAIL + + [Property bookmark-level has initial value none] + expected: FAIL + + [Property bookmark-level does not inherit] + expected: FAIL +
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/css/css-transitions/AnimationEffect-getComputedTiming.tentative.html.ini @@ -0,0 +1,7 @@ +[AnimationEffect-getComputedTiming.tentative.html] + [easing of a new transition] + expected: FAIL + + [non-default easing of a new transition] + expected: FAIL +
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/css/css-transitions/KeyframeEffect-getKeyframes.tentative.html.ini @@ -0,0 +1,13 @@ +[KeyframeEffect-getKeyframes.tentative.html] + [KeyframeEffect.getKeyframes() returns expected frames for a simple transition] + expected: FAIL + + [KeyframeEffect.getKeyframes() returns expected frames for a transition with a CSS variable endpoint] + expected: FAIL + + [KeyframeEffect.getKeyframes() returns expected frames for a simple transition with a non-default easing function] + expected: FAIL + + [KeyframeEffect.getKeyframes() returns frames unaffected by a non-default easing function] + expected: FAIL +
--- a/testing/web-platform/meta/css/css-ui/appearance-auto-001.html.ini +++ b/testing/web-platform/meta/css/css-ui/appearance-auto-001.html.ini @@ -1,7 +1,7 @@ [appearance-auto-001.html] disabled: if debug and (os == "win") and (version == "6.1.7601"): https://bugzilla.mozilla.org/show_bug.cgi?id=1560360 expected: if (os == "win") and (processor == "x86"): FAIL if (os == "win") and (processor == "x86_64"): FAIL - if (os == "win") and (processor == "aarch64"): ["PASS", "FAIL"] + if (os == "win") and (processor == "aarch64"): ["FAIL", "PASS"]
--- a/testing/web-platform/meta/css/css-ui/appearance-button-bevel-001.html.ini +++ b/testing/web-platform/meta/css/css-ui/appearance-button-bevel-001.html.ini @@ -1,7 +1,7 @@ [appearance-button-bevel-001.html] disabled: if debug and (os == "win") and (version == "6.1.7601"): https://bugzilla.mozilla.org/show_bug.cgi?id=1560360 expected: if (os == "win") and (processor == "x86"): FAIL - if (os == "win") and (processor == "aarch64"): ["PASS", "FAIL"] + if (os == "win") and (processor == "aarch64"): ["FAIL", "PASS"] if (os == "win") and (processor == "x86_64"): FAIL
--- a/testing/web-platform/meta/css/css-ui/appearance-checkbox-001.html.ini +++ b/testing/web-platform/meta/css/css-ui/appearance-checkbox-001.html.ini @@ -1,7 +1,7 @@ [appearance-checkbox-001.html] disabled: if debug and (os == "win") and (version == "6.1.7601"): https://bugzilla.mozilla.org/show_bug.cgi?id=1560360 expected: + if (os == "win") and (processor == "x86_64"): FAIL if (os == "win") and (processor == "x86"): FAIL - if (os == "win") and (processor == "x86_64"): FAIL - if (os == "win") and (processor == "aarch64"): ["PASS", "FAIL"] + if (os == "win") and (processor == "aarch64"): ["FAIL", "PASS"]
--- a/testing/web-platform/meta/css/css-ui/appearance-square-button-001.html.ini +++ b/testing/web-platform/meta/css/css-ui/appearance-square-button-001.html.ini @@ -1,8 +1,5 @@ [appearance-square-button-001.html] disabled: - if debug and os == "win" and version == "6.1.7601": https://bugzilla.mozilla.org/show_bug.cgi?id=1560360 + if debug and (os == "win") and (version == "6.1.7601"): https://bugzilla.mozilla.org/show_bug.cgi?id=1560360 expected: - if (os == "win") and debug and (processor == "x86_64"): FAIL - if (os == "win") and not debug: FAIL if os == "win": FAIL -
--- a/testing/web-platform/meta/css/css-ui/appearance-textfield-001.html.ini +++ b/testing/web-platform/meta/css/css-ui/appearance-textfield-001.html.ini @@ -1,6 +1,6 @@ [appearance-textfield-001.html] expected: - if (os == "win") and (processor == "x86") and not debug: ["PASS", "FAIL"] if (os == "win") and (processor == "x86") and debug: ["PASS", "FAIL"] + if (os == "win") and (processor == "x86") and not debug: ["FAIL", "PASS"] if (os == "win") and (processor == "x86_64"): ["FAIL", "PASS"] if (os == "win") and (processor == "aarch64"): ["FAIL", "PASS"]
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/css/css-values/clamp-length-computed.html.ini @@ -0,0 +1,13 @@ +[clamp-length-computed.html] + [Property letter-spacing value 'clamp(10px, 5px, 30px)' computes to '10px'] + expected: FAIL + + [Property letter-spacing value 'clamp(10px, 35px, 30px)' computes to '30px'] + expected: FAIL + + [Property letter-spacing value 'clamp(30px, 100px, 20px)' computes to '30px'] + expected: FAIL + + [Property letter-spacing value 'clamp(10px, 20px, 30px)' computes to '20px'] + expected: FAIL +
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/css/css-values/clamp-length-serialize.html.ini @@ -0,0 +1,7 @@ +[clamp-length-serialize.html] + [e.style['letter-spacing'\] = "clamp(1px, 2px, clamp(2px, 3px, 4px))" should set the property value] + expected: FAIL + + [e.style['letter-spacing'\] = "clamp(1px, 2px, 3px)" should set the property value] + expected: FAIL +
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/css/css-values/min-max-percentage-length-interpolation.html.ini @@ -0,0 +1,2 @@ +[min-max-percentage-length-interpolation.html] + expected: FAIL
--- a/testing/web-platform/meta/css/css-variables/variable-presentation-attribute.html.ini +++ b/testing/web-platform/meta/css/css-variables/variable-presentation-attribute.html.ini @@ -1,13 +1,13 @@ [variable-presentation-attribute.html] [Testing 'clip' on '#test4'.] expected: + if os == "linux": FAIL if os == "android": FAIL - if os == "linux": FAIL [Testing 'alignment-baseline'.] expected: FAIL [Testing 'baseline-shift'.] expected: FAIL [Testing 'color-interpolation-filters'.]
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/css/mediaqueries/navigation-controls.tentative.html.ini @@ -0,0 +1,22 @@ +[navigation-controls.tentative.html] + [Should be parseable in JS: '(navigation-controls)'] + expected: FAIL + + [Should be parseable in a CSS stylesheet: '(navigation-controls: back-button)'] + expected: FAIL + + [Check that none evaluates to false in the boolean context] + expected: FAIL + + [Should be parseable in a CSS stylesheet: '(navigation-controls: none)'] + expected: FAIL + + [Should be parseable in JS: '(navigation-controls: none)'] + expected: FAIL + + [Should be parseable in a CSS stylesheet: '(navigation-controls)'] + expected: FAIL + + [Should be parseable in JS: '(navigation-controls: back-button)'] + expected: FAIL +
--- a/testing/web-platform/meta/dom/idlharness.window.js.ini +++ b/testing/web-platform/meta/dom/idlharness.window.js.ini @@ -11,8 +11,11 @@ expected: FAIL [Document interface: new Document() must inherit property "origin" with the proper type] expected: FAIL [StaticRange interface object length] expected: FAIL + [ShadowRoot interface: attribute onslotchange] + expected: FAIL +
--- a/testing/web-platform/meta/fetch/api/abort/__dir__.ini +++ b/testing/web-platform/meta/fetch/api/abort/__dir__.ini @@ -1,3 +1,3 @@ prefs: [javascript.options.streams:true] -lsan-allowed: [nsTSubstring<char>::StartBulkWriteImpl, Gecko_StartBulkWriteCString, nsstring::nsACString::start_bulk_write_impl] leak-threshold: [default:51200] +lsan-allowed: [Alloc, Create, Gecko_StartBulkWriteCString, Malloc, mozilla::BasePrincipal::CreateContentPrincipal, mozilla::dom::ServiceWorkerJobQueue::RunJob, mozilla::dom::ServiceWorkerManager::NotifyUnregister, mozilla::net::nsStandardURL::TemplatedMutator, nsTSubstring<char>::StartBulkWriteImpl, nsstring::nsACString::start_bulk_write_impl, operator]
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/fetch/api/policies/__dir__.ini @@ -0,0 +1,1 @@ +lsan-allowed: [Alloc, Create, Malloc, Then, mozilla::BasePrincipal::CreateContentPrincipal, mozilla::SchedulerGroup::CreateEventTargetFor, mozilla::dom::ServiceWorkerJobQueue::RunJob, mozilla::dom::ServiceWorkerManager::Unregister, mozilla::dom::ServiceWorkerRegistrationMainThread::Unregister, mozilla::dom::UnregisterCallback::UnregisterCallback, mozilla::net::nsStandardURL::TemplatedMutator, operator]
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/fetch/api/request/destination/__dir__.ini @@ -0,0 +1,1 @@ +lsan-allowed: [Create, Then, mozilla::BasePrincipal::CreateContentPrincipal, mozilla::SchedulerGroup::CreateEventTargetFor, mozilla::dom::ServiceWorkerJobQueue::RunJob, mozilla::dom::ServiceWorkerManager::Unregister, mozilla::dom::ServiceWorkerRegistrationMainThread::Unregister, mozilla::dom::UnregisterCallback::UnregisterCallback, operator]
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/fetch/sec-metadata/portal.tentative.https.sub.html.ini @@ -0,0 +1,11 @@ +[portal.tentative.https.sub.html] + expected: TIMEOUT + [web-platform.test -> www.web-platform.test:8443 portal] + expected: TIMEOUT + + [web-platform.test -> web-platform.test:8443 portal] + expected: TIMEOUT + + [web-platform.test -> www.not-web-platform.test:8443 portal] + expected: TIMEOUT +
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/fetch/stale-while-revalidate/__dir__.ini @@ -0,0 +1,1 @@ +lsan-allowed: [Alloc, Create, Malloc, Then, mozilla::BasePrincipal::CreateContentPrincipal, mozilla::SchedulerGroup::CreateEventTargetFor, mozilla::dom::ServiceWorkerJobQueue::RunJob, mozilla::dom::ServiceWorkerManager::Unregister, mozilla::dom::ServiceWorkerRegistrationMainThread::Unregister, mozilla::dom::UnregisterCallback::UnregisterCallback, mozilla::net::nsStandardURL::TemplatedMutator, operator]
--- a/testing/web-platform/meta/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/no_window_open_when_term_nesting_level_nonzero.window.js.ini +++ b/testing/web-platform/meta/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/no_window_open_when_term_nesting_level_nonzero.window.js.ini @@ -4,14 +4,13 @@ expected: if not debug and webrender and (os == "linux"): TIMEOUT FAIL [no popups with frame navigation] expected: FAIL [no popups from synchronously reachable window] - expected: - [PASS, FAIL] + expected: [FAIL, PASS] [no popups from another synchronously reachable window] expected: FAIL
--- a/testing/web-platform/meta/html/cross-origin-embedder-policy/__dir__.ini +++ b/testing/web-platform/meta/html/cross-origin-embedder-policy/__dir__.ini @@ -1,1 +1,2 @@ -prefs: [browser.tabs.remote.useCrossOriginEmbedderPolicy:true, browser.tabs.remote.useCORP:true] \ No newline at end of file +prefs: [browser.tabs.remote.useCrossOriginEmbedderPolicy:true, browser.tabs.remote.useCORP:true] +lsan-allowed: [Alloc, Malloc, Then, mozilla::BasePrincipal::CreateContentPrincipal, mozilla::SchedulerGroup::CreateEventTargetFor, mozilla::dom::ServiceWorkerJobQueue::RunJob, mozilla::dom::ServiceWorkerManager::Unregister, mozilla::dom::ServiceWorkerRegistrationMainThread::Unregister, mozilla::dom::UnregisterCallback::UnregisterCallback, mozilla::net::nsStandardURL::TemplatedMutator, operator]
--- a/testing/web-platform/meta/html/dom/idlharness.https.html.ini +++ b/testing/web-platform/meta/html/dom/idlharness.https.html.ini @@ -777,16 +777,19 @@ expected: FAIL [ElementInternals interface: attribute validity] expected: FAIL [SVGElement interface: attribute autofocus] expected: FAIL + [SVGElement interface: attribute onslotchange] + expected: FAIL + [idlharness.https.html?include=(Document|Window)] [Document interface: documentWithHandlers must inherit property "onsecuritypolicyviolation" with the proper type] expected: FAIL [Window interface: window must have own property "window"] expected: FAIL @@ -856,16 +859,34 @@ expected: FAIL [Document interface: iframe.contentDocument must inherit property "oncancel" with the proper type] expected: FAIL [Window interface: attribute oncancel] expected: FAIL + [Document interface: new Document() must inherit property "onslotchange" with the proper type] + expected: FAIL + + [Document interface: documentWithHandlers must inherit property "onslotchange" with the proper type] + expected: FAIL + + [Window interface: window must inherit property "onslotchange" with the proper type] + expected: FAIL + + [Document interface: attribute onslotchange] + expected: FAIL + + [Window interface: attribute onslotchange] + expected: FAIL + + [Document interface: iframe.contentDocument must inherit property "onslotchange" with the proper type] + expected: FAIL + [idlharness.https.html?include=HTML.*] [HTMLDialogElement interface: operation close(DOMString)] expected: FAIL [HTMLDialogElement interface: existence and properties of interface object] expected: FAIL @@ -1134,8 +1155,14 @@ expected: FAIL [HTMLElement interface: document.createElement("noscript") must inherit property "autofocus" with the proper type] expected: FAIL [HTMLElement interface: attribute autofocus] expected: FAIL + [HTMLElement interface: attribute onslotchange] + expected: FAIL + + [HTMLElement interface: document.createElement("noscript") must inherit property "onslotchange" with the proper type] + expected: FAIL +
--- a/testing/web-platform/meta/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-default-style.html.ini +++ b/testing/web-platform/meta/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-default-style.html.ini @@ -11,18 +11,18 @@ [border-top-color] expected: if os == "android": PASS if os == "linux": PASS FAIL [border-bottom-color] expected: + if os == "linux": PASS if os == "android": PASS - if os == "linux": PASS FAIL [border-right-color] expected: if os == "android": PASS if os == "linux": PASS FAIL
--- a/testing/web-platform/meta/html/semantics/forms/autofocus/update-the-rendering.html.ini +++ b/testing/web-platform/meta/html/semantics/forms/autofocus/update-the-rendering.html.ini @@ -1,10 +1,13 @@ [update-the-rendering.html] ["Flush autofocus candidates" should be happen after the first animation frame callbacks, and before a resize event in the next iteration of window event loop.] expected: + if (os == "linux") and debug and not webrender and sw-e10s: ["PASS", "FAIL"] + if (os == "linux") and debug and not webrender and not sw-e10s: ["FAIL", "PASS"] if (os == "linux") and not debug and (processor == "x86_64") and webrender: ["FAIL", "PASS"] if (os == "linux") and not debug and (processor == "x86_64") and not webrender: ["FAIL", "PASS"] - if (os == "linux") and debug and sw-e10s: ["FAIL", "PASS"] - if (os == "linux") and debug and not sw-e10s: ["PASS", "FAIL"] - if (os == "win") and debug: ["FAIL", "PASS"] + if (os == "win") and debug and not webrender and (processor == "x86_64"): ["FAIL", "PASS"] + if (os == "win") and debug and not webrender and (processor == "x86"): ["FAIL", "PASS"] + if (os == "linux") and debug and webrender: ["PASS", "FAIL"] + if (os == "win") and debug and webrender: ["FAIL", "PASS"] FAIL
--- a/testing/web-platform/meta/html/webappapis/scripting/events/event-handler-all-global-events.html.ini +++ b/testing/web-platform/meta/html/webappapis/scripting/events/event-handler-all-global-events.html.ini @@ -21,8 +21,20 @@ expected: FAIL [onsecuritypolicyviolation: the content attribute must execute when an event is dispatched] expected: FAIL [GlobalEventHandlers] expected: FAIL + [onslotchange: must be on the appropriate locations for GlobalEventHandlers] + expected: FAIL + + [onslotchange: the content attribute must be compiled into a function as the corresponding property] + expected: FAIL + + [onslotchange: the default value must be null] + expected: FAIL + + [onslotchange: the content attribute must execute when an event is dispatched] + expected: FAIL +
--- a/testing/web-platform/meta/html/webappapis/scripting/events/event-handler-attributes-body-window.html.ini +++ b/testing/web-platform/meta/html/webappapis/scripting/events/event-handler-attributes-body-window.html.ini @@ -69,8 +69,17 @@ expected: if not debug and e10s and (os == "linux") and (processor == "x86_64"): FAIL if not debug and (os == "mac"): FAIL if not debug and (os == "win") and (version == "6.1.7601"): FAIL [HTMLBodyElement event handlers] expected: FAIL + [not shadowed slotchange (window)] + expected: FAIL + + [not shadowed slotchange (document.createElement("body"))] + expected: FAIL + + [not shadowed slotchange (document.body)] + expected: FAIL +
--- a/testing/web-platform/meta/html/webappapis/scripting/events/event-handler-attributes-frameset-window.html.ini +++ b/testing/web-platform/meta/html/webappapis/scripting/events/event-handler-attributes-frameset-window.html.ini @@ -48,8 +48,17 @@ [shadowed unload removal (document.createElement("frameset"))] disabled: Bug 1485887 expected: if not debug and not webrender and e10s and (os == "linux"): FAIL [event handlers] expected: FAIL + [not shadowed slotchange (window)] + expected: FAIL + + [not shadowed slotchange (document.createElement("frameset"))] + expected: FAIL + + [not shadowed slotchange (document.body)] + expected: FAIL +
--- a/testing/web-platform/meta/html/webappapis/scripting/events/event-handler-attributes-windowless-body.html.ini +++ b/testing/web-platform/meta/html/webappapis/scripting/events/event-handler-attributes-windowless-body.html.ini @@ -9,8 +9,14 @@ expected: FAIL [securitypolicyviolation is unaffected on a windowless frameset] expected: FAIL [event-handler-attributes-windowless-body] expected: FAIL + [slotchange is unaffected on a windowless frameset] + expected: FAIL + + [slotchange is unaffected on a windowless body] + expected: FAIL +
--- a/testing/web-platform/meta/mathml/relations/html5-tree/math-global-event-handlers.tentative.html.ini +++ b/testing/web-platform/meta/mathml/relations/html5-tree/math-global-event-handlers.tentative.html.ini @@ -921,8 +921,23 @@ expected: FAIL [onmouseenter: dispatching an Event at a <math> element must trigger element.onmouseenter] expected: FAIL [onkeyup: dispatching an Event at a <math> element must trigger element.onkeyup] expected: FAIL + [onslotchange: the default value must be null] + expected: FAIL + + [onslotchange: dynamic changes on the attribute] + expected: FAIL + + [onslotchange: must be on the appropriate locations for GlobalEventHandlers] + expected: FAIL + + [onslotchange: the content attribute must be compiled into a function as the corresponding property] + expected: FAIL + + [onslotchange: dispatching an Event at a <math> element must trigger element.onslotchange] + expected: FAIL +
--- a/testing/web-platform/meta/mimesniff/mime-types/charset-parameter.window.js.ini +++ b/testing/web-platform/meta/mimesniff/mime-types/charset-parameter.window.js.ini @@ -1,9 +1,11 @@ [charset-parameter.window.html] + expected: + if (processor == "x86") and (os == "win") and not debug: ["OK", "TIMEOUT"] [text/html;charset=gbk(] expected: FAIL [text/html;charset=gbk;charset=windows-1255] expected: FAIL [text/html;";charset=gbk] expected: FAIL @@ -21,8 +23,12 @@ expected: FAIL [text/html;charset="";charset=GBK] expected: FAIL [text/html;charset=\x0cgbk] expected: FAIL + [text/html;charset="gbk"] + expected: + if (processor == "x86") and (os == "win") and not debug: ["PASS", "TIMEOUT"] +
--- a/testing/web-platform/meta/mozilla-sync +++ b/testing/web-platform/meta/mozilla-sync @@ -1,2 +1,2 @@ -local: a9b0375fc5d6e30137c82d92d1900f7616bc1b19 -upstream: 42b82765b84378e746063997f51f9fd75a1d902c +local: fe136f92ad53a4a93aed95863a4e0fe753c6f9c8 +upstream: eaa551911f12c5c526f56cafd0c7ab24667ead3c
deleted file mode 100644 --- a/testing/web-platform/meta/native-file-system/FileSystemBaseHandle-remove.tentative.https.window.js.ini +++ /dev/null @@ -1,40 +0,0 @@ -[FileSystemBaseHandle-remove.tentative.https.window.html] - [removeEntry() on a non-empty directory should fail] - expected: FAIL - - [removeEntry() with "." name should fail] - expected: FAIL - - [removeEntry() on an already removed file should fail] - expected: FAIL - - [removeEntry() with empty name should fail] - expected: FAIL - - [remove() on an already removed file should fail] - expected: FAIL - - [removeEntry() with a path separator should fail.] - expected: FAIL - - [removeEntry() with ".." name should fail] - expected: FAIL - - [remove() to remove a file] - expected: FAIL - - [Cleanup to setup test environment] - expected: FAIL - - [remove() on a non-empty directory should fail] - expected: FAIL - - [removeEntry() to remove an empty directory] - expected: FAIL - - [remove() to remove an empty directory] - expected: FAIL - - [removeEntry() to remove a file] - expected: FAIL -
deleted file mode 100644 --- a/testing/web-platform/meta/native-file-system/FileSystemDirectoryHandle-getDirectory.tentative.https.window.js.ini +++ /dev/null @@ -1,34 +0,0 @@ -[FileSystemDirectoryHandle-getDirectory.tentative.https.window.html] - [getDirectory(create=true) with a path separator] - expected: FAIL - - [getDirectory(create=false) rejects for non-existing directories] - expected: FAIL - - [getDirectory() with "." name] - expected: FAIL - - [getDirectory(create=true) returns existing directories without erasing] - expected: FAIL - - [getDirectory(create=false) returns existing directories] - expected: FAIL - - [getDirectory() when a file already exists with the same name] - expected: FAIL - - [getDirectory() with ".." name] - expected: FAIL - - [getDirectory(create=true) creates an empty directory] - expected: FAIL - - [Cleanup to setup test environment] - expected: FAIL - - [getDirectory() with empty name] - expected: FAIL - - [getDirectory(create=false) with a path separator when the directory exists] - expected: FAIL -
deleted file mode 100644 --- a/testing/web-platform/meta/native-file-system/FileSystemDirectoryHandle-getFile.tentative.https.window.js.ini +++ /dev/null @@ -1,37 +0,0 @@ -[FileSystemDirectoryHandle-getFile.tentative.https.window.html] - [getFile(create=false) rejects for non-existing files] - expected: FAIL - - [getFile(create=false) returns existing files] - expected: FAIL - - [getFile(create=true) creates an empty file for non-existing files] - expected: FAIL - - [getFile(create=true) returns existing files without erasing] - expected: FAIL - - [getFile() with "." name] - expected: FAIL - - [getFile(create=false) with a path separator when the file exists.] - expected: FAIL - - [getFile(create=true) with a path separator] - expected: FAIL - - [Cleanup to setup test environment] - expected: FAIL - - [getFile(create=true) when a directory already exists with the same name] - expected: FAIL - - [getFile(create=false) when a directory already exists with the same name] - expected: FAIL - - [getFile() with empty name] - expected: FAIL - - [getFile() with ".." name] - expected: FAIL -
deleted file mode 100644 --- a/testing/web-platform/meta/native-file-system/FileSystemWriter.tentative.https.window.js.ini +++ /dev/null @@ -1,76 +0,0 @@ -[FileSystemWriter.tentative.https.window.html] - [write() called with a blob and a valid offset] - expected: FAIL - - [atomic writes: only one close() operation may succeed] - expected: FAIL - - [atomic writes: close() fails when parent directory is removed] - expected: FAIL - - [write() with a valid typed array buffer] - expected: FAIL - - [write() with a valid utf-8 string] - expected: FAIL - - [truncate() to grow a file] - expected: FAIL - - [write() with an empty blob to an empty file] - expected: FAIL - - [write() with an empty array buffer to an empty file] - expected: FAIL - - [createWriter() fails when parent directory is removed] - expected: FAIL - - [createWriter({keepExistingData: true}): atomic writer initialized with source contents] - expected: FAIL - - [truncate() to shrink a file] - expected: FAIL - - [atomic writes: close() after close() fails] - expected: FAIL - - [atomic writes: writers make atomic changes on close] - expected: FAIL - - [truncate() fails when parent directory is removed] - expected: FAIL - - [write() a blob to an empty file] - expected: FAIL - - [write() called with an invalid offset] - expected: FAIL - - [atomic writes: truncate() after close() fails] - expected: FAIL - - [createWriter({keepExistingData: false}): atomic writer initialized with empty file] - expected: FAIL - - [write() fails when parent directory is removed] - expected: FAIL - - [write() with an empty string to an empty file] - expected: FAIL - - [atomic writes: writer persists file on close, even if file is removed] - expected: FAIL - - [write() with a string with windows line ending preserved] - expected: FAIL - - [atomic writes: write() after close() fails] - expected: FAIL - - [Cleanup to setup test environment] - expected: FAIL - - [write() with a string with unix line ending preserved] - expected: FAIL -
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/native-file-system/native_FileSystemDirectoryHandle-getDirectory.tentative.https.manual.window.js.ini @@ -0,0 +1,37 @@ +[native_FileSystemDirectoryHandle-getDirectory.tentative.https.manual.window.html] + [getDirectory() with ".." name] + expected: FAIL + + [getDirectory(create=false) rejects for non-existing directories] + expected: FAIL + + [getDirectory() with "." name] + expected: FAIL + + [getDirectory(create=true) with a path separator] + expected: FAIL + + [getDirectory(create=true) returns existing directories without erasing] + expected: FAIL + + [getDirectory(create=false) returns existing directories] + expected: FAIL + + [User granted write access.] + expected: FAIL + + [User succesfully selected an empty directory.] + expected: FAIL + + [getDirectory(create=true) creates an empty directory] + expected: FAIL + + [getDirectory() with empty name] + expected: FAIL + + [getDirectory() when a file already exists with the same name] + expected: FAIL + + [getDirectory(create=false) with a path separator when the directory exists] + expected: FAIL +
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/native-file-system/native_FileSystemDirectoryHandle-getFile.tentative.https.manual.window.js.ini @@ -0,0 +1,40 @@ +[native_FileSystemDirectoryHandle-getFile.tentative.https.manual.window.html] + [getFile(create=false) with a path separator when the file exists.] + expected: FAIL + + [getFile(create=false) rejects for non-existing files] + expected: FAIL + + [getFile(create=false) returns existing files] + expected: FAIL + + [getFile(create=true) creates an empty file for non-existing files] + expected: FAIL + + [getFile(create=true) returns existing files without erasing] + expected: FAIL + + [User granted write access.] + expected: FAIL + + [User succesfully selected an empty directory.] + expected: FAIL + + [getFile(create=true) with a path separator] + expected: FAIL + + [getFile(create=true) when a directory already exists with the same name] + expected: FAIL + + [getFile(create=false) when a directory already exists with the same name] + expected: FAIL + + [getFile() with empty name] + expected: FAIL + + [getFile() with "." name] + expected: FAIL + + [getFile() with ".." name] + expected: FAIL +
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/native-file-system/native_FileSystemDirectoryHandle-removeEntry.tentative.https.manual.window.js.ini @@ -0,0 +1,31 @@ +[native_FileSystemDirectoryHandle-removeEntry.tentative.https.manual.window.html] + [removeEntry() on a non-empty directory should fail] + expected: FAIL + + [removeEntry() on an already removed file should fail] + expected: FAIL + + [removeEntry() with empty name should fail] + expected: FAIL + + [removeEntry() with a path separator should fail.] + expected: FAIL + + [User granted write access.] + expected: FAIL + + [User succesfully selected an empty directory.] + expected: FAIL + + [removeEntry() with "." name should fail] + expected: FAIL + + [removeEntry() with ".." name should fail] + expected: FAIL + + [removeEntry() to remove an empty directory] + expected: FAIL + + [removeEntry() to remove a file] + expected: FAIL +
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/native-file-system/native_FileSystemWriter.tentative.https.manual.window.js.ini @@ -0,0 +1,79 @@ +[native_FileSystemWriter.tentative.https.manual.window.html] + [write() called with a blob and a valid offset] + expected: FAIL + + [atomic writes: only one close() operation may succeed] + expected: FAIL + + [atomic writes: close() fails when parent directory is removed] + expected: FAIL + + [write() with a valid typed array buffer] + expected: FAIL + + [write() with a valid utf-8 string] + expected: FAIL + + [truncate() to grow a file] + expected: FAIL + + [write() with an empty blob to an empty file] + expected: FAIL + + [write() with an empty array buffer to an empty file] + expected: FAIL + + [createWriter() fails when parent directory is removed] + expected: FAIL + + [createWriter({keepExistingData: true}): atomic writer initialized with source contents] + expected: FAIL + + [truncate() to shrink a file] + expected: FAIL + + [atomic writes: close() after close() fails] + expected: FAIL + + [atomic writes: writers make atomic changes on close] + expected: FAIL + + [truncate() fails when parent directory is removed] + expected: FAIL + + [User succesfully selected an empty directory.] + expected: FAIL + + [write() a blob to an empty file] + expected: FAIL + + [write() called with an invalid offset] + expected: FAIL + + [atomic writes: truncate() after close() fails] + expected: FAIL + + [createWriter({keepExistingData: false}): atomic writer initialized with empty file] + expected: FAIL + + [write() fails when parent directory is removed] + expected: FAIL + + [write() with an empty string to an empty file] + expected: FAIL + + [atomic writes: writer persists file on close, even if file is removed] + expected: FAIL + + [User granted write access.] + expected: FAIL + + [write() with a string with windows line ending preserved] + expected: FAIL + + [atomic writes: write() after close() fails] + expected: FAIL + + [write() with a string with unix line ending preserved] + expected: FAIL +
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/native-file-system/sandboxed_FileSystemDirectoryHandle-getDirectory.tentative.https.any.js.ini @@ -0,0 +1,63 @@ +[sandboxed_FileSystemDirectoryHandle-getDirectory.tentative.https.any.html] + [getDirectory(create=true) with a path separator] + expected: FAIL + + [getDirectory(create=false) rejects for non-existing directories] + expected: FAIL + + [getDirectory() with "." name] + expected: FAIL + + [getDirectory(create=true) returns existing directories without erasing] + expected: FAIL + + [getDirectory(create=false) returns existing directories] + expected: FAIL + + [getDirectory() when a file already exists with the same name] + expected: FAIL + + [getDirectory() with ".." name] + expected: FAIL + + [getDirectory(create=true) creates an empty directory] + expected: FAIL + + [getDirectory() with empty name] + expected: FAIL + + [getDirectory(create=false) with a path separator when the directory exists] + expected: FAIL + + +[sandboxed_FileSystemDirectoryHandle-getDirectory.tentative.https.any.worker.html] + [getDirectory(create=true) with a path separator] + expected: FAIL + + [getDirectory(create=false) rejects for non-existing directories] + expected: FAIL + + [getDirectory() with "." name] + expected: FAIL + + [getDirectory(create=true) returns existing directories without erasing] + expected: FAIL + + [getDirectory(create=false) returns existing directories] + expected: FAIL + + [getDirectory() when a file already exists with the same name] + expected: FAIL + + [getDirectory() with ".." name] + expected: FAIL + + [getDirectory(create=true) creates an empty directory] + expected: FAIL + + [getDirectory() with empty name] + expected: FAIL + + [getDirectory(create=false) with a path separator when the directory exists] + expected: FAIL +
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/native-file-system/sandboxed_FileSystemDirectoryHandle-getFile.tentative.https.any.js.ini @@ -0,0 +1,69 @@ +[sandboxed_FileSystemDirectoryHandle-getFile.tentative.https.any.worker.html] + [getFile(create=false) rejects for non-existing files] + expected: FAIL + + [getFile(create=false) returns existing files] + expected: FAIL + + [getFile(create=true) creates an empty file for non-existing files] + expected: FAIL + + [getFile(create=true) returns existing files without erasing] + expected: FAIL + + [getFile() with "." name] + expected: FAIL + + [getFile(create=false) with a path separator when the file exists.] + expected: FAIL + + [getFile(create=true) with a path separator] + expected: FAIL + + [getFile(create=true) when a directory already exists with the same name] + expected: FAIL + + [getFile(create=false) when a directory already exists with the same name] + expected: FAIL + + [getFile() with empty name] + expected: FAIL + + [getFile() with ".." name] + expected: FAIL + + +[sandboxed_FileSystemDirectoryHandle-getFile.tentative.https.any.html] + [getFile(create=false) rejects for non-existing files] + expected: FAIL + + [getFile(create=false) returns existing files] + expected: FAIL + + [getFile(create=true) creates an empty file for non-existing files] + expected: FAIL + + [getFile(create=true) returns existing files without erasing] + expected: FAIL + + [getFile() with "." name] + expected: FAIL + + [getFile(create=false) with a path separator when the file exists.] + expected: FAIL + + [getFile(create=true) with a path separator] + expected: FAIL + + [getFile(create=true) when a directory already exists with the same name] + expected: FAIL + + [getFile(create=false) when a directory already exists with the same name] + expected: FAIL + + [getFile() with empty name] + expected: FAIL + + [getFile() with ".." name] + expected: FAIL +
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/native-file-system/sandboxed_FileSystemDirectoryHandle-removeEntry.tentative.https.any.js.ini @@ -0,0 +1,51 @@ +[sandboxed_FileSystemDirectoryHandle-removeEntry.tentative.https.any.html] + [removeEntry() on a non-empty directory should fail] + expected: FAIL + + [removeEntry() on an already removed file should fail] + expected: FAIL + + [removeEntry() with empty name should fail] + expected: FAIL + + [removeEntry() with a path separator should fail.] + expected: FAIL + + [removeEntry() with ".." name should fail] + expected: FAIL + + [removeEntry() with "." name should fail] + expected: FAIL + + [removeEntry() to remove an empty directory] + expected: FAIL + + [removeEntry() to remove a file] + expected: FAIL + + +[sandboxed_FileSystemDirectoryHandle-removeEntry.tentative.https.any.worker.html] + [removeEntry() on a non-empty directory should fail] + expected: FAIL + + [removeEntry() on an already removed file should fail] + expected: FAIL + + [removeEntry() with empty name should fail] + expected: FAIL + + [removeEntry() with a path separator should fail.] + expected: FAIL + + [removeEntry() with ".." name should fail] + expected: FAIL + + [removeEntry() with "." name should fail] + expected: FAIL + + [removeEntry() to remove an empty directory] + expected: FAIL + + [removeEntry() to remove a file] + expected: FAIL +
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/native-file-system/sandboxed_FileSystemWriter.tentative.https.any.js.ini @@ -0,0 +1,147 @@ +[sandboxed_FileSystemWriter.tentative.https.any.html] + [write() called with a blob and a valid offset] + expected: FAIL + + [atomic writes: only one close() operation may succeed] + expected: FAIL + + [atomic writes: close() fails when parent directory is removed] + expected: FAIL + + [write() with a valid typed array buffer] + expected: FAIL + + [write() with a valid utf-8 string] + expected: FAIL + + [truncate() to grow a file] + expected: FAIL + + [write() with an empty blob to an empty file] + expected: FAIL + + [write() with an empty array buffer to an empty file] + expected: FAIL + + [createWriter() fails when parent directory is removed] + expected: FAIL + + [createWriter({keepExistingData: true}): atomic writer initialized with source contents] + expected: FAIL + + [truncate() to shrink a file] + expected: FAIL + + [atomic writes: close() after close() fails] + expected: FAIL + + [atomic writes: writers make atomic changes on close] + expected: FAIL + + [truncate() fails when parent directory is removed] + expected: FAIL + + [write() a blob to an empty file] + expected: FAIL + + [write() called with an invalid offset] + expected: FAIL + + [atomic writes: truncate() after close() fails] + expected: FAIL + + [createWriter({keepExistingData: false}): atomic writer initialized with empty file] + expected: FAIL + + [write() fails when parent directory is removed] + expected: FAIL + + [write() with an empty string to an empty file] + expected: FAIL + + [atomic writes: writer persists file on close, even if file is removed] + expected: FAIL + + [write() with a string with windows line ending preserved] + expected: FAIL + + [atomic writes: write() after close() fails] + expected: FAIL + + [write() with a string with unix line ending preserved] + expected: FAIL + + +[sandboxed_FileSystemWriter.tentative.https.any.worker.html] + [write() called with a blob and a valid offset] + expected: FAIL + + [atomic writes: only one close() operation may succeed] + expected: FAIL + + [atomic writes: close() fails when parent directory is removed] + expected: FAIL + + [write() with a valid typed array buffer] + expected: FAIL + + [write() with a valid utf-8 string] + expected: FAIL + + [truncate() to grow a file] + expected: FAIL + + [write() with an empty blob to an empty file] + expected: FAIL + + [write() with an empty array buffer to an empty file] + expected: FAIL + + [createWriter() fails when parent directory is removed] + expected: FAIL + + [createWriter({keepExistingData: true}): atomic writer initialized with source contents] + expected: FAIL + + [truncate() to shrink a file] + expected: FAIL + + [atomic writes: close() after close() fails] + expected: FAIL + + [atomic writes: writers make atomic changes on close] + expected: FAIL + + [truncate() fails when parent directory is removed] + expected: FAIL + + [write() a blob to an empty file] + expected: FAIL + + [write() called with an invalid offset] + expected: FAIL + + [atomic writes: truncate() after close() fails] + expected: FAIL + + [createWriter({keepExistingData: false}): atomic writer initialized with empty file] + expected: FAIL + + [write() fails when parent directory is removed] + expected: FAIL + + [write() with an empty string to an empty file] + expected: FAIL + + [atomic writes: writer persists file on close, even if file is removed] + expected: FAIL + + [write() with a string with windows line ending preserved] + expected: FAIL + + [atomic writes: write() after close() fails] + expected: FAIL + + [write() with a string with unix line ending preserved] + expected: FAIL +
--- a/testing/web-platform/meta/pointerevents/extension/__dir__.ini +++ b/testing/web-platform/meta/pointerevents/extension/__dir__.ini @@ -1,2 +1,2 @@ -lsan-allowed: [NS_NewDOMPointerEvent, createTable, mozilla::WidgetPointerEvent::Duplicate, mozilla::dom::Performance::CreateForMainThread, nsThread::ProcessNextEvent] +lsan-allowed: [NS_NewDOMPointerEvent, RunInternal, createTable, mozilla::WidgetPointerEvent::Duplicate, mozilla::dom::Performance::CreateForMainThread, nsThread::ProcessNextEvent] leak-threshold: [tab:358400]
--- a/testing/web-platform/meta/pointerevents/pointerlock/pointerevent_movementxy.html.ini +++ b/testing/web-platform/meta/pointerevents/pointerlock/pointerevent_movementxy.html.ini @@ -1,10 +1,8 @@ [pointerevent_movementxy.html] expected: - if debug and (os == "linux") and not webrender and sw-e10s: ["OK", "ERROR"] - if debug and (os == "linux") and webrender: ["OK", "ERROR"] - if debug and (os == "win") and webrender: ["OK", "ERROR"] - if debug and (os == "mac"): ["OK", "ERROR"] + if (os == "mac") and debug: ["OK", "ERROR"] + if (os == "mac") and not debug: ["OK", "ERROR"] [ERROR, OK] [mouse pointerevent attributes] expected: FAIL
--- a/testing/web-platform/meta/pointerevents/pointerlock/pointerevent_movementxy_with_pointerlock.html.ini +++ b/testing/web-platform/meta/pointerevents/pointerlock/pointerevent_movementxy_with_pointerlock.html.ini @@ -1,9 +1,11 @@ [pointerevent_movementxy_with_pointerlock.html] [mouse pointerevent movementX/Y with pointerlock test] expected: - if (os == "win") and (processor == "x86_64") and not webrender and not debug: ["PASS", "FAIL"] - if (os == "linux") and not debug and (processor == "x86_64"): ["PASS", "FAIL"] - if (os == "win") and (processor == "x86") and not debug: ["PASS", "FAIL"] - if os == "android": ["PASS", "FAIL"] - [FAIL, PASS] + if (os == "linux") and debug and not webrender and sw-e10s: ["FAIL", "PASS"] + if (os == "win") and not debug and (processor == "x86_64") and not webrender: ["FAIL", "PASS"] + if (os == "linux") and debug and webrender: ["FAIL", "PASS"] + if (os == "win") and debug and webrender: ["FAIL", "PASS"] + if (os == "win") and not debug and (processor == "aarch64"): ["FAIL", "PASS"] + if os == "mac": ["FAIL", "PASS"] + [PASS, FAIL]
--- a/testing/web-platform/meta/pointerevents/pointerlock/pointerevent_pointermove_on_chorded_mouse_button_when_locked.html.ini +++ b/testing/web-platform/meta/pointerevents/pointerlock/pointerevent_pointermove_on_chorded_mouse_button_when_locked.html.ini @@ -1,9 +1,9 @@ [pointerevent_pointermove_on_chorded_mouse_button_when_locked.html] [pointer locked pointermove events received for button state changes] expected: if ccov and (os == "win"): [PASS, FAIL] - if (os == "linux") and debug and not webrender and not sw-e10s: ["PASS", "FAIL"] - if (os == "linux") and debug and not webrender and sw-e10s: ["PASS", "FAIL"] - if (os == "linux") and debug and webrender: ["PASS", "FAIL"] - if (os == "linux") and not debug: ["PASS", "FAIL"] + if (os == "linux") and not debug and not webrender and (processor == "x86"): ["PASS", "FAIL"] + if (os == "linux") and not debug and not webrender and (processor == "x86_64"): ["PASS", "FAIL"] + if (os == "linux") and not debug and webrender: ["PASS", "FAIL"] + if (os == "linux") and debug: ["PASS", "FAIL"]
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/push-api/__dir__.ini @@ -0,0 +1,1 @@ +lsan-allowed: [Alloc, Create, Malloc, Realloc, Then, mozilla::BasePrincipal::CreateContentPrincipal, mozilla::SchedulerGroup::CreateEventTargetFor, mozilla::dom::ServiceWorkerManager::Unregister, mozilla::dom::ServiceWorkerRegistrationMainThread::Unregister, mozilla::dom::UnregisterCallback::UnregisterCallback, mozilla::net::nsStandardURL::TemplatedMutator, operator]
--- a/testing/web-platform/meta/resize-observer/observe.html.ini +++ b/testing/web-platform/meta/resize-observer/observe.html.ini @@ -1,14 +1,14 @@ [observe.html] expected: if webrender and (os == "linux") and not debug: ["OK", "TIMEOUT"] - if webrender and (os == "linux") and debug: ["TIMEOUT", "OK"] + if webrender and (os == "linux") and debug: ["OK", "TIMEOUT"] [guard] expected: - if webrender and (os == "linux") and debug: ["NOTRUN", "PASS"] + if webrender and (os == "linux") and debug: ["PASS", "NOTRUN"] if webrender and (os == "linux") and not debug: ["PASS", "NOTRUN"] [test6: iframe notifications] expected: - if webrender and (os == "linux") and debug: ["FAIL", "PASS"] + if webrender and (os == "linux") and debug: ["PASS", "FAIL"] if webrender and (os == "linux") and not debug: ["PASS", "FAIL"]
--- a/testing/web-platform/meta/service-workers/cache-storage/serviceworker/__dir__.ini +++ b/testing/web-platform/meta/service-workers/cache-storage/serviceworker/__dir__.ini @@ -1,2 +1,3 @@ prefs: [dom.serviceWorkers.enabled:true, dom.serviceWorkers.exemptFromPerDomainMax:true, dom.caches.enabled:true] +lsan-allowed: [Alloc, Create, Malloc, Then, mozilla::BasePrincipal::CreateContentPrincipal, mozilla::SchedulerGroup::CreateEventTargetFor, mozilla::dom::ServiceWorkerJobQueue::RunJob, mozilla::dom::ServiceWorkerManager::Unregister, mozilla::dom::ServiceWorkerRegistrationMainThread::Unregister, mozilla::dom::UnregisterCallback::UnregisterCallback, mozilla::net::nsStandardURL::TemplatedMutator, operator] leak-threshold: [tab:51200]
--- a/testing/web-platform/meta/service-workers/service-worker/skip-waiting-using-registration.https.html.ini +++ b/testing/web-platform/meta/service-workers/service-worker/skip-waiting-using-registration.https.html.ini @@ -1,13 +1,13 @@ [skip-waiting-using-registration.https.html] disabled: if (os == "win") and (version == "6.1.7601"): https://bugzilla.mozilla.org/show_bug.cgi?id=1425175 if os == "linux": https://bugzilla.mozilla.org/show_bug.cgi?id=1425175 expected: + if os == "mac": ["OK", "FAIL"] if os == "android": ["OK", "FAIL"] - if os == "mac": ["OK", "FAIL"] [Test skipWaiting while a client is using the registration] expected: - if (os == "mac") and debug: ["FAIL", "PASS"] + if (os == "mac") and debug: ["PASS", "FAIL"] if (os == "mac") and not debug: ["PASS", "FAIL"] if os == "android": ["PASS", "FAIL"]
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/service-workers/service-worker/unregister-then-register-new-script.https.html.ini @@ -0,0 +1,15 @@ +[unregister-then-register-new-script.https.html] + expected: + if (os == "win") and (processor == "x86_64") and not webrender and not debug: ["OK", "TIMEOUT"] + [Registering a new script URL that fails to install does not resurrect unregistered registration] + expected: + if (os == "win") and (processor == "x86_64") and not webrender and not debug: ["PASS", "NOTRUN"] + + [Registering a new script URL while an unregistered registration is in use] + expected: + if (os == "win") and (processor == "x86_64") and not webrender and not debug: ["PASS", "TIMEOUT"] + + [Registering a new script URL that 404s does not resurrect unregistered registration] + expected: + if (os == "win") and (processor == "x86_64") and not webrender and not debug: ["PASS", "NOTRUN"] +
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/shadow-dom/focus/focus-selector-delegatesFocus.html.ini @@ -0,0 +1,25 @@ +[focus-selector-delegatesFocus.html] + [:focus applies to host with delegatesFocus=false when an element in a nested shadow tree with delegatesFocus=false is focused] + expected: FAIL + + [:focus applies to host with delegatesFocus=true when slotted element has focus] + expected: FAIL + + [:focus applies to host with delegatesFocus=true when an element in a nested shadow tree with delegatesFocus=true is focused] + expected: FAIL + + [:focus applies to host with delegatesFocus=true when an element in a nested shadow tree with delegatesFocus=false is focused] + expected: FAIL + + [:focus applies to host with delegatesFocus=false when slotted element has focus] + expected: FAIL + + [:focus applies to host with delegatesFocus=false when an element in a nested shadow tree with delegatesFocus=true is focused] + expected: FAIL + + [:focus applies to host with delegatesFocus=true when the shadow root's descendant has focus] + expected: FAIL + + [:focus applies to host with delegatesFocus=false when the shadow root's descendant has focus] + expected: FAIL +
--- a/testing/web-platform/meta/signed-exchange/reporting/sxg-reporting-prefetch-cert_parse_error-downgraded.tentative.html.ini +++ b/testing/web-platform/meta/signed-exchange/reporting/sxg-reporting-prefetch-cert_parse_error-downgraded.tentative.html.ini @@ -1,24 +1,24 @@ [sxg-reporting-prefetch-cert_parse_error-downgraded.tentative.html] expected: if not debug and not webrender and e10s and (os == "mac") and (version == "OS X 10.14") and (processor == "x86_64") and (bits == 64): TIMEOUT + if not debug and (os == "linux") and not webrender and (processor == "x86_64"): ["OK", "TIMEOUT"] if not debug and (os == "linux") and not webrender and (processor == "x86"): TIMEOUT - if not debug and (os == "linux") and not webrender and (processor == "x86_64"): ["TIMEOUT", "OK"] + if not debug and (os == "linux") and webrender: TIMEOUT if not debug and (os == "win") and (processor == "x86"): TIMEOUT + if not debug and (os == "win") and (processor == "aarch64"): ["OK", "CRASH"] if not debug and (os == "win") and (processor == "x86_64"): TIMEOUT - if not debug and (os == "win") and (processor == "aarch64"): ["OK", "CRASH"] - if not debug and (os == "linux") and webrender: TIMEOUT if not debug and (os == "mac"): TIMEOUT [SXG reporting test of sxg.failed downgraded from sxg.cert_parse_error for prefetch.] expected: if debug and not webrender and e10s and (os == "linux") and (version == "Ubuntu 16.04") and (processor == "x86") and (bits == 32): FAIL if debug and not webrender and not e10s and (os == "linux") and (version == "Ubuntu 16.04") and (processor == "x86") and (bits == 32): FAIL if debug and not webrender and e10s and (os == "mac") and (version == "OS X 10.14") and (processor == "x86_64") and (bits == 64): FAIL if not debug and not webrender and e10s and (os == "mac") and (version == "OS X 10.14") and (processor == "x86_64") and (bits == 64): TIMEOUT + if not debug and (os == "linux") and not webrender and (processor == "x86_64"): ["FAIL", "TIMEOUT"] if not debug and (os == "linux") and not webrender and (processor == "x86"): TIMEOUT - if not debug and (os == "linux") and not webrender and (processor == "x86_64"): ["TIMEOUT", "FAIL"] if not debug and (os == "linux") and webrender: TIMEOUT if not debug and (os == "win") and (processor == "x86"): TIMEOUT if not debug and (os == "win") and (processor == "x86_64"): TIMEOUT if not debug and (os == "mac"): TIMEOUT FAIL
--- a/testing/web-platform/meta/signed-exchange/reporting/sxg-reporting-prefetch-invalid_integrity_header.tentative.html.ini +++ b/testing/web-platform/meta/signed-exchange/reporting/sxg-reporting-prefetch-invalid_integrity_header.tentative.html.ini @@ -1,24 +1,24 @@ [sxg-reporting-prefetch-invalid_integrity_header.tentative.html] expected: if not debug and not webrender and e10s and (os == "mac") and (version == "OS X 10.14") and (processor == "x86_64") and (bits == 64): TIMEOUT if not debug and (os == "linux") and not webrender and (processor == "x86"): TIMEOUT - if not debug and (os == "linux") and not webrender and (processor == "x86_64"): ["TIMEOUT", "OK"] + if not debug and (os == "linux") and not webrender and (processor == "x86_64"): ["OK", "TIMEOUT"] + if not debug and (os == "linux") and webrender: TIMEOUT if not debug and (os == "win") and (processor == "x86"): TIMEOUT + if not debug and (os == "win") and (processor == "x86_64"): TIMEOUT if not debug and (os == "win") and (processor == "aarch64"): ["OK", "CRASH"] - if not debug and (os == "win") and (processor == "x86_64"): TIMEOUT - if not debug and (os == "linux") and webrender: TIMEOUT if not debug and (os == "mac"): TIMEOUT [SXG reporting test of sxg.invalid_integrity_header for prefetch.] expected: if debug and not webrender and e10s and (os == "linux") and (version == "Ubuntu 16.04") and (processor == "x86") and (bits == 32): FAIL if debug and not webrender and not e10s and (os == "linux") and (version == "Ubuntu 16.04") and (processor == "x86") and (bits == 32): FAIL if debug and not webrender and e10s and (os == "mac") and (version == "OS X 10.14") and (processor == "x86_64") and (bits == 64): FAIL if not debug and not webrender and e10s and (os == "mac") and (version == "OS X 10.14") and (processor == "x86_64") and (bits == 64): TIMEOUT if not debug and (os == "linux") and not webrender and (processor == "x86"): TIMEOUT - if not debug and (os == "linux") and not webrender and (processor == "x86_64"): ["TIMEOUT", "FAIL"] + if not debug and (os == "linux") and not webrender and (processor == "x86_64"): ["FAIL", "TIMEOUT"] if not debug and (os == "linux") and webrender: TIMEOUT if not debug and (os == "win") and (processor == "x86"): TIMEOUT if not debug and (os == "win") and (processor == "x86_64"): TIMEOUT if not debug and (os == "mac"): TIMEOUT FAIL
--- a/testing/web-platform/meta/storage-access-api/hasStorageAccess.sub.window.js.ini +++ b/testing/web-platform/meta/storage-access-api/hasStorageAccess.sub.window.js.ini @@ -3,8 +3,11 @@ [[top-level-context\] document.hasStorageAccess() should be allowed by default: true] expected: if os == "android": FAIL [[top-level-context\] document.hasStorageAccess() should be supported on the document interface] expected: if os == "android": FAIL + [[top-level-context\] document.hasStorageAccess() should work on a document object.] + expected: FAIL +
--- a/testing/web-platform/meta/svg/animations/correct-events-for-short-animations-with-syncbases.html.ini +++ b/testing/web-platform/meta/svg/animations/correct-events-for-short-animations-with-syncbases.html.ini @@ -1,8 +1,8 @@ [correct-events-for-short-animations-with-syncbases.html] [Correct events for short animations with syncbases] expected: - if (os == "linux") and (processor == "x86"): PASS - if (os == "android") and not debug: ["FAIL", "PASS"] - if (os == "win") and (processor == "aarch64"): ["FAIL", "PASS"] + if (os == "win") and debug and not webrender and (processor == "x86_64"): ["FAIL", "PASS"] + if (os == "linux") and not sw-e10s and (processor == "x86"): PASS + if (os == "linux") and sw-e10s: ["FAIL", "PASS"] [PASS, FAIL]
--- a/testing/web-platform/meta/svg/animations/scripted/onhover-syncbases.html.ini +++ b/testing/web-platform/meta/svg/animations/scripted/onhover-syncbases.html.ini @@ -7,12 +7,12 @@ expected: if webrender and (os == "linux") and not debug: [FAIL, TIMEOUT] if webrender and (os == "linux") and debug: [FAIL, PASS, TIMEOUT] if webrender and (os == "win") and debug: [PASS, TIMEOUT] if webrender and (os == "win") and not debug: [PASS, FAIL, TIMEOUT] [Check if onhover events reset correctly when triggered multiple times] expected: - if webrender and (os == "linux") and debug: ["FAIL", "PASS"] + if webrender and (os == "linux") and debug: ["PASS", "FAIL"] if webrender and (os == "linux") and not debug: FAIL if webrender and (os == "win") and not debug: ["PASS", "FAIL"]
--- a/testing/web-platform/meta/svg/animations/slider-switch.html.ini +++ b/testing/web-platform/meta/svg/animations/slider-switch.html.ini @@ -1,8 +1,9 @@ [slider-switch.html] [Check correct event bases for onclick] expected: + if (os == "linux") and webrender and debug: ["FAIL", "PASS"] + if (os == "android") and debug: ["FAIL", "PASS"] if (os == "android") and not debug: ["FAIL", "PASS"] - if (os == "mac") and debug: ["FAIL", "PASS"] if (os == "win") and (processor == "aarch64"): ["FAIL", "PASS"] [PASS, FAIL]
--- a/testing/web-platform/meta/webusb/__dir__.ini +++ b/testing/web-platform/meta/webusb/__dir__.ini @@ -1,1 +1,2 @@ prefs: [dom.security.featurePolicy.enabled:true, dom.security.featurePolicy.header.enabled:true, dom.security.featurePolicy.webidl.enabled:true] +lsan-allowed: [Alloc, Create, Malloc, Then, mozilla::BasePrincipal::CreateContentPrincipal, mozilla::SchedulerGroup::CreateEventTargetFor, mozilla::dom::ServiceWorkerJobQueue::RunJob, mozilla::dom::ServiceWorkerManager::Unregister, mozilla::dom::ServiceWorkerRegistrationMainThread::Unregister, mozilla::dom::UnregisterCallback::UnregisterCallback, mozilla::net::nsStandardURL::TemplatedMutator, operator]
new file mode 100644 --- /dev/null +++ b/testing/web-platform/meta/workers/semantics/interface-objects/003.any.js.ini @@ -0,0 +1,2 @@ +[003.any.sharedworker.html] + expected: TIMEOUT
deleted file mode 100644 --- a/testing/web-platform/meta/workers/semantics/interface-objects/003.html.ini +++ /dev/null @@ -1,25 +0,0 @@ -[003.html] - [available interface objects in shared worker] - expected: FAIL - - [The ApplicationCache interface object should be exposed] - expected: FAIL - - [The SharedWorker interface object should be exposed] - expected: FAIL - - [The CanvasPath interface object should be exposed] - expected: FAIL - - [The Path2D interface object should be exposed] - expected: FAIL - - [The WritableStream interface object should be exposed] - expected: FAIL - - [The CanvasGradient interface object should be exposed] - expected: FAIL - - [The CanvasPattern interface object should be exposed] - expected: FAIL -
--- a/testing/web-platform/meta/worklets/animation-worklet-referrer.https.html.ini +++ b/testing/web-platform/meta/worklets/animation-worklet-referrer.https.html.ini @@ -84,8 +84,17 @@ expected: FAIL [Importing a remote-origin script from a same-origin worklet script that has "same-origin" referrer policy.] expected: FAIL [Importing a remote-origin script from a remote-origin worklet script that has "same-origin" referrer policy.] expected: FAIL + [Importing a same-origin script from a remote-origin worklet script that has "origin" referrer policy should send referrer.] + expected: FAIL + + [Importing a same-origin script from a remote-origin worklet script that has "same-origin" referrer policy should send referrer.] + expected: FAIL + + [Importing a same-origin script from a remote-origin worklet script that has "no-referrer" referrer policy should not send referrer.] + expected: FAIL +
--- a/testing/web-platform/meta/worklets/audio-worklet-referrer.https.html.ini +++ b/testing/web-platform/meta/worklets/audio-worklet-referrer.https.html.ini @@ -93,8 +93,17 @@ [Importing a remote-origin script from a page that has "no-referrer" referrer policy should not send referrer.] expected: if release_or_beta: FAIL [Importing a same-origin script from a page that has "origin" referrer policy should send only an origin as referrer.] expected: if release_or_beta: FAIL + [Importing a same-origin script from a remote-origin worklet script that has "origin" referrer policy should send referrer.] + expected: FAIL + + [Importing a same-origin script from a remote-origin worklet script that has "same-origin" referrer policy should send referrer.] + expected: FAIL + + [Importing a same-origin script from a remote-origin worklet script that has "no-referrer" referrer policy should not send referrer.] + expected: FAIL +
--- a/testing/web-platform/meta/worklets/layout-worklet-referrer.https.html.ini +++ b/testing/web-platform/meta/worklets/layout-worklet-referrer.https.html.ini @@ -84,8 +84,17 @@ expected: FAIL [Importing a remote-origin script from a same-origin worklet script that has "same-origin" referrer policy.] expected: FAIL [Importing a remote-origin script from a remote-origin worklet script that has "same-origin" referrer policy.] expected: FAIL + [Importing a same-origin script from a remote-origin worklet script that has "origin" referrer policy should send referrer.] + expected: FAIL + + [Importing a same-origin script from a remote-origin worklet script that has "same-origin" referrer policy should send referrer.] + expected: FAIL + + [Importing a same-origin script from a remote-origin worklet script that has "no-referrer" referrer policy should not send referrer.] + expected: FAIL +
--- a/testing/web-platform/meta/worklets/paint-worklet-referrer.https.html.ini +++ b/testing/web-platform/meta/worklets/paint-worklet-referrer.https.html.ini @@ -84,8 +84,17 @@ expected: FAIL [Importing a remote-origin script from a same-origin worklet script that has "same-origin" referrer policy.] expected: FAIL [Importing a remote-origin script from a remote-origin worklet script that has "same-origin" referrer policy.] expected: FAIL + [Importing a same-origin script from a remote-origin worklet script that has "origin" referrer policy should send referrer.] + expected: FAIL + + [Importing a same-origin script from a remote-origin worklet script that has "same-origin" referrer policy should send referrer.] + expected: FAIL + + [Importing a same-origin script from a remote-origin worklet script that has "no-referrer" referrer policy should not send referrer.] + expected: FAIL +
--- a/testing/web-platform/tests/.github/workflows/pull_request.yml +++ b/testing/web-platform/tests/.github/workflows/pull_request.yml @@ -2,16 +2,16 @@ 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: 1 + 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
--- a/testing/web-platform/tests/.github/workflows/push-build-publish-documentation-website.yml +++ b/testing/web-platform/tests/.github/workflows/push-build-publish-documentation-website.yml @@ -4,16 +4,16 @@ on: - master name: Build & Publish Documentation Website jobs: website-build-and-publish: runs-on: ubuntu-18.04 steps: - uses: actions/checkout@v1 with: - fetch-depth: 1 + fetch-depth: 50 - name: website-build-and-publish uses: ./tools/docker/documentation env: DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }} with: entrypoint: /bin/bash args: tools/ci/website_build.sh
--- a/testing/web-platform/tests/.github/workflows/push-build-release-manifest.yml +++ b/testing/web-platform/tests/.github/workflows/push-build-release-manifest.yml @@ -4,16 +4,16 @@ on: - master name: Build & Release Manifest jobs: manifest-build-and-tag: runs-on: ubuntu-18.04 steps: - uses: actions/checkout@v1 with: - fetch-depth: 1 + fetch-depth: 50 - name: manifest-build-and-tag uses: ./tools/docker/github env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: entrypoint: python args: tools/ci/manifest_build.py
--- a/testing/web-platform/tests/IndexedDB/fire-error-event-exception.html +++ b/testing/web-platform/tests/IndexedDB/fire-error-event-exception.html @@ -16,190 +16,166 @@ function fire_error_event_test(func, des (t, db) => { const tx = db.transaction('s', 'readwrite'); tx.oncomplete = t.unreached_func('transaction should abort'); const store = tx.objectStore('s'); store.put(0, 0); const request = store.add(0, 0); request.onsuccess = t.unreached_func('request should fail'); func(t, db, tx, request); + tx.addEventListener('abort', t.step_func_done(() => { + assert_equals(tx.error.name, 'AbortError'); + })); }, description); } // Listeners on the request. fire_error_event_test((t, db, tx, request) => { request.onerror = () => { throw Error(); }; - tx.onabort = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); - }); }, 'Exception in error event handler on request'); fire_error_event_test((t, db, tx, request) => { request.onerror = e => { e.preventDefault(); throw Error(); }; - tx.onabort = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); - }); }, 'Exception in error event handler on request, with preventDefault'); fire_error_event_test((t, db, tx, request) => { request.addEventListener('error', () => { throw Error(); }); - tx.onabort = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); +}, 'Exception in error event listener on request'); + +fire_error_event_test((t, db, tx, request) => { + request.addEventListener('error', { + get handleEvent() { + throw new Error(); + }, }); -}, 'Exception in error event listener on request'); +}, 'Exception in error event listener ("handleEvent" lookup) on request'); + +fire_error_event_test((t, db, tx, request) => { + request.addEventListener('error', {}); +}, 'Exception in error event listener (non-callable "handleEvent") on request'); fire_error_event_test((t, db, tx, request) => { request.addEventListener('error', () => { // no-op }); request.addEventListener('error', () => { throw Error(); }); - tx.onabort = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); - }); }, 'Exception in second error event listener on request'); fire_error_event_test((t, db, tx, request) => { let second_listener_called = false; request.addEventListener('error', () => { throw Error(); }); request.addEventListener('error', t.step_func(() => { second_listener_called = true; assert_true(is_transaction_active(tx, 's'), 'Transaction should be active until dispatch completes'); })); - tx.onabort = t.step_func_done(() => { + tx.addEventListener('abort', t.step_func(() => { assert_true(second_listener_called); - assert_equals(tx.error.name, 'AbortError'); - }); + })); }, 'Exception in first error event listener on request, ' + 'transaction active in second'); // Listeners on the transaction. fire_error_event_test((t, db, tx, request) => { tx.onerror = () => { throw Error(); }; - tx.onabort = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); - }); }, 'Exception in error event handler on transaction'); fire_error_event_test((t, db, tx, request) => { tx.onerror = e => { e.preventDefault(); throw Error(); }; - tx.onabort = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); - }); }, 'Exception in error event handler on transaction, with preventDefault'); fire_error_event_test((t, db, tx, request) => { tx.addEventListener('error', () => { throw Error(); }); - tx.onabort = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); - }); }, 'Exception in error event listener on transaction'); fire_error_event_test((t, db, tx, request) => { tx.addEventListener('error', () => { // no-op }); tx.addEventListener('error', () => { throw Error(); }); - tx.onabort = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); - }); }, 'Exception in second error event listener on transaction'); fire_error_event_test((t, db, tx, request) => { let second_listener_called = false; tx.addEventListener('error', () => { throw Error(); }); tx.addEventListener('error', t.step_func(() => { second_listener_called = true; assert_true(is_transaction_active(tx, 's'), 'Transaction should be active until dispatch completes'); })); - tx.onabort = t.step_func_done(() => { + tx.addEventListener('abort', t.step_func(() => { assert_true(second_listener_called); - assert_equals(tx.error.name, 'AbortError'); - }); + })); }, 'Exception in first error event listener on transaction, ' + 'transaction active in second'); // Listeners on the connection. fire_error_event_test((t, db, tx, request) => { db.onerror = () => { throw Error(); }; - tx.onabort = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); - }); }, 'Exception in error event handler on connection'); fire_error_event_test((t, db, tx, request) => { db.onerror = e => { e.preventDefault() throw Error(); }; - tx.onabort = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); - }); }, 'Exception in error event handler on connection, with preventDefault'); fire_error_event_test((t, db, tx, request) => { db.addEventListener('error', () => { throw Error(); }); - tx.onabort = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); - }); }, 'Exception in error event listener on connection'); fire_error_event_test((t, db, tx, request) => { db.addEventListener('error', () => { // no-op }); db.addEventListener('error', () => { throw Error(); }); - tx.onabort = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); - }); }, 'Exception in second error event listener on connection'); fire_error_event_test((t, db, tx, request) => { let second_listener_called = false; db.addEventListener('error', () => { throw Error(); }); db.addEventListener('error', t.step_func(() => { second_listener_called = true; assert_true(is_transaction_active(tx, 's'), 'Transaction should be active until dispatch completes'); })); - tx.onabort = t.step_func_done(() => { + tx.addEventListener('abort', t.step_func(() => { assert_true(second_listener_called); - assert_equals(tx.error.name, 'AbortError'); - }); + })); }, 'Exception in first error event listener on connection, ' + 'transaction active in second'); </script>
--- a/testing/web-platform/tests/IndexedDB/fire-success-event-exception.html +++ b/testing/web-platform/tests/IndexedDB/fire-success-event-exception.html @@ -14,59 +14,66 @@ function fire_success_event_test(func, d db.createObjectStore('s'); }, (t, db) => { const tx = db.transaction('s'); tx.oncomplete = t.unreached_func('transaction should abort'); const store = tx.objectStore('s'); const request = store.get(0); func(t, db, tx, request); + tx.addEventListener('abort', t.step_func_done(() => { + assert_equals(tx.error.name, 'AbortError'); + })); }, description); } fire_success_event_test((t, db, tx, request) => { request.onsuccess = () => { throw Error(); }; - tx.onabort = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); - }); }, 'Exception in success event handler on request'); fire_success_event_test((t, db, tx, request) => { request.addEventListener('success', () => { throw Error(); }); - tx.onabort = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); +}, 'Exception in success event listener on request'); + +fire_success_event_test((t, db, tx, request) => { + request.addEventListener('success', { + get handleEvent() { + throw new Error(); + }, }); -}, 'Exception in success event listener on request'); +}, 'Exception in success event listener ("handleEvent" lookup) on request'); + +fire_success_event_test((t, db, tx, request) => { + request.addEventListener('success', { + handleEvent: null, + }); +}, 'Exception in success event listener (non-callable "handleEvent") on request'); fire_success_event_test((t, db, tx, request) => { request.addEventListener('success', () => { // no-op }); request.addEventListener('success', () => { throw Error(); }); - tx.onabort = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); - }); }, 'Exception in second success event listener on request'); fire_success_event_test((t, db, tx, request) => { let second_listener_called = false; request.addEventListener('success', () => { throw Error(); }); request.addEventListener('success', t.step_func(() => { second_listener_called = true; assert_true(is_transaction_active(tx, 's'), 'Transaction should be active until dispatch completes'); })); - tx.onabort = t.step_func_done(() => { + tx.addEventListener('abort', t.step_func(() => { assert_true(second_listener_called); - assert_equals(tx.error.name, 'AbortError'); - }); + })); }, 'Exception in first success event listener, tx active in second'); </script>
--- a/testing/web-platform/tests/IndexedDB/fire-upgradeneeded-event-exception.html +++ b/testing/web-platform/tests/IndexedDB/fire-upgradeneeded-event-exception.html @@ -10,68 +10,73 @@ setup({allow_uncaught_exception:true}); function fire_upgradeneeded_event_test(func, description) { async_test(t => { const dbname = document.location + '-' + t.name; const del = indexedDB.deleteDatabase(dbname); del.onerror = t.unreached_func('deleteDatabase should succeed'); const open = indexedDB.open(dbname, 1); open.onsuccess = t.unreached_func('open should fail'); + let tx; + open.addEventListener('upgradeneeded', () => { + tx = open.transaction; + }); func(t, open); + open.addEventListener('error', t.step_func_done(() => { + assert_equals(tx.error.name, 'AbortError'); + })); }, description); } fire_upgradeneeded_event_test((t, open) => { - let tx; open.onupgradeneeded = () => { - tx = open.transaction; throw Error(); }; - open.onerror = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); - }); }, 'Exception in upgradeneeded handler'); fire_upgradeneeded_event_test((t, open) => { - let tx; open.addEventListener('upgradeneeded', () => { - tx = open.transaction; throw Error(); }); - open.onerror = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); - }); }, 'Exception in upgradeneeded listener'); fire_upgradeneeded_event_test((t, open) => { - let tx; + open.addEventListener('upgradeneeded', { + get handleEvent() { + throw new Error(); + }, + }); +}, 'Exception in upgradeneeded "handleEvent" lookup'); + +fire_upgradeneeded_event_test((t, open) => { + open.addEventListener('upgradeneeded', { + get handleEvent() { + return 10; + }, + }); +}, 'Exception in upgradeneeded due to non-callable "handleEvent"'); + +fire_upgradeneeded_event_test((t, open) => { open.addEventListener('upgradeneeded', () => { // No-op. }); open.addEventListener('upgradeneeded', () => { - tx = open.transaction; throw Error(); }); - open.onerror = t.step_func_done(() => { - assert_equals(tx.error.name, 'AbortError'); - }); }, 'Exception in second upgradeneeded listener'); fire_upgradeneeded_event_test((t, open) => { - let tx; let second_listener_called = false; open.addEventListener('upgradeneeded', () => { open.result.createObjectStore('s'); throw Error(); }); open.addEventListener('upgradeneeded', t.step_func(() => { second_listener_called = true; - tx = open.transaction; - assert_true(is_transaction_active(tx, 's'), + assert_true(is_transaction_active(open.transaction, 's'), 'Transaction should be active until dispatch completes'); })); - open.onerror = t.step_func_done(() => { + open.addEventListener('error', t.step_func(() => { assert_true(second_listener_called); - assert_equals(tx.error.name, 'AbortError'); - }); + })); }, 'Exception in first upgradeneeded listener, tx active in second'); </script>
--- a/testing/web-platform/tests/IndexedDB/transaction-relaxed-durability.tentative.any.js +++ b/testing/web-platform/tests/IndexedDB/transaction-relaxed-durability.tentative.any.js @@ -7,18 +7,19 @@ * * @author enne@chromium.org */ // Smoke test optional parameter on IndexedDB.transaction. let cases = [ undefined, {}, - {relaxedDurability: false}, - {relaxedDurability: true}, + {durability: "default"}, + {durability: "relaxed"}, + {durability: "strict"}, ]; for (let i = 0; i < cases.length; ++i) { promise_test(async testCase => { const db = await createDatabase(testCase, db => { createBooksStore(testCase, db); }); const txn = db.transaction(['books'], 'readwrite', cases[i]);
--- a/testing/web-platform/tests/animation-worklet/META.yml +++ b/testing/web-platform/tests/animation-worklet/META.yml @@ -1,5 +1,5 @@ -spec: https://wicg.github.io/animation-worklet/ +spec: https://drafts.css-houdini.org/css-animationworklet/ suggested_reviewers: - flackr - majido - stephenmcgruer
--- a/testing/web-platform/tests/animation-worklet/idlharness.any.js +++ b/testing/web-platform/tests/animation-worklet/idlharness.any.js @@ -1,17 +1,17 @@ // META: script=/resources/WebIDLParser.js // META: script=/resources/idlharness.js 'use strict'; // https://wicg.github.io/animation-worklet/ idl_test( - ['animation-worklet'], + ['css-animation-worklet'], ['worklets', 'web-animations', 'html', 'cssom', 'dom'], idl_array => { idl_array.add_objects({ WorkletAnimation: ['new WorkletAnimation("name")'], // TODO: WorkletGroupEffect }); } );
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/negative-margin-float-positioning.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#float-width" title="10.3.5 Floating, non-replaced elements"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="width: 100px;"> + <div style="float: left; width: 50px; height: 100px; margin-left: 50px; margin-right: 50px;background: green;"></div> + <div style="float: left; width: 50px; height: 100px; margin-left: -150px; background: green;"></div> +</div> +
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/new-fc-beside-float-with-margin-rtl.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#bfc-next-to-float" title="9.5 Floats"> +<meta name="assert" content="The new formatting context's margin-right does not push it down to the next area."> +<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: 100px; height: 100px; background: red; direction: rtl;"> + <div style="float: left; width: 50px; height: 100px; background: green;"></div> + <div style="overflow: hidden; height: 100px; margin-left: -20px; background: green;"></div> +</div>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/new-fc-beside-float-with-margin.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#bfc-next-to-float" title="9.5 Floats"> +<meta name="assert" content="The new formatting context's margin-right does not push it down to the next area."> +<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: 100px; height: 100px; background: red;"> + <div style="float:left; width:50px; height:100px; background:green;"></div> + <div style="overflow: hidden; margin-right: 1px; width:50px; height:100px; background:green;"></div> +</div>
deleted file mode 100644 --- a/testing/web-platform/tests/css/CSS2/floats/zero-width-floats-positioning.html +++ /dev/null @@ -1,11 +0,0 @@ -<!DOCTYPE html> -<title>Zero width floats, and positioning with negative margins</title> -<link rel="author" title="Ian Kilpatrick" href="ikilpatrick@chromium.org"> -<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#float-width" title="10.3.5 Floating, non-replaced elements"> -<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> -<p>Test passes if there is a filled green square.</p> -<div style="margin-left: 50px; width: 125px;"> - <div style="float: left; width: 0px; height: 50px;"></div> - <div style="float: right; clear: left; width: 25px; height: 50px;"></div> - <div style="overflow: hidden; margin-left: -50px; height: 100px; background: green;"></div> -</div>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/zero-width-floats-positioning.tentative.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>Zero width floats, and positioning with negative margins</title> +<link rel="author" title="Ian Kilpatrick" href="ikilpatrick@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#float-width" title="10.3.5 Floating, non-replaced elements"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="width: 125px;"> + <div style="float: left; width: 0px; height: 50px;"></div> + <div style="float: right; clear: left; width: 25px; height: 50px;"></div> + <div style="overflow: hidden; margin-left: -50px; height: 100px; background: green;"></div> +</div>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-color-shorthand.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: border-color sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-color"> +<meta name="assert" content="border-color supports the full grammar '<color>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('border-color', 'currentcolor', { + 'border-top-color': 'currentcolor', + 'border-right-color': 'currentcolor', + 'border-bottom-color': 'currentcolor', + 'border-left-color': 'currentcolor' +}); + +test_shorthand_value('border-color', 'red yellow', { + 'border-top-color': 'red', + 'border-right-color': 'yellow', + 'border-bottom-color': 'red', + 'border-left-color': 'yellow' +}); + +test_shorthand_value('border-color', 'red yellow green', { + 'border-top-color': 'red', + 'border-right-color': 'yellow', + 'border-bottom-color': 'green', + 'border-left-color': 'yellow' +}); + +test_shorthand_value('border-color', 'red yellow green blue', { + 'border-top-color': 'red', + 'border-right-color': 'yellow', + 'border-bottom-color': 'green', + 'border-left-color': 'blue' +}); +</script> +</body> +</html>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-image-shorthand.sub.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: border-image sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image"> +<meta name="assert" content="border-image supports the full grammar ' <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? || <‘border-image-repeat’>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('border-image', 'none', { + 'border-image-source': 'none', + 'border-image-slice': '100%', + 'border-image-width': '1', + 'border-image-outset': '0', + 'border-image-repeat': 'stretch' +}); + +test_shorthand_value('border-image', 'url("http://{{host}}/") 1 2 3 4 fill', { + 'border-image-source': 'url("http://{{host}}/")', + 'border-image-slice': '1 2 3 4 fill', + 'border-image-width': '1', + 'border-image-outset': '0', + 'border-image-repeat': 'stretch' +}); + +test_shorthand_value('border-image', 'repeat round', { + 'border-image-source': 'none', + 'border-image-slice': '100%', + 'border-image-width': '1', + 'border-image-outset': '0', + 'border-image-repeat': 'repeat round' +}); + +test_shorthand_value('border-image', 'url("http://{{host}}/") fill 1 2% 3 4%', { + 'border-image-source': 'url("http://{{host}}/")', + 'border-image-slice': '1 2% 3 4% fill', + 'border-image-width': '1', + 'border-image-outset': '0', + 'border-image-repeat': 'stretch' +}); + +test_shorthand_value('border-image', '1 2% 3 4% / 5% / 6', { + 'border-image-source': 'none', + 'border-image-slice': '1 2% 3 4%', + 'border-image-width': '5%', + 'border-image-outset': '6', + 'border-image-repeat': 'stretch' +}); +</script> +</body> +</html>
--- a/testing/web-platform/tests/css/css-backgrounds/parsing/border-invalid.html +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-invalid.html @@ -1,16 +1,15 @@ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Backgrounds and Borders Module Level 3: parsing border with invalid values</title> -<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-shorthands"> -<meta name="assert" content="border-width supports only the grammar '<line-width> || <line-style> || <color>'."> +<meta name="assert" content="border supports only the grammar '<line-width> || <line-style> || <color>'."> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> </head> <body> <script> test_invalid_value("border", "auto"); test_invalid_value("border", "thin double green 1px");
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-shorthand.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: border sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-shorthands"> +<meta name="assert" content="border supports the full grammar '<line-width> || <line-style> || <color>'."> +<meta name="assert" content="The border shorthand also resets border-image to its initial value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('border', '5px dotted blue', { + 'border-top-width': '5px', + 'border-right-width': '5px', + 'border-bottom-width': '5px', + 'border-left-width': '5px', + 'border-top-style': 'dotted', + 'border-right-style': 'dotted', + 'border-bottom-style': 'dotted', + 'border-left-style': 'dotted', + 'border-top-color': 'blue', + 'border-right-color': 'blue', + 'border-bottom-color': 'blue', + 'border-left-color': 'blue', + + 'border-image-source': 'none', + 'border-image-slice': '100%', + 'border-image-width': '1', + 'border-image-outset': '0', + 'border-image-repeat': 'stretch' +}); + +test_shorthand_value('border-top', 'thin', { + 'border-top-width': 'thin', + 'border-top-style': 'none', + 'border-top-color': 'currentcolor' +}); + +test_shorthand_value('border-right', 'double', { + 'border-right-width': 'medium', + 'border-right-style': 'double', + 'border-right-color': 'currentcolor' +}); + +test_shorthand_value('border-bottom', 'green', { + 'border-bottom-width': 'medium', + 'border-bottom-style': 'none', + 'border-bottom-color': 'green' +}); + +test_shorthand_value('border-left', '1px dotted red', { + 'border-left-width': '1px', + 'border-left-style': 'dotted', + 'border-left-color': 'red' +}); +</script> +</body> +</html>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-style-shorthand.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: border-style sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-style"> +<meta name="assert" content="border-style supports the full grammar '<line-style>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('border-style', 'none', { + 'border-top-style': 'none', + 'border-right-style': 'none', + 'border-bottom-style': 'none', + 'border-left-style': 'none' +}); + +test_shorthand_value('border-style', 'inset outset', { + 'border-top-style': 'inset', + 'border-right-style': 'outset', + 'border-bottom-style': 'inset', + 'border-left-style': 'outset' +}); + +test_shorthand_value('border-style', 'hidden dotted dashed', { + 'border-top-style': 'hidden', + 'border-right-style': 'dotted', + 'border-bottom-style': 'dashed', + 'border-left-style': 'dotted' +}); + +test_shorthand_value('border-style', 'solid double groove ridge', { + 'border-top-style': 'solid', + 'border-right-style': 'double', + 'border-bottom-style': 'groove', + 'border-left-style': 'ridge' +}); +</script> +</body> +</html>
--- a/testing/web-platform/tests/css/css-backgrounds/parsing/border-valid.html +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-valid.html @@ -1,16 +1,15 @@ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Backgrounds and Borders Module Level 3: parsing border with valid values</title> -<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-shorthands"> -<meta name="assert" content="border-width supports the full grammar '<line-width> || <line-style> || <color>'."> +<meta name="assert" content="border supports the full grammar '<line-width> || <line-style> || <color>'."> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> </head> <body> <script> test_valid_value("border", "1px dotted red"); test_valid_value("border", "green double thin", "thin double green");
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/parsing/border-width-shorthand.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Backgrounds and Borders Module Level 3: border-width sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-width"> +<meta name="assert" content="border-width supports the full grammar '<line-width>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('border-width', '5px', { + 'border-top-width': '5px', + 'border-right-width': '5px', + 'border-bottom-width': '5px', + 'border-left-width': '5px' +}); + +test_shorthand_value('border-width', 'thick thin', { + 'border-top-width': 'thick', + 'border-right-width': 'thin', + 'border-bottom-width': 'thick', + 'border-left-width': 'thin' +}); + +test_shorthand_value('border-width', 'thin medium thick', { + 'border-top-width': 'thin', + 'border-right-width': 'medium', + 'border-bottom-width': 'thick', + 'border-left-width': 'medium' +}); + +test_shorthand_value('border-width', '1px 2px 3px 4px', { + 'border-top-width': '1px', + 'border-right-width': '2px', + 'border-bottom-width': '3px', + 'border-left-width': '4px' +}); +</script> +</body> +</html>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/opacity-overlapping-letters-ref.html @@ -0,0 +1,3 @@ +<link rel="stylesheet" href="/fonts/ahem.css"> +<meta name="flags" content="ahem"> +<div style="opacity: 0.5; letter-spacing: -0.6em; font: 100px/1 Ahem; white-space: pre">X X X</div>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/opacity-overlapping-letters.html @@ -0,0 +1,6 @@ +<link rel="help" href="http://www.w3.org/TR/css3-color/#transparency"> +<link rel="match" href="opacity-overlapping-letters-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Opacity should be apply on the whole text content atomically."> +<div style="opacity: 0.5; letter-spacing: -0.6em; font: 100px/1 Ahem">XXXXX</div>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-content/inheritance.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Contents properties</title> +<link rel="help" href="https://drafts.csswg.org/css-content/#propdef-quotes"> +<link rel="help" href="https://drafts.csswg.org/css-content/#property-index"> +<meta name="assert" content="Properties inherit or not according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<script> +assert_inherited('quotes', 'auto', 'none'); +assert_not_inherited('bookmark-level', 'none', '1'); +assert_not_inherited('bookmark-state', 'open', 'closed'); +</script> +</body> +</html>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-019.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<title>CSS Flexbox: min-height: auto with flex items containing percentage-sized children</title> +<link rel="author" title="Google LLC" href="https://www.google.com/" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1003556" /> + +<style> +.flex { + display: flex; +} +.column { + flex-direction: column; +} + +.bigger-than-parent { + height: 100%; + min-height: 100px; + background-color: red; +} + +#reference-overlapped-green { + position: absolute; + background-color: green; + width: 100px; + height: 100px; + z-index: 1; +} + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-green"></div> + +<div id="outer" style="width: 100px; height: 300px;" class="flex"> + <div style="height: 100px; width: 100px; background: blue;" class="flex column"> + <div style="flex: 0 1 100%"></div> + + <div style="flex: 1 0 30px;"> + <div class="bigger-than-parent"> + </div> + </div> + </div> +</div> + +<script> +onload = function() { + var outer = document.getElementById("outer"); + outer.offsetWidth; + outer.style.height = "200px"; +}; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-dynamic-min-contribution-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Grid Layout Test: dynamic minimum contribution</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-contribution"> +<meta name="assert" content="This test checks that grid items are sized correctly when their minimum contribution is dynamically changed with JavaScript." /> +<style> +#grid { + display: grid; + height: 100px; + width: 100px; +} +</style> +<div id="log"></div> +<div id="grid"> + <div id="item"></div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +const tests = [ + ["auto", "100px"], + ["0%", "100px"], + ["100%", "100px"], + ["200%", "200px"], + ["300%", "300px"], + ["400px", "400px"], + ["500px", "500px"], +]; +const item = document.getElementById("item"); +for (let [minSize, expectedSize] of tests) { + test(() => { + item.style.minHeight = item.style.minWidth = minSize; + let cs = getComputedStyle(item); + assert_equals(cs.height, expectedSize, "height"); + assert_equals(cs.width, expectedSize, "width"); + }, `Minimum size: ${minSize}`); +} +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-003.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + font: 25px/1 Ahem; + width: 100px; +} +.child { + margin: 50px; + color: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; +} +#item { + margin: 50%; + color: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child">X</div></div> +<div class="container grid"><div class="child" id="item">X</div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "auto"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-004.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 25px; + height: 25px; + margin: 50px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; +} +#item { + margin: 50%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "25px"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-005.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 25px; + height: 25px; + margin: 50px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; +} +#item { + margin: 50%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.margin = "100%"; + item.offsetLeft; + item.style.margin = "50%"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-006.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + min-width: 25px; + min-height: 25px; + margin: 50px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; +} +#item { + margin: 50%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.margin = "100%"; + item.offsetLeft; + item.style.margin = "50%"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-007.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + font: 25px/1 Ahem; + width: 100px; +} +.child { + margin: 0px 50px; + color: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; + grid-template-rows: 100px; +} +#item { + margin: 0px 50%; + color: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child">X</div></div> +<div class="container grid"><div class="child" id="item">X</div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "auto"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-008.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 25px; + height: 25px; + margin: 0px 50px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; + grid-template-rows: 100px; +} +#item { + margin: 0px 50%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "25px"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-009.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 25px; + height: 25px; + margin: 0px 50px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; + grid-template-rows: 100px; +} +#item { + margin: 0px 50%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.margin = "0px 100%"; + item.offsetLeft; + item.style.margin = "0px 50%"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-010.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + min-width: 25px; + min-height: 25px; + margin: 0px 50px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; + grid-template-rows: 100px; +} +#item { + margin: 0px 50%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.margin = "0px 100%"; + item.offsetLeft; + item.style.margin = "0px 50%"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-011.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + font: 25px/1 Ahem; + width: 100px; +} +.child { + margin: 50px 0px; + color: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; +} +#item { + margin: 50% 0px; + color: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child">X</div></div> +<div class="container grid"><div class="child" id="item">X</div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "auto"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-012.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 25px; + height: 25px; + margin: 50px 0px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; +} +#item { + margin: 50% 0px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "25px"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-013.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 25px; + height: 25px; + margin: 50px 0px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; +} +#item { + margin: 50% 0px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.margin = "100% 0px"; + item.offsetLeft; + item.style.margin = "50% 0px"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-014.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + min-width: 25px; + min-height: 25px; + margin: 50px 0px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: green; + height: 100px; +} +.grid { + background: none; + grid-template-columns: 100px; +} +#item { + margin: 50% 0px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.margin = "100% 0px"; + item.offsetLeft; + item.style.margin = "50% 0px"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-003.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + font: 80px/1 Ahem; + width: 100px; +} +.child { + padding: 10px; + color: red; +} +.ref { + position: absolute; + z-index: -1; + background: red; + height: 100px; +} +.grid { + background: green; +} +#item { + padding: 10%; + color: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child">X</div></div> +<div class="container grid"><div class="child" id="item">X</div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "auto"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-004.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 80px; + height: 80px; + padding: 10px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: none; + height: 100px; +} +.grid { + background: none; +} +#item { + padding: 10%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "80px"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-005.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 80px; + height: 80px; + padding: 10px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + height: 100px; +} +.grid { + background: none; +} +#item { + padding: 10%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.padding = "50%"; + item.offsetLeft; + item.style.padding = "10%"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-006.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + min-width: 80px; + min-height: 80px; + padding: 10px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + height: 100px; +} +.grid { + background: none; +} +#item { + padding: 10%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.padding = "50%"; + item.offsetLeft; + item.style.padding = "10%"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-007.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + font: 80px/1 Ahem; + width: 100px; +} +.child { + padding: 0px 10px; + color: red; +} +.ref { + position: absolute; + z-index: -1; + background: red; + height: 100px; +} +.grid { + background: green; + grid-template-rows: 100px; +} +#item { + padding: 0px 10%; + color: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child">X</div></div> +<div class="container grid"><div class="child" id="item">X</div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "auto"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-008.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 80px; + height: 100px; + padding: 0px 10px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: none; + height: 100px; +} +.grid { + background: none; + grid-template-rows: 100px; +} +#item { + padding: 0px 10%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "80px"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-009.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 80px; + height: 100px; + padding: 0px 10px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + height: 100px; + grid-template-rows: 100px; +} +.grid { + background: none; + grid-template-rows: 100px; +} +#item { + padding: 0px 10%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.padding = "0px 50%"; + item.offsetLeft; + item.style.padding = "0px 10%"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-010.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + min-width: 80px; + min-height: 100px; + padding: 0px 10px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + height: 100px; +} +.grid { + background: none; + grid-template-rows: 100px; +} +#item { + padding: 0px 10%; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.padding = "0px 50%"; + item.offsetLeft; + item.style.padding = "0px 10%"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-011.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + font: 80px/1 Ahem; + width: 100px; +} +.child { + padding: 10px 0px; + color: red; +} +.ref { + position: absolute; + z-index: -1; + background: red; + height: 100px; +} +.grid { + background: green; +} +#item { + padding: 10px 0px; + color: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child">X</div></div> +<div class="container grid"><div class="child" id="item">X</div></div> +<script> + item.offsetLeft; + item.style.width = "0px"; + item.offsetLeft; + item.style.width = "auto"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-012.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 100px; + height: 80px; + padding: 10px 0px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + background: none; + height: 100px; +} +.grid { + background: none; +} +#item { + padding: 10% 0px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.height = "0px"; + item.offsetLeft; + item.style.height = "80px"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-013.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + width: 100px; + height: 80px; + padding: 10px 0px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + height: 100px; +} +.grid { + background: none; +} +#item { + padding: 10% 0px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.padding = "50% 0px"; + item.offsetLeft; + item.style.padding = "10% 0px"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-014.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items with percentage paddings</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins"> +<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + width: 100px; +} +.child { + min-width: 100px; + min-height: 80px; + padding: 10px 0px; + background: red; +} +.ref { + position: absolute; + z-index: -1; + height: 100px; +} +.grid { + background: none; +} +#item { + padding: 10% 0px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container ref"><div class="child"></div></div> +<div class="container grid"><div class="child" id="item"></div></div> +<script> + item.offsetLeft; + item.style.padding = "50% 0px"; + item.offsetLeft; + item.style.padding = "10% 0px"; +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-area-shorthand.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: grid-area sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-area"> +<meta name="assert" content="grid-area supports the full grammar '<grid-line> [ / <grid-line> ]{0,3}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('grid-area', 'auto', { + 'grid-row-start': 'auto', + 'grid-column-start': 'auto', + 'grid-row-end': 'auto', + 'grid-column-end': 'auto' +}); + +// <custom-ident> +test_shorthand_value('grid-area', '--a', { + 'grid-row-start': '--a', + 'grid-column-start': '--a', + 'grid-row-end': '--a', + 'grid-column-end': '--a' +}); + +test_shorthand_value('grid-area', 'a / b', { + 'grid-row-start': 'a', + 'grid-column-start': 'b', + 'grid-row-end': 'a', + 'grid-column-end': 'b' +}); + +test_shorthand_value('grid-area', 'a / b / c', { + 'grid-row-start': 'a', + 'grid-column-start': 'b', + 'grid-row-end': 'c', + 'grid-column-end': 'b' +}); + +test_shorthand_value('grid-area', 'a / b / c / d', { + 'grid-row-start': 'a', + 'grid-column-start': 'b', + 'grid-row-end': 'c', + 'grid-column-end': 'd' +}); + +// <integer> && <custom-ident>? +// span && [ <integer> || <custom-ident> ] +test_shorthand_value('grid-area', '+90 -a- / 2 i span', { + 'grid-row-start': '90 -a-', + 'grid-column-start': 'span 2 i', + 'grid-row-end': 'auto', + 'grid-column-end': 'auto' +}); + +test_shorthand_value('grid-area', '1 / 2 / 3 / 4', { + 'grid-row-start': '1', + 'grid-column-start': '2', + 'grid-row-end': '3', + 'grid-column-end': '4' +}); + + +test_shorthand_value('grid-row', 'auto', { + 'grid-row-start': 'auto', + 'grid-row-end': 'auto' +}); + +test_shorthand_value('grid-row', 'one / 2', { + 'grid-row-start': 'one', + 'grid-row-end': '2' +}); + +test_shorthand_value('grid-row', '1 two / four 3', { + 'grid-row-start': '1 two', + 'grid-row-end': '3 four' +}); + + +test_shorthand_value('grid-column', '5 span', { + 'grid-column-start': 'span 5', + 'grid-column-end': 'auto' +}); + +test_shorthand_value('grid-column', '1 / two', { + 'grid-column-start': '1', + 'grid-column-end': 'two' +}); + +test_shorthand_value('grid-column', 'span 1 two / four 3 span', { + 'grid-column-start': 'span 1 two', + 'grid-column-end': 'span 3 four' +}); +</script> +</body> +</html>
--- a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-invalid.html +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-invalid.html @@ -27,12 +27,13 @@ test_invalid_value("grid-auto-columns", // fit-content( <length-percentage> ) test_invalid_value("grid-auto-columns", "fit-content(-1px)"); test_invalid_value("grid-auto-columns", "fit-content(1px, 2px)"); test_invalid_value("grid-auto-columns", "fit-content(1px auto)"); // <track-size>+ test_invalid_value("grid-auto-columns", "2em / 3em"); test_invalid_value("grid-auto-columns", "auto, 10%"); -test_invalid_value("grid-auto-rows", "1px [a] 1px"); +test_invalid_value("grid-auto-columns", "1px [a] 1px"); +test_invalid_value("grid-auto-columns", "[] 1px []"); </script> </body> </html>
--- a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-invalid.html +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-invalid.html @@ -27,11 +27,12 @@ test_invalid_value("grid-auto-rows", "mi test_invalid_value("grid-auto-rows", "fit-content(-1px)"); test_invalid_value("grid-auto-rows", "fit-content(1px, 2px)"); test_invalid_value("grid-auto-rows", "fit-content(1px auto)"); // <track-size>+ test_invalid_value("grid-auto-rows", "2em / 3em"); test_invalid_value("grid-auto-rows", "auto, 10%"); test_invalid_value("grid-auto-rows", "1px [a] 1px"); +test_invalid_value("grid-auto-rows", "[] 1px []"); </script> </body> </html>
--- a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-valid.html +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-valid.html @@ -42,30 +42,31 @@ test_valid_value("grid-template-columns" test_valid_value("grid-template-columns", 'fit-content(calc(30% + 40vw))'); // <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? ) // 'repeat(1, [] 10px)' in Blink // 'repeat(1, 10px)' in Firefox // '[] 10px' in Safari // '10px' in Edge 18 -test_valid_value("grid-template-columns", 'repeat(1, [] 10px)', ['repeat(1, 10px)', 'repeat(1, [] 10px)']); +test_valid_value("grid-template-columns", 'repeat(1, [] 10px [])', 'repeat(1, 10px)'); // 'repeat(1, [one two] 20%)' in Blink, Firefox // '[one two] 20%' in Safari, Edge 18 test_valid_value("grid-template-columns", 'repeat(1, [one two] 20%)'); // 'repeat(2, minmax(10px, auto))' in Blink, Firefox, Edge 18 // 'minmax(10px, auto) minmax(10px, auto)' in Safari test_valid_value("grid-template-columns", 'repeat(2, minmax(10px, auto))'); test_valid_value("grid-template-columns", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])'); // <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>? test_valid_value("grid-template-columns", 'min-content repeat(5, minmax(10px, auto))'); +test_valid_value("grid-template-columns", '[] 150px [] 1fr []', '150px 1fr'); // <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? ) test_valid_value("grid-template-columns", 'repeat(auto-fill, 10px)'); test_valid_value("grid-template-columns", 'repeat(auto-fit, [one] 20%)'); test_valid_value("grid-template-columns", 'repeat(auto-fill, minmax(30px, 5fr) [two])'); test_valid_value("grid-template-columns", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])'); // <auto-track-list> =
--- a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-valid.html +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-valid.html @@ -38,34 +38,31 @@ test_valid_value("grid-template-rows", ' test_valid_value("grid-template-rows", 'fit-content(10px)'); test_valid_value("grid-template-rows", 'fit-content(20%)'); test_valid_value("grid-template-rows", 'fit-content(calc(-0.5em + 10px))'); test_valid_value("grid-template-rows", 'fit-content(calc(0.5em + 10px))'); test_valid_value("grid-template-rows", 'fit-content(calc(30% + 40vw))'); // <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? ) -// 'repeat(1, [] 10px)' in Blink -// 'repeat(1, 10px)' in Firefox -// '[] 10px' in Safari -// '10px' in Edge 18 -test_valid_value("grid-template-rows", 'repeat(1, [] 10px)', ['repeat(1, 10px)', 'repeat(1, [] 10px)']); +test_valid_value("grid-template-rows", 'repeat(1, [] 10px [])', 'repeat(1, 10px)'); // 'repeat(1, [one two] 20%)' in Blink, Firefox // '[one two] 20%' in Safari, Edge 18 test_valid_value("grid-template-rows", 'repeat(1, [one two] 20%)'); // 'repeat(2, minmax(10px, auto))' in Blink, Firefox, Edge 18 // 'minmax(10px, auto) minmax(10px, auto)' in Safari test_valid_value("grid-template-rows", 'repeat(2, minmax(10px, auto))'); test_valid_value("grid-template-rows", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])'); // <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>? test_valid_value("grid-template-rows", 'min-content repeat(5, minmax(10px, auto))'); +test_valid_value("grid-template-rows", '[] 150px [] 1fr []', '150px 1fr'); // <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? ) test_valid_value("grid-template-rows", 'repeat(auto-fill, 10px)'); test_valid_value("grid-template-rows", 'repeat(auto-fit, [one] 20%)'); test_valid_value("grid-template-rows", 'repeat(auto-fill, minmax(30px, 5fr) [two])'); test_valid_value("grid-template-rows", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])'); // <auto-track-list> =
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: grid-template sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template"> +<meta name="assert" content="grid-template supports the full grammar 'none | [ <grid-template-rows> / <grid-template-columns> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('grid-template', 'none', { + 'grid-template-rows': 'none', + 'grid-template-columns': 'none', + 'grid-template-areas': 'none' +}); + +// <grid-template-rows> / <grid-template-columns> +test_shorthand_value('grid-template', '10px / 20%', { + 'grid-template-rows': '10px', + 'grid-template-columns': '20%', + 'grid-template-areas': 'none' +}); + +test_shorthand_value('grid-template', 'fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))', { + 'grid-template-rows': 'fit-content(calc(-0.5em + 10px))', + 'grid-template-columns': 'fit-content(calc(0.5em + 10px))', + 'grid-template-areas': 'none' +}); + +// [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]? +test_shorthand_value('grid-template', + '[header-top] "a a a" [header-bottom]' + + ' [main-top] "b b b" 1fr [main-bottom]' + + ' / auto 1fr auto', { + 'grid-template-rows': '[header-top] auto [header-bottom main-top] 1fr [main-bottom]', + 'grid-template-columns': 'auto 1fr auto', + 'grid-template-areas': '"a a a" "b b b"' +}); + +test_shorthand_value('grid-template', + ' "a a a"' + + ' "b b b" 1fr' + + '/ auto 1fr auto', { + 'grid-template-rows': 'auto 1fr', + 'grid-template-columns': 'auto 1fr auto', + 'grid-template-areas': '"a a a" "b b b"' +}); + +test_shorthand_value('grid-template', + ' [] "a a a" []' + + ' [] "b b b" 1fr []' + + ' / [] auto 1fr [] auto []', { + 'grid-template-rows': 'auto 1fr', + 'grid-template-columns': 'auto 1fr auto', + 'grid-template-areas': '"a a a" "b b b"' +}); +</script> +</body> +</html>
--- a/testing/web-platform/tests/css/css-scroll-snap/scroll-margin.html +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-margin.html @@ -53,21 +53,38 @@ test(() => { scroller.scrollTo(0, 0); assert_equals(scroller.scrollLeft, 200); assert_equals(scroller.scrollTop, 200); }, "Snaps to the positions adjusted by scroll-margin"); test(() => { target.style.left = "0px"; target.style.top = "0px"; + target.style.scrollSnapAlign = "start"; - target.style.scrollSnapAlign = "start"; - target.style.scrollMargin = "100px"; + // Since the target is at (0px, 0px) in the scroll port, the added margin + // should not be considered, and the snap points for this snap area should be + // the closest points in the scroll port (i.e x=0 or y=0). + target.style.scrollMargin = "200px"; - // Scroll to the position between #target and #another-target elements but - // if the scroll-margin 100px contributed to the snap start-aligned snap - // position it will be farther than #another-target. - scroller.scrollTo(200, 200); + // Distance from target without margin: + // `scroll position (150px, 150px)` - `target position (0px, 0px)` + // = (150px, 150px) + // + // Distance from target with margin: + // `scroll position (150px, 150px)` - [`target position (0px, 0px)` - + // `target margin (200px, 200px)`] + // = (350px, 350px) + // + // Distance from other target: + // `other target position (400px, 400px)` - `scroll position (150px, 150px)` + // = (250px, 250px) + // + // Therefore if the "out-of-scrollport" scroll-margin contributes to the + // calculation, then the other target would be snapped to. However if the + // scroll-margin is not considered, then the (0px, 0px) target should be + // snapped to. + scroller.scrollTo(150, 150); assert_equals(scroller.scrollLeft, 0); assert_equals(scroller.scrollTop, 0); }, "scroll-margin doesn't contribute to the snap position of the element " + "if it's outside of the scroll port"); </script>
--- a/testing/web-platform/tests/css/css-transitions/AnimationEffect-getComputedTiming.tentative.html +++ b/testing/web-platform/tests/css/css-transitions/AnimationEffect-getComputedTiming.tentative.html @@ -157,20 +157,31 @@ test(t => { test(t => { const div = addDiv(t, { class: 'animated-div' }); div.style.transition = 'margin-left 10s'; getComputedStyle(div).marginLeft; div.style.marginLeft = '10px'; const effect = div.getAnimations()[0].effect; - assert_equals(effect.getComputedTiming().easing, 'linear', + assert_equals(effect.getComputedTiming().easing, 'ease', 'Initial value of easing'); }, 'easing of a new transition'); +test(t => { + const div = addDiv(t, { class: 'animated-div' }); + div.style.transition = 'margin-left 10s steps(4)'; + getComputedStyle(div).marginLeft; + div.style.marginLeft = '10px'; + + const effect = div.getAnimations()[0].effect; + assert_equals(effect.getComputedTiming().easing, 'steps(4)', + 'Initial value of easing'); +}, 'non-default easing of a new transition'); + // ------------------------------ // endTime // = max(start delay + active duration + end delay, 0) // -------------------- test(t => { const div = addDiv(t, { class: 'animated-div' });
--- a/testing/web-platform/tests/css/css-transitions/KeyframeEffect-getKeyframes.tentative.html +++ b/testing/web-platform/tests/css/css-transitions/KeyframeEffect-getKeyframes.tentative.html @@ -40,17 +40,17 @@ test(t => { const frames = getKeyframes(div); assert_equals(frames.length, 2, 'number of frames'); const expected = [ { offset: 0, computedOffset: 0, - easing: 'ease', + easing: 'linear', composite: 'auto', left: '0px', }, { offset: 1, computedOffset: 1, easing: 'linear', composite: 'auto', @@ -75,51 +75,50 @@ test(t => { const frames = getKeyframes(div); assert_equals(frames.length, 2, 'number of frames'); const expected = [ { offset: 0, computedOffset: 0, - easing: 'steps(2)', + easing: 'linear', composite: 'auto', left: '0px', }, { offset: 1, computedOffset: 1, easing: 'linear', composite: 'auto', left: '100px', }, ]; for (let i = 0; i < frames.length; i++) { assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`); } -}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple' - + ' transition with a non-default easing function'); +}, 'KeyframeEffect.getKeyframes() returns frames unaffected by a non-default easing function'); test(t => { const div = addDiv(t); div.style.left = '0px'; getComputedStyle(div).transitionProperty; div.style.transition = 'left 100s'; div.style.left = 'var(--var-100px)'; const frames = getKeyframes(div); // CSS transition endpoints are based on the computed value so we // shouldn't see the variable reference const expected = [ { offset: 0, computedOffset: 0, - easing: 'ease', + easing: 'linear', composite: 'auto', left: '0px', }, { offset: 1, computedOffset: 1, easing: 'linear', composite: 'auto',
--- a/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-computed.html +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-computed.html @@ -8,26 +8,29 @@ <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/computed-testcommon.js"></script> </head> <body> <div id="target"></div> <script> test_computed_value("transition-timing-function", "linear"); +test_computed_value("transition-timing-function", "", "ease"); +test_computed_value("transition-timing-function", "initial", "ease"); test_computed_value("transition-timing-function", "ease"); test_computed_value("transition-timing-function", "ease-in"); test_computed_value("transition-timing-function", "ease-out"); test_computed_value("transition-timing-function", "ease-in-out"); test_computed_value("transition-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0.9)"); test_computed_value("transition-timing-function", "cubic-bezier(0, -2, 1, 3)"); test_computed_value("transition-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)"); - +test_computed_value("transition-timing-function", "step-start", "steps(1, start)"); +test_computed_value("transition-timing-function", "step-end", "steps(1)"); test_computed_value("transition-timing-function", "steps(4, start)"); test_computed_value("transition-timing-function", "steps(2, end)", "steps(2)"); test_computed_value("transition-timing-function", "steps(2, jump-start)"); test_computed_value("transition-timing-function", "steps(2, jump-end)", "steps(2)"); test_computed_value("transition-timing-function", "steps(2, jump-both)"); test_computed_value("transition-timing-function", "steps(2, jump-none)"); test_computed_value("transition-timing-function", "linear, ease, linear");
--- a/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-invalid.html +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-invalid.html @@ -9,19 +9,30 @@ <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> </head> <body> <script> test_invalid_value("transition-timing-function", "auto"); test_invalid_value("transition-timing-function", "ease-in ease-out"); + +test_invalid_value("transition-timing-function", "cubic-bezier(foobar)"); test_invalid_value("transition-timing-function", "cubic-bezier(1, 2, 3)"); test_invalid_value("transition-timing-function", "cubic-bezier(1, 2, 3, infinite)"); test_invalid_value("transition-timing-function", "cubic-bezier(1, 2, 3, 4, 5)"); test_invalid_value("transition-timing-function", "cubic-bezier(-0.1, 0.1, 0.5, 0.9)"); test_invalid_value("transition-timing-function", "cubic-bezier(0.5, 0.1, 1.1, 0.9)"); +test_invalid_value("transition-timing-function", "steps(foobar)"); +test_invalid_value("transition-timing-function", "steps(3.3, end)"); +test_invalid_value("transition-timing-function", "steps(3, top)"); +test_invalid_value("transition-timing-function", "steps(-3, top)"); +test_invalid_value("transition-timing-function", "steps(0, jump-start)"); +test_invalid_value("transition-timing-function", "steps(0, jump-end)"); +test_invalid_value("transition-timing-function", "steps(0, jump-both)"); +test_invalid_value("transition-timing-function", "steps(1, jump-none)"); + test_invalid_value("transition-timing-function", "initial, cubic-bezier(0, -2, 1, 3)"); test_invalid_value("transition-timing-function", "cubic-bezier(0, -2, 1, 3), initial"); </script> </body> </html>
--- a/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-valid.html +++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-valid.html @@ -17,16 +17,19 @@ test_valid_value("transition-timing-func test_valid_value("transition-timing-function", "ease"); test_valid_value("transition-timing-function", "ease-in"); test_valid_value("transition-timing-function", "ease-out"); test_valid_value("transition-timing-function", "ease-in-out"); test_valid_value("transition-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0.9)"); test_valid_value("transition-timing-function", "cubic-bezier(0, -2, 1, 3)"); test_valid_value("transition-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)"); +test_valid_value("transition-timing-function", "step-start", "steps(1, start)"); +test_valid_value("transition-timing-function", "step-end", "steps(1)"); +test_valid_value("transition-timing-function", "steps(4)"); test_valid_value("transition-timing-function", "steps(4, start)"); test_valid_value("transition-timing-function", "steps(2, end)", "steps(2)"); test_valid_value("transition-timing-function", "steps(2, jump-start)"); test_valid_value("transition-timing-function", "steps(2, jump-end)", "steps(2)"); test_valid_value("transition-timing-function", "steps(2, jump-both)"); test_valid_value("transition-timing-function", "steps(2, jump-none)"); test_valid_value("transition-timing-function", "linear, ease, linear");
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-delay-000-manual.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transition Test: transition-delay - positive number</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property"> +<meta name="assert" content="The 'transition-delay' property set positive number to delay the execution of transition"> +<style> + #test { + background-color: blue; + height: 100px; + transition-delay: 3s; + transition-property: background-color; + width: 100px; + } +</style> +<body> + <p>Click the blue square below. Test passes if the <strong>color</strong> of square is changed to <strong>green</strong> immediately + when the number inside square is <strong>3</strong>.</p> + <div id="test">0</div> + <script> + var clicked = 0; + var div = document.getElementById("test"); + div.addEventListener("click", function(evt) { + if (clicked == 0) { + div.setAttribute("style", "background-color: green;"); + setInterval(function() { + clicked++; + div.innerHTML = clicked; + }, 1000); + } + }, false); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-delay-000.html +++ /dev/null @@ -1,35 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transition Test: transition-delay - positive number</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property"> -<meta name="flags" content="interact"> -<meta name="assert" content="The 'transition-delay' property set positive number to delay the execution of transition"> -<style> - #test { - background-color: blue; - height: 100px; - transition-delay: 3s; - transition-property: background-color; - width: 100px; - } -</style> -<body> - <p>Click the blue square below. Test passes if the <strong>color</strong> of square is changed to <strong>green</strong> immediately - when the number inside square is <strong>3</strong>.</p> - <div id="test">0</div> - <script> - var clicked = 0; - var div = document.getElementById("test"); - div.addEventListener("click", function(evt) { - if (clicked == 0) { - div.setAttribute("style", "background-color: green;"); - setInterval(function() { - clicked++; - div.innerHTML = clicked; - }, 1000); - } - }, false); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-delay-002-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transition Test: transition-delay - 0s</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property"> +<meta name="assert" content="Test checks that the 'transition-delay' property set 0 will not delay the execution of transition"> +<style> + div { + height: 100px; + transition-property: background-color; + width: 100px; + } + #ref { + background-color: gray; + transition-delay: 3s; + } + #test { + background-color: blue; + transition-delay: 0s; + } +</style> +<body> + <p>Click the blue square below. Test passes if the <strong>color</strong> of blue and gray squares is all changed to <strong>green</strong> immediately + when the number inside blue square is 3.</p> + <div id="ref"></div> + <div id="test">0</div> + <script> + var clicked = 0; + var ref = document.getElementById("ref"); + var test = document.getElementById("test"); + test.addEventListener("click", function(evt) { + if (clicked == 0) { + ref.setAttribute("style", "background-color: green;"); + setInterval(function() { + if (clicked == 2) { + test.setAttribute("style", "background-color: green;"); + } + clicked++; + test.innerHTML = clicked; + }, 1000); + } + }, false); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-delay-002.html +++ /dev/null @@ -1,46 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transition Test: transition-delay - 0s</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'transition-delay' property set 0 will not delay the execution of transition"> -<style> - div { - height: 100px; - transition-property: background-color; - width: 100px; - } - #ref { - background-color: gray; - transition-delay: 3s; - } - #test { - background-color: blue; - transition-delay: 0s; - } -</style> -<body> - <p>Click the blue square below. Test passes if the <strong>color</strong> of blue and gray squares is all changed to <strong>green</strong> immediately - when the number inside blue square is 3.</p> - <div id="ref"></div> - <div id="test">0</div> - <script> - var clicked = 0; - var ref = document.getElementById("ref"); - var test = document.getElementById("test"); - test.addEventListener("click", function(evt) { - if (clicked == 0) { - ref.setAttribute("style", "background-color: green;"); - setInterval(function() {console.log(clicked); - if (clicked == 2) { - test.setAttribute("style", "background-color: green;"); - } - clicked++; - test.innerHTML = clicked; - }, 1000); - } - }, false); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-delay-003-manual.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transition Test: transition-delay - negative number</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property"> +<meta name="assert" content="Test checks that the 'transition-delay' property set negative number will not delay the execution of transition"> +<style> + div { + height: 100px; + transition-property: background-color; + width: 100px; + } + #ref { + background-color: gray; + transition-delay: 3s; + } + #test { + background-color: blue; + transition-delay: -3s; + } +</style> +<body> + <p>Click the blue square below. Test passes if the <strong>color</strong> of blue and gray squares is all changed to <strong>green</strong> immediately + when the number inside blue square is 3.</p> + <div id="ref"></div> + <div id="test">0</div> + <script> + var clicked = 0; + var ref = document.getElementById("ref"); + var test = document.getElementById("test"); + test.addEventListener("click", function(evt) { + if (clicked == 0) { + ref.setAttribute("style", "background-color: green;"); + setInterval(function() { + if (clicked == 2) { + test.setAttribute("style", "background-color: green;"); + } + clicked++; + test.innerHTML = clicked; + }, 1000); + } + }, false); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-delay-003.html +++ /dev/null @@ -1,46 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transition Test: transition-delay - negative number</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'transition-delay' property set negative number will not delay the execution of transition"> -<style> - div { - height: 100px; - transition-property: background-color; - width: 100px; - } - #ref { - background-color: gray; - transition-delay: 3s; - } - #test { - background-color: blue; - transition-delay: -3s; - } -</style> -<body> - <p>Click the blue square below. Test passes if the <strong>color</strong> of blue and gray squares is all changed to <strong>green</strong> immediately - when the number inside blue square is 3.</p> - <div id="ref"></div> - <div id="test">0</div> - <script> - var clicked = 0; - var ref = document.getElementById("ref"); - var test = document.getElementById("test"); - test.addEventListener("click", function(evt) { - if (clicked == 0) { - ref.setAttribute("style", "background-color: green;"); - setInterval(function() {console.log(clicked); - if (clicked == 2) { - test.setAttribute("style", "background-color: green;"); - } - clicked++; - test.innerHTML = clicked; - }, 1000); - } - }, false); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-duration-002-manual.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-duration - positive number</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property"> +<meta name="assert" content="The 'transition-duration' property set positive number specifies the time that transition from the old value to the new value should take."> +<style> + div { + background-color: yellow; + height: 100px; + transition-duration: 2s; + transition-property: width; + transition-timing-function: linear; + width: 100px; + } +</style> +<body> + <p>Click the yellow square below. Test passes if the width of square stops growing when the number inside square is '2'.</p> + <div>0</div> + <script> + (function() { + var div = document.querySelector("div"); + div.addEventListener("click", function(evt) { + div.setAttribute("style", "width: 200px;"); + setInterval(function() { + var timer = parseInt(div.textContent, 10); + timer++; + div.textContent = timer; + }, 1000); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-duration-002.html +++ /dev/null @@ -1,35 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-duration - positive number</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property"> -<meta name="flags" content="interact"> -<meta name="assert" content="The 'transition-duration' property set positive number specifies the time that transition from the old value to the new value should take."> -<style> - div { - background-color: yellow; - height: 100px; - transition-duration: 2s; - transition-property: width; - transition-timing-function: linear; - width: 100px; - } -</style> -<body> - <p>Click the yellow square below. Test passes if the width of square stops growing when the number inside square is '2'.</p> - <div>0</div> - <script> - (function() { - var div = document.querySelector("div"); - div.addEventListener("click", function(evt) { - div.setAttribute("style", "width: 200px;"); - setInterval(function() { - var timer = parseInt(div.textContent, 10); - timer++; - div.textContent = timer; - }, 1000); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-duration-003-manual.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-duration - 0s(initial value)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property"> +<meta name="assert" content="Test checks that the initial value of 'transition-duration' property is '0s' which means the transition is immediate."> +<style> + div { + height: 100px; + transition-property: width; + transition-timing-function: linear; + width: 100px; + } + #ref1 { + background-color: yellow; + transition-duration: 2s; + } + #ref2 { + background-color: gray; + transition-duration: 0s; + } + #test { + background-color: blue; + } +</style> +<body> + <p>Click the 'Start' button below. Test passes if the width of yellow square grows smoothly but the gray and blue grow immediately.</p> + <div id="ref1"></div> + <div id="ref2"></div> + <div id="test"></div> + <button>Start</button> + <script> + (function() { + var button = document.querySelector("button"), + test = document.querySelector("#test"), + ref1 = document.querySelector("#ref1"), + ref2 = document.querySelector("#ref2") + button.addEventListener("click", function(evt) { + test.setAttribute("style", "width: 300px;"); + ref1.setAttribute("style", "width: 300px;"); + ref2.setAttribute("style", "width: 300px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-duration-003.html +++ /dev/null @@ -1,47 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-duration - 0s(initial value)</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the initial value of 'transition-duration' property is '0s' which means the transition is immediate."> -<style> - div { - height: 100px; - transition-property: width; - transition-timing-function: linear; - width: 100px; - } - #ref1 { - background-color: yellow; - transition-duration: 2s; - } - #ref2 { - background-color: gray; - transition-duration: 0s; - } - #test { - background-color: blue; - } -</style> -<body> - <p>Click the 'Start' button below. Test passes if the width of yellow square grows smoothly but the gray and blue grow immediately.</p> - <div id="ref1"></div> - <div id="ref2"></div> - <div id="test"></div> - <button>Start</button> - <script> - (function() { - var button = document.querySelector("button"), - test = document.querySelector("#test"), - ref1 = document.querySelector("#ref1"), - ref2 = document.querySelector("#ref2") - button.addEventListener("click", function(evt) { - test.setAttribute("style", "width: 300px;"); - ref1.setAttribute("style", "width: 300px;"); - ref2.setAttribute("style", "width: 300px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-duration-004-manual.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-duration - negative number</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property"> +<meta name="assert" content="A negative value for 'transition-duration renders the declaration invalid which means the transition is immediate."> +<style> + div { + height: 100px; + transition-property: width; + transition-timing-function: linear; + width: 100px; + } + #ref { + background-color: yellow; + transition-duration: 2s; + } + #test { + background-color: blue; + transition-duration: -2s; + } +</style> +<body> + <p>Click the 'Start' button below. Test passes if the width of yellow square grows smoothly but the blue grows immediately.</p> + <div id="ref"></div> + <div id="test"></div> + <button>Start</button> + <script> + (function() { + var button = document.querySelector("button"), + test = document.querySelector("#test"), + ref = document.querySelector("#ref"); + button.addEventListener("click", function(evt) { + test.setAttribute("style", "width: 200px;"); + ref.setAttribute("style", "width: 200px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-duration-004.html +++ /dev/null @@ -1,41 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-duration - negative number</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property"> -<meta name="flags" content="interact"> -<meta name="assert" content="A negative value for 'transition-duration renders the declaration invalid which means the transition is immediate."> -<style> - div { - height: 100px; - transition-property: width; - transition-timing-function: linear; - width: 100px; - } - #ref { - background-color: yellow; - transition-duration: 2s; - } - #test { - background-color: blue; - transition-duration: -2s; - } -</style> -<body> - <p>Click the 'Start' button below. Test passes if the width of yellow square grows smoothly but the blue grows immediately.</p> - <div id="ref"></div> - <div id="test"></div> - <button>Start</button> - <script> - (function() { - var button = document.querySelector("button"), - test = document.querySelector("#test"), - ref = document.querySelector("#ref"); - button.addEventListener("click", function(evt) { - test.setAttribute("style", "width: 200px;"); - ref.setAttribute("style", "width: 200px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-003-manual.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - none</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property"> +<meta name="assert" content="The 'transition-duration' property set 'none' means that no property will be transitioned."> +<style> + div { + height: 100px; + transition-timing-function: linear; + width: 100px; + } + #ref { + background-color: yellow; + transition-duration: 2s; + transition-property: width; + } + #test { + background-color: blue; + transition-property: none; + } +</style> +<body> + <p>Click the 'Start' button below. Test passes if the width of yellow square grows smoothly but the blue grows immediately.</p> + <div id="ref"></div> + <div id="test"></div> + <button>Start</button> + <script> + (function() { + var button = document.querySelector("button"), + test = document.querySelector("#test"), + ref = document.querySelector("#ref"); + button.addEventListener("click", function(evt) { + test.setAttribute("style", "width: 200px;"); + ref.setAttribute("style", "width: 200px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-003.html +++ /dev/null @@ -1,41 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - none</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property"> -<meta name="flags" content="interact"> -<meta name="assert" content="The 'transition-duration' property set 'none' means that no property will be transitioned."> -<style> - div { - height: 100px; - transition-timing-function: linear; - width: 100px; - } - #ref { - background-color: yellow; - transition-duration: 2s; - transition-property: width; - } - #test { - background-color: blue; - transition-property: none; - } -</style> -<body> - <p>Click the 'Start' button below. Test passes if the width of yellow square grows smoothly but the blue grows immediately.</p> - <div id="ref"></div> - <div id="test"></div> - <button>Start</button> - <script> - (function() { - var button = document.querySelector("button"), - test = document.querySelector("#test"), - ref = document.querySelector("#ref"); - button.addEventListener("click", function(evt) { - test.setAttribute("style", "width: 200px;"); - ref.setAttribute("style", "width: 200px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-004-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - all</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property"> +<meta name="assert" content="The 'transition-duration' property set 'all' means that all properties are transitioned."> +<style> + #test { + background-color: blue; + height: 100px; + transition-duration: 2s; + transition-property: all; + transition-timing-function: linear; + width: 100px; + } +</style> +<body> + <p>Click the blue square below. Test passes if both height and width of blue square grow smoothly.</p> + <div id="test"></div> + <script> + (function() { + var div = document.querySelector("#test"); + div.addEventListener("click", function(evt) { + div.setAttribute("style", "height: 200px; width: 200px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-004.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - all</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property"> -<meta name="flags" content="interact"> -<meta name="assert" content="The 'transition-duration' property set 'all' means that all properties are transitioned."> -<style> - #test { - background-color: blue; - height: 100px; - transition-duration: 2s; - transition-property: all; - transition-timing-function: linear; - width: 100px; - } -</style> -<body> - <p>Click the blue square below. Test passes if both height and width of blue square grow smoothly.</p> - <div id="test"></div> - <script> - (function() { - var div = document.querySelector("#test"); - div.addEventListener("click", function(evt) { - div.setAttribute("style", "height: 200px; width: 200px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-005-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - height width(more than one properties specified)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property"> +<meta name="assert" content="The 'transition-duration' property set more than one properties like 'height, width' +means only the specified properties will be transitioned."> +<style> + #test { + background-color: red; + height: 100px; + transition-duration: 2s; + transition-property: height, width; + transition-timing-function: linear; + width: 100px; + } +</style> +<body> + <p>Click the red square below. Test passes if both height and width of square grow smoothly but the color changed to green immediately.</p> + <div id="test"></div> + <script> + (function() { + var div = document.querySelector("#test"); + div.addEventListener("click", function(evt) { + div.setAttribute("style", "background-color: green; height: 200px; width: 200px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-005.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - height width(more than one properties specified)</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property"> -<meta name="flags" content="interact"> -<meta name="assert" content="The 'transition-duration' property set more than one properties like 'height, width' -means only the specified properties will be transitioned."> -<style> - #test { - background-color: red; - height: 100px; - transition-duration: 2s; - transition-property: height, width; - transition-timing-function: linear; - width: 100px; - } -</style> -<body> - <p>Click the red square below. Test passes if both height and width of square grow smoothly but the color changed to green immediately.</p> - <div id="test"></div> - <script> - (function() { - var div = document.querySelector("#test"); - div.addEventListener("click", function(evt) { - div.setAttribute("style", "background-color: green; height: 200px; width: 200px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-006-manual.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - background-position</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'background-position' property is animatable."> +<style> + #test { + border: 1px solid; + background-image: url("support/cat.png"); + background-position: left; + background-repeat: no-repeat; + height: 200px; + transition-duration: 8s; + transition-property: background-position; + transition-timing-function: linear; + } +</style> +<body> + <p>Click the image inside of box below. Test passes if the image moves gradually but not immediately from left to right until it stops.</p> + <div id="test"></div> + <script> + (function() { + var div = document.querySelector("#test"); + div.addEventListener("click", function(evt) { + div.setAttribute("style", "background-position: right;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-006.html +++ /dev/null @@ -1,32 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - background-position</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'background-position' property is animatable."> -<style> - #test { - border: 1px solid; - background-image: url("support/cat.png"); - background-position: left; - background-repeat: no-repeat; - height: 200px; - transition-duration: 8s; - transition-property: background-position; - transition-timing-function: linear; - } -</style> -<body> - <p>Click the image inside of box below. Test passes if the image moves gradually but not immediately from left to right until it stops.</p> - <div id="test"></div> - <script> - (function() { - var div = document.querySelector("#test"); - div.addEventListener("click", function(evt) { - div.setAttribute("style", "background-position: right;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-007-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - border-bottom-color</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'border-bottom-color' property animatable."> +<style> + #test { + border: 10px solid red; + height: 90px; + transition-duration: 2s; + transition-property: border-bottom-color; + transition-timing-function: linear; + width: 90px; + } +</style> +<body> + <p>Click the square with red border below. Test passes if the color of bottom border transforms to green gradually not immediately.</p> + <div id="test"></div> + <script> + (function() { + var div = document.querySelector("#test"); + div.addEventListener("click", function(evt) { + div.setAttribute("style", "border-bottom-color: green;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-007.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - border-bottom-color</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'border-bottom-color' property animatable."> -<style> - #test { - border: 10px solid red; - height: 90px; - transition-duration: 2s; - transition-property: border-bottom-color; - transition-timing-function: linear; - width: 90px; - } -</style> -<body> - <p>Click the square with red border below. Test passes if the color of bottom border transforms to green gradually not immediately.</p> - <div id="test"></div> - <script> - (function() { - var div = document.querySelector("#test"); - div.addEventListener("click", function(evt) { - div.setAttribute("style", "border-bottom-color: green;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-008-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - border-bottom-width</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'border-bottom-width' property animatable."> +<style> + #test { + border: 5px solid blue; + height: 90px; + transition-duration: 2s; + transition-property: border-bottom-width; + transition-timing-function: linear; + width: 90px; + } +</style> +<body> + <p>Click the square with blue border below. Test passes if the height of bottom border grows gradually not immediately until it stops.</p> + <div id="test"></div> + <script> + (function() { + var div = document.querySelector("#test"); + div.addEventListener("click", function(evt) { + div.setAttribute("style", "border-bottom-width: 20px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-008.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - border-bottom-width</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'border-bottom-width' property animatable."> -<style> - #test { - border: 5px solid blue; - height: 90px; - transition-duration: 2s; - transition-property: border-bottom-width; - transition-timing-function: linear; - width: 90px; - } -</style> -<body> - <p>Click the square with blue border below. Test passes if the height of bottom border grows gradually not immediately until it stops.</p> - <div id="test"></div> - <script> - (function() { - var div = document.querySelector("#test"); - div.addEventListener("click", function(evt) { - div.setAttribute("style", "border-bottom-width: 20px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-009-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - border-left-color</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'border-left-color' property is animatable."> +<style> + #test { + border: 10px solid red; + height: 90px; + transition-duration: 2s; + transition-property: border-left-color; + transition-timing-function: linear; + width: 90px; + } +</style> +<body> + <p>Click the square with red border below. Test passes if the color of left border transforms to green gradually not immediately.</p> + <div id="test"></div> + <script> + (function() { + var div = document.querySelector("#test"); + div.addEventListener("click", function(evt) { + div.setAttribute("style", "border-left-color: green;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-009.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - border-left-color</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'border-left-color' property is animatable."> -<style> - #test { - border: 10px solid red; - height: 90px; - transition-duration: 2s; - transition-property: border-left-color; - transition-timing-function: linear; - width: 90px; - } -</style> -<body> - <p>Click the square with red border below. Test passes if the color of left border transforms to green gradually not immediately.</p> - <div id="test"></div> - <script> - (function() { - var div = document.querySelector("#test"); - div.addEventListener("click", function(evt) { - div.setAttribute("style", "border-left-color: green;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-010-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - border-left-width</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'border-left-width' property is animatable."> +<style> + #test { + border: 5px solid blue; + height: 90px; + transition-duration: 2s; + transition-property: border-left-width; + transition-timing-function: linear; + width: 90px; + } +</style> +<body> + <p>Click the square with blue border below. Test passes if the width of left border grows gradually not immediately until it stops.</p> + <div id="test"></div> + <script> + (function() { + var div = document.querySelector("#test"); + div.addEventListener("click", function(evt) { + div.setAttribute("style", "border-left-width: 20px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-010.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - border-left-width</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'border-left-width' property is animatable."> -<style> - #test { - border: 5px solid blue; - height: 90px; - transition-duration: 2s; - transition-property: border-left-width; - transition-timing-function: linear; - width: 90px; - } -</style> -<body> - <p>Click the square with blue border below. Test passes if the width of left border grows gradually not immediately until it stops.</p> - <div id="test"></div> - <script> - (function() { - var div = document.querySelector("#test"); - div.addEventListener("click", function(evt) { - div.setAttribute("style", "border-left-width: 20px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-011-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - border-right-color</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'border-right-color' property is animatable."> +<style> + #test { + border: 10px solid red; + height: 90px; + transition-duration: 2s; + transition-property: border-right-color; + transition-timing-function: linear; + width: 90px; + } +</style> +<body> + <p>Click the square with red border below. Test passes if the color of right border transforms to green gradually not immediately.</p> + <div id="test"></div> + <script> + (function() { + var div = document.querySelector("#test"); + div.addEventListener("click", function(evt) { + div.setAttribute("style", "border-right-color: green;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-011.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - border-right-color</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'border-right-color' property is animatable."> -<style> - #test { - border: 10px solid red; - height: 90px; - transition-duration: 2s; - transition-property: border-right-color; - transition-timing-function: linear; - width: 90px; - } -</style> -<body> - <p>Click the square with red border below. Test passes if the color of right border transforms to green gradually not immediately.</p> - <div id="test"></div> - <script> - (function() { - var div = document.querySelector("#test"); - div.addEventListener("click", function(evt) { - div.setAttribute("style", "border-right-color: green;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-012-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - border-right-width</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'border-right-width' property is animatable."> +<style> + #test { + border: 5px solid blue; + height: 90px; + transition-duration: 2s; + transition-property: border-right-width; + transition-timing-function: linear; + width: 90px; + } +</style> +<body> + <p>Click the square with blue border below. Test passes if the width of right border grows gradually not immediately until it stops.</p> + <div id="test"></div> + <script> + (function() { + var div = document.querySelector("#test"); + div.addEventListener("click", function(evt) { + div.setAttribute("style", "border-right-width: 20px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-012.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - border-right-width</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'border-right-width' property is animatable."> -<style> - #test { - border: 5px solid blue; - height: 90px; - transition-duration: 2s; - transition-property: border-right-width; - transition-timing-function: linear; - width: 90px; - } -</style> -<body> - <p>Click the square with blue border below. Test passes if the width of right border grows gradually not immediately until it stops.</p> - <div id="test"></div> - <script> - (function() { - var div = document.querySelector("#test"); - div.addEventListener("click", function(evt) { - div.setAttribute("style", "border-right-width: 20px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-013-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - border-top-color</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'border-top-color' property is animatable."> +<style> + #test { + border: 10px solid red; + height: 90px; + transition-duration: 2s; + transition-property: border-top-color; + transition-timing-function: linear; + width: 90px; + } +</style> +<body> + <p>Click the square with red border below. Test passes if the color of top border transforms to green gradually not immediately.</p> + <div id="test"></div> + <script> + (function() { + var div = document.querySelector("#test"); + div.addEventListener("click", function(evt) { + div.setAttribute("style", "border-top-color: green;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-013.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - border-top-color</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'border-top-color' property is animatable."> -<style> - #test { - border: 10px solid red; - height: 90px; - transition-duration: 2s; - transition-property: border-top-color; - transition-timing-function: linear; - width: 90px; - } -</style> -<body> - <p>Click the square with red border below. Test passes if the color of top border transforms to green gradually not immediately.</p> - <div id="test"></div> - <script> - (function() { - var div = document.querySelector("#test"); - div.addEventListener("click", function(evt) { - div.setAttribute("style", "border-top-color: green;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-014-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - border-top-width</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'border-top-width' property is animatable."> +<style> + #test { + border: 5px solid blue; + height: 90px; + transition-duration: 2s; + transition-property: border-top-width; + transition-timing-function: linear; + width: 90px; + } +</style> +<body> + <p>Click the square with blue border below. Test passes if the height of top border grows gradually not immediately until it stops.</p> + <div id="test"></div> + <script> + (function() { + var div = document.querySelector("#test"); + div.addEventListener("click", function(evt) { + div.setAttribute("style", "border-top-width: 20px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-014.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - border-top-width</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'border-top-width' property is animatable."> -<style> - #test { - border: 5px solid blue; - height: 90px; - transition-duration: 2s; - transition-property: border-top-width; - transition-timing-function: linear; - width: 90px; - } -</style> -<body> - <p>Click the square with blue border below. Test passes if the height of top border grows gradually not immediately until it stops.</p> - <div id="test"></div> - <script> - (function() { - var div = document.querySelector("#test"); - div.addEventListener("click", function(evt) { - div.setAttribute("style", "border-top-width: 20px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-015-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - border-spacing</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'border-spacing' property is animatable."> +<style> + #test { + border-spacing: 10px; + transition-duration: 2s; + transition-property: border-spacing; + transition-timing-function: linear; + } +</style> +<body> + <p>Click the 'FillerText' below. Test passes if the outermost border of 'FillerText' grows gradually not immediately until it stops.</p> + <table id="test" border="1"> + <tr><td>FillerText</td></tr> + </table> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "border-spacing: 40px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-015.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - border-spacing</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'border-spacing' property is animatable."> -<style> - #test { - border-spacing: 10px; - transition-duration: 2s; - transition-property: border-spacing; - transition-timing-function: linear; - } -</style> -<body> - <p>Click the 'FillerText' below. Test passes if the outermost border of 'FillerText' grows gradually not immediately until it stops.</p> - <table id="test" border="1"> - <tr><td>FillerText</td></tr> - </table> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "border-spacing: 40px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-016-manual.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - bottom</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'bottom' property is animatable."> +<style> + #test { + background-color: blue; + bottom: -100px; + height: 100px; + position: relative; + transition-duration: 2s; + transition-property: bottom; + transition-timing-function: linear; + width: 100px; + } +</style> +<body> + <p>Click the blue square below. Test passes if blue square moves up gradually not immediately until it stops.</p> + <div id="test"></div> + <script> + (function() { + var div = document.querySelector("#test"); + div.addEventListener("click", function(evt) { + div.setAttribute("style", "bottom: 10px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-016.html +++ /dev/null @@ -1,32 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - bottom</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'bottom' property is animatable."> -<style> - #test { - background-color: blue; - bottom: -100px; - height: 100px; - position: relative; - transition-duration: 2s; - transition-property: bottom; - transition-timing-function: linear; - width: 100px; - } -</style> -<body> - <p>Click the blue square below. Test passes if blue square moves up gradually not immediately until it stops.</p> - <div id="test"></div> - <script> - (function() { - var div = document.querySelector("#test"); - div.addEventListener("click", function(evt) { - div.setAttribute("style", "bottom: 10px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-017-manual.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - clip</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'clip' property is animatable."> +<style> + #test { + clip: rect(0px, 60px, 60px, 0px); + position: absolute; + transition-duration: 2s; + transition-property: clip; + transition-timing-function: linear; + } +</style> +<body> + <p>Click the image(half green and half red) below. Test passes if the half red condenses gradually not immediately until only half green left.</p> + <image id="test" src="support/60x60-gg-rr.png"></image> + <script> + (function() { + var image = document.querySelector("#test"); + image.addEventListener("click", function(evt) { + image.setAttribute("style", "clip: rect(0px, 60px, 30px, 0px);"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-017.html +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - clip</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'clip' property is animatable."> -<style> - #test { - clip: rect(0px, 60px, 60px, 0px); - position: absolute; - transition-duration: 2s; - transition-property: clip; - transition-timing-function: linear; - } -</style> -<body> - <p>Click the image(half green and half red) below. Test passes if the half red condenses gradually not immediately until only half green left.</p> - <image id="test" src="support/60x60-gg-rr.png"></image> - <script> - (function() { - var image = document.querySelector("#test"); - image.addEventListener("click", function(evt) { - image.setAttribute("style", "clip: rect(0px, 60px, 30px, 0px);"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-018-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - color</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'color' property is animatable."> +<style> + #test { + color: red; + transition-duration: 2s; + transition-property: color; + transition-timing-function: linear; + } +</style> +<body> + <p>Click the 'FillerText' whose color is red below. Test passes if the color transforms to green gradually not immediately.</p> + <div id="test"> + FillerTextFillerTextFillerTextFillerText + </div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "color: green;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-018.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - color</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'color' property is animatable."> -<style> - #test { - color: red; - transition-duration: 2s; - transition-property: color; - transition-timing-function: linear; - } -</style> -<body> - <p>Click the 'FillerText' whose color is red below. Test passes if the color transforms to green gradually not immediately.</p> - <div id="test"> - FillerTextFillerTextFillerTextFillerText - </div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "color: green;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-019-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - font-size</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'font-size' property is animatable."> +<style> + #test { + font-size: 20px; + transition-duration: 2s; + transition-property: font-size; + transition-timing-function: linear; + } +</style> +<body> + <p>Click the 'FillerText' below. Test passes if the size of 'FillerText' increases gradually not immediately until it stops.</p> + <div id="test"> + FillerTextFillerTextFillerTextFillerText + </div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "font-size: 40px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-019.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - font-size</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'font-size' property is animatable."> -<style> - #test { - font-size: 20px; - transition-duration: 2s; - transition-property: font-size; - transition-timing-function: linear; - } -</style> -<body> - <p>Click the 'FillerText' below. Test passes if the size of 'FillerText' increases gradually not immediately until it stops.</p> - <div id="test"> - FillerTextFillerTextFillerTextFillerText - </div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "font-size: 40px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-020-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - font-weight</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'font-weight' property is animatable."> +<style> + #test { + font-weight: 100; + transition-duration: 2s; + transition-property: font-weight; + transition-timing-function: linear; + } +</style> +<body> + <p>Click the 'FillerText' below. Test passes if the weight of 'FillerText' increases gradually not immediately until it stops.</p> + <div id="test"> + FillerTextFillerTextFillerTextFillerText + </div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "font-weight: 900;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-020.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - font-weight</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'font-weight' property is animatable."> -<style> - #test { - font-weight: 100; - transition-duration: 2s; - transition-property: font-weight; - transition-timing-function: linear; - } -</style> -<body> - <p>Click the 'FillerText' below. Test passes if the weight of 'FillerText' increases gradually not immediately until it stops.</p> - <div id="test"> - FillerTextFillerTextFillerTextFillerText - </div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "font-weight: 900;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-021-manual.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - left</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'left' property is animatable."> +<style> + #test { + background-color: blue; + height: 100px; + left: 10px; + position: relative; + transition-duration: 4s; + transition-property: left; + transition-timing-function: linear; + width: 100px; + } +</style> +<body> + <p>Click the blue square inside the box with black border below. Test passes if the blue square moves gradually not immediately from left to right until it stops.</p> + <div id="test"></div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "left: 400px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-021.html +++ /dev/null @@ -1,32 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - left</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'left' property is animatable."> -<style> - #test { - background-color: blue; - height: 100px; - left: 10px; - position: relative; - transition-duration: 4s; - transition-property: left; - transition-timing-function: linear; - width: 100px; - } -</style> -<body> - <p>Click the blue square inside the box with black border below. Test passes if the blue square moves gradually not immediately from left to right until it stops.</p> - <div id="test"></div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "left: 400px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-022-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - letter-spacing</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Test checks that the 'letter-spacing' property is animatable."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #test { + font-family: ahem; + letter-spacing: 0px; + transition-duration: 4s; + transition-property: letter-spacing; + transition-timing-function: linear; + } +</style> +<body> + <p>Click the black rectangle below. Test passes if the black rectangle splits into ten little squares and the spacing between little squares increases gradually not immediately until it stops.</p> + <div id="test">FillerText</div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "letter-spacing: 20px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-022.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - letter-spacing</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="ahem interact"> -<meta name="assert" content="Test checks that the 'letter-spacing' property is animatable."> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> -<style> - #test { - font-family: ahem; - letter-spacing: 0px; - transition-duration: 4s; - transition-property: letter-spacing; - transition-timing-function: linear; - } -</style> -<body> - <p>Click the black rectangle below. Test passes if the black rectangle splits into ten little squares and the spacing between little squares increases gradually not immediately until it stops.</p> - <div id="test">FillerText</div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "letter-spacing: 20px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-023-manual.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - line-height</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'line-height' property is animatable."> +<style> + #test { + line-height: 10px; + transition-duration: 4s; + transition-property: line-height; + transition-timing-function: linear; + } +</style> +<body> + <p>Click the 'FillerText' below. Test passes if the 'FillerText' moves down gradually not immediately until it stops.</p> + <div id="test">FillerTextFillerText</div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "line-height: 100px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-023.html +++ /dev/null @@ -1,28 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - line-height</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'line-height' property is animatable."> -<style> - #test { - line-height: 10px; - transition-duration: 4s; - transition-property: line-height; - transition-timing-function: linear; - } -</style> -<body> - <p>Click the 'FillerText' below. Test passes if the 'FillerText' moves down gradually not immediately until it stops.</p> - <div id="test">FillerTextFillerText</div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "line-height: 100px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-024-manual.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - margin-bottom</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'margin-bottom' property is animatable."> +<style> + #ref { + background-color: blue; + height: 100px; + width: 100px; + } + #test { + margin-bottom: 1px; + transition-duration: 4s; + transition-property: margin-bottom; + transition-timing-function: linear; + } +</style> +<body> + <p id="test">Click blue square below. Test passes if the blue square moves down gradually not immediately until it stops.</p> + <div id="ref"></div> + <script> + (function() { + var ref = document.querySelector("#ref"); + ref.addEventListener("click", function(evt) { + document.querySelector("#test").setAttribute("style", "margin-bottom: 100px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-024.html +++ /dev/null @@ -1,33 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - margin-bottom</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'margin-bottom' property is animatable."> -<style> - #ref { - background-color: blue; - height: 100px; - width: 100px; - } - #test { - margin-bottom: 1px; - transition-duration: 4s; - transition-property: margin-bottom; - transition-timing-function: linear; - } -</style> -<body> - <p id="test">Click blue square below. Test passes if the blue square moves down gradually not immediately until it stops.</p> - <div id="ref"></div> - <script> - (function() { - var ref = document.querySelector("#ref"); - ref.addEventListener("click", function(evt) { - document.querySelector("#test").setAttribute("style", "margin-bottom: 100px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-025-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - margin-left</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'margin-left' property is animatable."> +<style> + #test { + background-color: blue; + height: 100px; + margin-left: 1px; + transition-duration: 4s; + transition-property: margin-left; + transition-timing-function: linear; + width: 100px; + } +</style> +<body> + <p>Click the blue square below. Test passes if the blue square moves gradually not immediately from left to right until it stops.</p> + <div id="test"></div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "margin-left: 200px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-025.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - margin-left</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'margin-left' property is animatable."> -<style> - #test { - background-color: blue; - height: 100px; - margin-left: 1px; - transition-duration: 4s; - transition-property: margin-left; - transition-timing-function: linear; - width: 100px; - } -</style> -<body> - <p>Click the blue square below. Test passes if the blue square moves gradually not immediately from left to right until it stops.</p> - <div id="test"></div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "margin-left: 200px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-026-manual.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - margin-right</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'margin-right' property is animatable."> +<style> + div { + float: left; + } + #ref { + height: 100px; + margin-right: 1px; + transition-duration: 4s; + transition-property: margin-right; + transition-timing-function: linear; + width: 1px; + } + #test { + background-color: blue; + height: 100px; + width: 100px; + } +</style> +<body> + <p>Click the blue square below. Test passes if the blue square moves gradually not immediately from left to right until it stops.</p> + <div id="ref"></div> + <div id="test"></div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + document.querySelector("#ref").setAttribute("style", "margin-right: 200px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-026.html +++ /dev/null @@ -1,39 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - margin-right</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'margin-right' property is animatable."> -<style> - div { - float: left; - } - #ref { - height: 100px; - margin-right: 1px; - transition-duration: 4s; - transition-property: margin-right; - transition-timing-function: linear; - width: 1px; - } - #test { - background-color: blue; - height: 100px; - width: 100px; - } -</style> -<body> - <p>Click the blue square below. Test passes if the blue square moves gradually not immediately from left to right until it stops.</p> - <div id="ref"></div> - <div id="test"></div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - document.querySelector("#ref").setAttribute("style", "margin-right: 200px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-027-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - max-height</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'max-height' property is animatable."> +<style> + #test { + background-color: blue; + height: 200px; + max-height: 200px; + transition-duration: 4s; + transition-property: max-height; + transition-timing-function: linear; + width: 100px; + } +</style> +<body> + <p>Click the blue rectangle below. Test passes if the height of blue rectangle narrows gradually not immediately until it stops.</p> + <div id="test"></div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "max-height: 100px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-027.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - max-height</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'max-height' property is animatable."> -<style> - #test { - background-color: blue; - height: 200px; - max-height: 200px; - transition-duration: 4s; - transition-property: max-height; - transition-timing-function: linear; - width: 100px; - } -</style> -<body> - <p>Click the blue rectangle below. Test passes if the height of blue rectangle narrows gradually not immediately until it stops.</p> - <div id="test"></div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "max-height: 100px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-028-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - max-width</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'max-width' property is animatable."> +<style> + #test { + background-color: blue; + height: 100px; + max-width: 200px; + transition-duration: 4s; + transition-property: max-width; + transition-timing-function: linear; + width: 200px; + } +</style> +<body> + <p>Click the blue rectangle below. Test passes if the width of blue rectangle narrows gradually not immediately until it stops.</p> + <div id="test"></div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "max-width: 100px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-028.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - max-width</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'max-width' property is animatable."> -<style> - #test { - background-color: blue; - height: 100px; - max-width: 200px; - transition-duration: 4s; - transition-property: max-width; - transition-timing-function: linear; - width: 200px; - } -</style> -<body> - <p>Click the blue rectangle below. Test passes if the width of blue rectangle narrows gradually not immediately until it stops.</p> - <div id="test"></div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "max-width: 100px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-029-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - min-height</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'min-height' property is animatable."> +<style> + #test { + background-color: blue; + height: 50px; + min-height: 50px; + transition-duration: 4s; + transition-property: min-height; + transition-timing-function: linear; + width: 100px; + } +</style> +<body> + <p>Click the blue rectangle below. Test passes if the height of blue rectangle increases gradually not immediately until it stops.</p> + <div id="test"></div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "min-height: 100px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-029.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - min-height</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'min-height' property is animatable."> -<style> - #test { - background-color: blue; - height: 50px; - min-height: 50px; - transition-duration: 4s; - transition-property: min-height; - transition-timing-function: linear; - width: 100px; - } -</style> -<body> - <p>Click the blue rectangle below. Test passes if the height of blue rectangle increases gradually not immediately until it stops.</p> - <div id="test"></div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "min-height: 100px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-030-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - min-width</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'min-width' property is animatable."> +<style> + #test { + background-color: blue; + height: 100px; + min-width: 50px; + transition-duration: 4s; + transition-property: min-width; + transition-timing-function: linear; + width: 50px; + } +</style> +<body> + <p>Click the blue rectangle below. Test passes if the width of blue rectangle increases gradually not immediately until it stops.</p> + <div id="test"></div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "min-width: 100px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-030.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - min-width</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'min-width' property is animatable."> -<style> - #test { - background-color: blue; - height: 100px; - min-width: 50px; - transition-duration: 4s; - transition-property: min-width; - transition-timing-function: linear; - width: 50px; - } -</style> -<body> - <p>Click the blue rectangle below. Test passes if the width of blue rectangle increases gradually not immediately until it stops.</p> - <div id="test"></div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "min-width: 100px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-031-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - opacity</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'opacity' property is animatable."> +<style> + #test { + background-color: red; + height: 100px; + opacity: 1; + transition-duration: 2s; + transition-property: opacity; + transition-timing-function: linear; + width: 100px; + } +</style> +<body> + <p>Click the red square below. Test passes if the red square blurs gradually not immediately until it disappears.</p> + <div id="test"></div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "opacity: 0;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-031.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - opacity</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'opacity' property is animatable."> -<style> - #test { - background-color: red; - height: 100px; - opacity: 1; - transition-duration: 2s; - transition-property: opacity; - transition-timing-function: linear; - width: 100px; - } -</style> -<body> - <p>Click the red square below. Test passes if the red square blurs gradually not immediately until it disappears.</p> - <div id="test"></div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "opacity: 0;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-032-manual.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - outline-color</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'outline-color' property is animatable."> +<style> + #test { + height: 100px; + outline-style: solid; + outline-color: red; + outline-width: 4px; + transition-duration: 2s; + transition-property: outline-color; + transition-timing-function: linear; + width: 100px; + } +</style> +<body> + <p>Click the blank square with red border below. Test passes if the color of border transforms to green gradually not immediately.</p> + <div id="test"></div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "outline-color: green;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-032.html +++ /dev/null @@ -1,32 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - outline-color</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'outline-color' property is animatable."> -<style> - #test { - height: 100px; - outline-style: solid; - outline-color: red; - outline-width: 4px; - transition-duration: 2s; - transition-property: outline-color; - transition-timing-function: linear; - width: 100px; - } -</style> -<body> - <p>Click the blank square with red border below. Test passes if the color of border transforms to green gradually not immediately.</p> - <div id="test"></div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "outline-color: green;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-033-manual.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - outline-width</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'outline-width' property is animatable."> +<style> + #test { + height: 100px; + margin-left: 20px; + outline-style: solid; + outline-width: 2px; + transition-duration: 2s; + transition-property: outline-width; + transition-timing-function: linear; + width: 100px; + } +</style> +<body> + <p>Click the blank square with black border below. Test passes if the width of border increases gradually not immediately until it stops.</p> + <div id="test"></div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "outline-width: 10px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-033.html +++ /dev/null @@ -1,32 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - outline-width</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'outline-width' property is animatable."> -<style> - #test { - height: 100px; - margin-left: 20px; - outline-style: solid; - outline-width: 2px; - transition-duration: 2s; - transition-property: outline-width; - transition-timing-function: linear; - width: 100px; - } -</style> -<body> - <p>Click the blank square with black border below. Test passes if the width of border increases gradually not immediately until it stops.</p> - <div id="test"></div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "outline-width: 10px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-034-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - padding-bottom</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'padding-bottom' property is animatable."> +<style> + #test { + background-color: blue; + height: 100px; + padding-bottom: 0px; + transition-duration: 2s; + transition-property: padding-bottom; + transition-timing-function: linear; + width: 100px; + } +</style> +<body> + <p>Click the blue square below. Test passes if the height of blue square increases gradually not immediately until it stops.</p> + <div id="test"></div> + <script> + (function() { + var ref = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "padding-bottom: 100px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-034.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - padding-bottom</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'padding-bottom' property is animatable."> -<style> - #test { - background-color: blue; - height: 100px; - padding-bottom: 0px; - transition-duration: 2s; - transition-property: padding-bottom; - transition-timing-function: linear; - width: 100px; - } -</style> -<body> - <p>Click the blue square below. Test passes if the height of blue square increases gradually not immediately until it stops.</p> - <div id="test"></div> - <script> - (function() { - var ref = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "padding-bottom: 100px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-035-manual.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - padding-left</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'padding-left' property is animatable."> +<style> + #test { + padding-left: 1px; + transition-duration: 2s; + transition-property: padding-left; + transition-timing-function: linear; + } + #ref { + background-color: blue; + height: 100px; + width: 100px; + } +</style> +<body> + <p>Click the blue square below. Test passes if the blue square moves gradually not immediately form left to right until it stops.</p> + <div id="test"> + <div id="ref"></div> + </div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "padding-left: 200px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-035.html +++ /dev/null @@ -1,35 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - padding-left</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'padding-left' property is animatable."> -<style> - #test { - padding-left: 1px; - transition-duration: 2s; - transition-property: padding-left; - transition-timing-function: linear; - } - #ref { - background-color: blue; - height: 100px; - width: 100px; - } -</style> -<body> - <p>Click the blue square below. Test passes if the blue square moves gradually not immediately form left to right until it stops.</p> - <div id="test"> - <div id="ref"></div> - </div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "padding-left: 200px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-036-manual.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - padding-right</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'padding-right' property is animatable."> +<style> + #test { + padding-right: 0px; + transition-duration: 2s; + transition-property: padding-right; + transition-timing-function: linear; + } + #ref { + background-color: blue; + float: right; + height: 100px; + width: 100px; + } +</style> +<body> + <p>Click the blue square below. Test passes if the blue square moves gradually not immediately from right to left until it stops.</p> + <div id="test"> + <div id="ref"></div> + </div> + <script> + (function() { + var ref = document.querySelector("#ref"); + ref.addEventListener("click", function(evt) { + document.querySelector("#test").setAttribute("style", "padding-right: 200px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-036.html +++ /dev/null @@ -1,36 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - padding-right</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'padding-right' property is animatable."> -<style> - #test { - padding-right: 0px; - transition-duration: 2s; - transition-property: padding-right; - transition-timing-function: linear; - } - #ref { - background-color: blue; - float: right; - height: 100px; - width: 100px; - } -</style> -<body> - <p>Click the blue square below. Test passes if the blue square moves gradually not immediately from right to left until it stops.</p> - <div id="test"> - <div id="ref"></div> - </div> - <script> - (function() { - var ref = document.querySelector("#ref"); - ref.addEventListener("click", function(evt) { - document.querySelector("#test").setAttribute("style", "padding-right: 200px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-037-manual.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - padding-top</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'padding-top' property is animatable."> +<style> + #test { + padding-top: 1px; + transition-duration: 2s; + transition-property: padding-top; + transition-timing-function: linear; + } + #ref { + background-color: blue; + height: 100px; + width: 100px; + } +</style> +<body> + <p>Click the blue square below. Test passes if the blue square moves down gradually not immediately until it stops.</p> + <div id="test"> + <div id="ref"></div> + </div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "padding-top: 200px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-037.html +++ /dev/null @@ -1,35 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - padding-top</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'padding-top' property is animatable."> -<style> - #test { - padding-top: 1px; - transition-duration: 2s; - transition-property: padding-top; - transition-timing-function: linear; - } - #ref { - background-color: blue; - height: 100px; - width: 100px; - } -</style> -<body> - <p>Click the blue square below. Test passes if the blue square moves down gradually not immediately until it stops.</p> - <div id="test"> - <div id="ref"></div> - </div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "padding-top: 200px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-038-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - right</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'right' property is animatable."> +<style> + #test { + background-color: blue; + height: 100px; + position: relative; + transition-duration: 2s; + transition-property: right; + transition-timing-function: linear; + width: 100px; + } +</style> +<body> + <p>Click the blue square below. Test passes if the blue square moves gradually not immediately from left to right until it stops.</p> + <div id="test"></div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "right: -200px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-038.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - right</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'right' property is animatable."> -<style> - #test { - background-color: blue; - height: 100px; - position: relative; - transition-duration: 2s; - transition-property: right; - transition-timing-function: linear; - width: 100px; - } -</style> -<body> - <p>Click the blue square below. Test passes if the blue square moves gradually not immediately from left to right until it stops.</p> - <div id="test"></div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "right: -200px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-039-manual.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - text-indent</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'text-indent' property is animatable."> +<style> + #test { + transition-duration: 2s; + transition-property: text-indent; + transition-timing-function: linear; + } +</style> +<body> + <p>Click the 'FillerText' below. Test passes if the 'FillerText' moves gradually not immediately from left to right until it stops.</p> + <div id="test">FillerText</div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "text-indent: 200px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-039.html +++ /dev/null @@ -1,27 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - text-indent</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'text-indent' property is animatable."> -<style> - #test { - transition-duration: 2s; - transition-property: text-indent; - transition-timing-function: linear; - } -</style> -<body> - <p>Click the 'FillerText' below. Test passes if the 'FillerText' moves gradually not immediately from left to right until it stops.</p> - <div id="test">FillerText</div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "text-indent: 200px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-040-manual.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - text-shadow</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'text-shadow' property is animatable."> +<style> + #test { + transition-duration: 2s; + transition-property: text-shadow; + transition-timing-function: linear; + } +</style> +<body> + <p>Click the 'FillerText' that has no text shadow below. Test passes if the shadow of 'FillerText' appears gradually not immediately.</p> + <div id="test">FillerTextFillerText</div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "text-shadow: 4px 5px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-040.html +++ /dev/null @@ -1,27 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - text-shadow</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'text-shadow' property is animatable."> -<style> - #test { - transition-duration: 2s; - transition-property: text-shadow; - transition-timing-function: linear; - } -</style> -<body> - <p>Click the 'FillerText' that has no text shadow below. Test passes if the shadow of 'FillerText' appears gradually not immediately.</p> - <div id="test">FillerTextFillerText</div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "text-shadow: 4px 5px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-041-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - top</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'top' property is animatable."> +<style> + #test { + background-color: blue; + height: 100px; + position: relative; + transition-duration: 2s; + transition-property: top; + transition-timing-function: linear; + width: 100px; + } +</style> +<body> + <p>Click blue square below. Test passes if the blue square moves down gradually not immediately until it stops.</p> + <div id="test"></div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "top: 200px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-041.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - top</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'top' property is animatable."> -<style> - #test { - background-color: blue; - height: 100px; - position: relative; - transition-duration: 2s; - transition-property: top; - transition-timing-function: linear; - width: 100px; - } -</style> -<body> - <p>Click blue square below. Test passes if the blue square moves down gradually not immediately until it stops.</p> - <div id="test"></div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "top: 200px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-042-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - vertical-align</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'vertical-align' property is animatable."> +<style> + #test { + transition-duration: 2s; + transition-property: vertical-align; + transition-timing-function: linear; + vertical-align: top; + } +</style> +<body> + <p>Click the cat image below. Test passes if the 'FillerText' moves down to the bottom of the cat image gradually not immediately.</p> + <div id="test"> + FillerText<image id="ref" src="support/cat.png"></image> + </div> + <script> + (function() { + var ref = document.querySelector("#ref"); + ref.addEventListener("click", function(evt) { + document.querySelector("#test").setAttribute("style", "vertical-align: bottom;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-042.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - vertical-align</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'vertical-align' property is animatable."> -<style> - #test { - transition-duration: 2s; - transition-property: vertical-align; - transition-timing-function: linear; - vertical-align: top; - } -</style> -<body> - <p>Click the cat image below. Test passes if the 'FillerText' moves down to the bottom of the cat image gradually not immediately.</p> - <div id="test"> - FillerText<image id="ref" src="support/cat.png"></image> - </div> - <script> - (function() { - var ref = document.querySelector("#ref"); - ref.addEventListener("click", function(evt) { - document.querySelector("#test").setAttribute("style", "vertical-align: bottom;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-043-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - visibility</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="assert" content="Test checks that the 'visibility' property is animatable."> +<style> + #test { + background-color: blue; + height: 100px; + transition-duration: 2s; + transition-property: visibility; + transition-timing-function: linear; + visibility: display; + width: 100px; + } +</style> +<body> + <p>Click blue square below. Test passes if the blue square disappears gradually not immediately.</p> + <div id="test"></div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "visibility: hidden;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-043.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - visibility</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the 'visibility' property is animatable."> -<style> - #test { - background-color: blue; - height: 100px; - transition-duration: 2s; - transition-property: visibility; - transition-timing-function: linear; - visibility: display; - width: 100px; - } -</style> -<body> - <p>Click blue square below. Test passes if the blue square disappears gradually not immediately.</p> - <div id="test"></div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "visibility: hidden;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-044-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - word-spacing</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Test checks that the 'word-spacing' property is animatable."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #test { + font-family: ahem; + transition-duration: 2s; + transition-property: word-spacing; + transition-timing-function: linear; + } +</style> +<body> + <p>Click any black rectangle below. Test passes if the second rectangle moves gradually not immediately from left to right until it stops and the first one does not move.</p> + <div id="test">text text</div> + <script> + (function() { + var test = document.querySelector("#test"); + test.addEventListener("click", function(evt) { + test.setAttribute("style", "word-spacing: 40px;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-044.html +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - word-spacing</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="ahem interact"> -<meta name="assert" content="Test checks that the 'word-spacing' property is animatable."> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> -<style> - #test { - font-family: ahem; - transition-duration: 2s; - transition-property: word-spacing; - transition-timing-function: linear; - } -</style> -<body> - <p>Click any black rectangle below. Test passes if the second rectangle moves gradually not immediately from left to right until it stops and the first one does not move.</p> - <div id="test">text text</div> - <script> - (function() { - var test = document.querySelector("#test"); - test.addEventListener("click", function(evt) { - test.setAttribute("style", "word-spacing: 40px;"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-property-045-manual.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-property - z-index</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Test checks that the 'z-index' property is animatable."> +<style> + div { + height: 100px; + width: 100px; + } + #ref { + background-color: red; + z-index: 1; + } + #test { + background-color: green; + position: relative; + top: -100px; + transition-duration: 2s; + transition-property: z-index; + transition-timing-function: linear; + z-index: -100; + } +</style> +<body> + <p>Click red square below. Test passes if the color of square changes to green after waiting a moment.</p> + <div id="ref"></div> + <div id="test"></div> + <script> + (function() { + var test = document.querySelector("#test"); + document.addEventListener("click", function(evt) { + test.setAttribute("style", "z-index: 100;"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-property-045.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-property - z-index</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="7.1. Properties from CSS" href="http://www.w3.org/TR/css3-transitions/#animatable-css"> -<meta name="flags" content="ahem interact"> -<meta name="assert" content="Test checks that the 'z-index' property is animatable."> -<style> - div { - height: 100px; - width: 100px; - } - #ref { - background-color: red; - z-index: 1; - } - #test { - background-color: green; - position: relative; - top: -100px; - transition-duration: 2s; - transition-property: z-index; - transition-timing-function: linear; - z-index: -100; - } -</style> -<body> - <p>Click red square below. Test passes if the color of square changes to green after waiting a moment.</p> - <div id="ref"></div> - <div id="test"></div> - <script> - (function() { - var test = document.querySelector("#test"); - document.addEventListener("click", function(evt) { - test.setAttribute("style", "z-index: 100;"); - }, false); - })(); - </script> -</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-timing-function-001.html +++ /dev/null @@ -1,94 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>CSS Transitions Test: Parsing transition-timing-function</title> - <meta name="assert" content="Test checks that transition-timing-function values are parsed properly"> - <link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function-property"> - <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/"> - <meta name="flags" content="dom"> - - <script src="/resources/testharness.js" type="text/javascript"></script> - <script src="/resources/testharnessreport.js" type="text/javascript"></script> - - <script src="./support/vendorPrefix.js" type="text/javascript"></script> - <script src="./support/helper.js" type="text/javascript"></script> - </head> - <body> - <!-- required by testharnessreport.js --> - <div id="log"></div> - <!-- elements used for testing --> - <div id="container"> - <div id="transition"></div> - </div> - - <script> - var transition = document.getElementById('transition'); - var defaultValue = 'ease'; - var values = { - // keywords - 'ease': 'ease', - 'linear': 'linear', - 'ease-in': 'ease-in', - 'ease-out': 'ease-out', - 'ease-in-out': 'ease-in-out', - 'step-start': 'steps(1, start)', - 'step-end': 'steps(1)', - // cubic bezier - 'cubic-bezier(0.1, 0.2, 0.3, 0.4)': 'cubic-bezier(0.1, 0.2, 0.3, 0.4)', - 'cubic-bezier(0.1, -0.2, 0.3, -0.4)': 'cubic-bezier(0.1, -0.2, 0.3, -0.4)', - 'cubic-bezier(0.1, 1.2, 0.3, 1.4)': 'cubic-bezier(0.1, 1.2, 0.3, 1.4)', - // steps - 'steps(3, start)': 'steps(3, start)', - 'steps(3, end)': 'steps(3)', - 'steps(3)': 'steps(3)', - 'steps(3, jump-start)': 'steps(3, jump-start)', - 'steps(3, jump-end)': 'steps(3)', - 'steps(3, jump-both)': 'steps(3, jump-both)', - 'steps(3, jump-none)': 'steps(3, jump-none)', - // invalid - 'cubic-bezier(foobar)': defaultValue, - 'steps(foobar)': defaultValue, - 'steps(3.3, end)': defaultValue, - 'steps(3, top)': defaultValue, - 'steps(-3, top)': defaultValue, - 'steps(0, jump-start)': defaultValue, - 'steps(0, jump-end)': defaultValue, - 'steps(0, jump-both)': defaultValue, - 'steps(1, jump-none)': defaultValue, - // Both x values must be in the range [0, 1] - 'cubic-bezier(-0.1, -0.2, -0.3, -0.4)': defaultValue, - 'cubic-bezier(1.1, 1.2, 1.3, 1.4)': defaultValue - }; - - // these tests are supposed to fail and - // possibly make the engine issue a parser warning - var invalidTests = { - 'cubic-bezier(foobar)': true, - 'steps(foobar)': true, - 'steps(3.3, end)': true, - 'steps(3, top)': true, - 'steps(-3, top)': true, - // Both x values must be in the range [0, 1] - 'cubic-bezier(-0.1, -0.2, -0.3, -0.4)': true, - 'cubic-bezier(1.1, 1.2, 1.3, 1.4)': true - }; - - for (var key in values) { - if (Object.prototype.hasOwnProperty.call(values, key)) { - test(function() { - setStyle('#transition', { - 'transition-timing-function': key - }); - var result = computedStyle(transition, 'transition-timing-function'); - assert_equals(result, values[key], "Expected computed value"); - }, "parse '" + key + "'", - { - // mark tests that fail as such - flags: invalidTests[key] ? "invalid" : "" - }); - } - } - </script> - </body> -</html>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-timing-function-002-manual.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-timing-function - 'ease' equivalent to 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function"> +<meta name="assert" content="The 'transition-timing-function' property set 'ease' is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)"> +<style> + div { + height: 100px; + transition: width 2s; + width: 100px; + } + #test1 { + background-color: blue; + transition-timing-function: ease; + } + #test2 { + background-color: yellow; + transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0); + } +</style> +<body> + <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p> + <div id="test1"></div> + <div id="test2"></div> + <button>Start</button> + <script> + (function() { + var button = document.querySelector("button"); + button.addEventListener("click", function(evt) { + var test1 = document.querySelector("#test1"), + test2 = document.querySelector("#test2"); + test1.setAttribute("style", "width: 300px"); + test2.setAttribute("style", "width: 300px"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-timing-function-002.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-timing-function - 'ease' equivalent to 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function"> -<meta name="flags" content="interact"> -<meta name="assert" content="The 'transition-timing-function' property set 'ease' is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)"> -<style> - div { - height: 100px; - transition: width 2s; - width: 100px; - } - #test1 { - background-color: blue; - transition-timing-function: ease; - } - #test2 { - background-color: yellow; - transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0); - } -</style> -<body> - <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p> - <div id="test1"></div> - <div id="test2"></div> - <button>Start</button> - <script> - (function() { - var button = document.querySelector("button"); - button.addEventListener("click", function(evt) { - var test1 = document.querySelector("#test1"), - test2 = document.querySelector("#test2"); - test1.setAttribute("style", "width: 300px"); - test2.setAttribute("style", "width: 300px"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-timing-function-003-manual.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-timing-function - 'ease-in' equivalent to 'cubic-bezier(0.42, 0, 1.0, 1.0)'</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function"> +<meta name="assert" content="The 'transition-timing-function' property set 'ease-in' is equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)"> +<style> + div { + height: 100px; + transition: width 2s; + width: 100px; + } + #test1 { + background-color: blue; + transition-timing-function: ease-in; + } + #test2 { + background-color: yellow; + transition-timing-function: cubic-bezier(0.42, 0, 1.0, 1.0); + } +</style> +<body> + <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p> + <div id="test1"></div> + <div id="test2"></div> + <button>Start</button> + <script> + (function() { + var button = document.querySelector("button"); + button.addEventListener("click", function(evt) { + var test1 = document.querySelector("#test1"), + test2 = document.querySelector("#test2"); + test1.setAttribute("style", "width: 300px"); + test2.setAttribute("style", "width: 300px"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-timing-function-003.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-timing-function - 'ease-in' equivalent to 'cubic-bezier(0.42, 0, 1.0, 1.0)'</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function"> -<meta name="flags" content="interact"> -<meta name="assert" content="The 'transition-timing-function' property set 'ease-in' is equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)"> -<style> - div { - height: 100px; - transition: width 2s; - width: 100px; - } - #test1 { - background-color: blue; - transition-timing-function: ease-in; - } - #test2 { - background-color: yellow; - transition-timing-function: cubic-bezier(0.42, 0, 1.0, 1.0); - } -</style> -<body> - <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p> - <div id="test1"></div> - <div id="test2"></div> - <button>Start</button> - <script> - (function() { - var button = document.querySelector("button"); - button.addEventListener("click", function(evt) { - var test1 = document.querySelector("#test1"), - test2 = document.querySelector("#test2"); - test1.setAttribute("style", "width: 300px"); - test2.setAttribute("style", "width: 300px"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-timing-function-004-manual.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-timing-function - 'ease-in-out' equivalent to 'cubic-bezier(0.42, 0, 0.58, 1.0)'</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function"> +<meta name="assert" content="The 'transition-timing-function' property set 'ease-in-out' is equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)"> +<style> + div { + height: 100px; + transition: width 2s; + width: 100px; + } + #test1 { + background-color: blue; + transition-timing-function: ease-in-out; + } + #test2 { + background-color: yellow; + transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0); + } +</style> +<body> + <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p> + <div id="test1"></div> + <div id="test2"></div> + <button>Start</button> + <script> + (function() { + var button = document.querySelector("button"); + button.addEventListener("click", function(evt) { + var test1 = document.querySelector("#test1"), + test2 = document.querySelector("#test2"); + test1.setAttribute("style", "width: 300px"); + test2.setAttribute("style", "width: 300px"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-timing-function-004.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-timing-function - 'ease-in-out' equivalent to 'cubic-bezier(0.42, 0, 0.58, 1.0)'</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function"> -<meta name="flags" content="interact"> -<meta name="assert" content="The 'transition-timing-function' property set 'ease-in-out' is equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)"> -<style> - div { - height: 100px; - transition: width 2s; - width: 100px; - } - #test1 { - background-color: blue; - transition-timing-function: ease-in-out; - } - #test2 { - background-color: yellow; - transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0); - } -</style> -<body> - <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p> - <div id="test1"></div> - <div id="test2"></div> - <button>Start</button> - <script> - (function() { - var button = document.querySelector("button"); - button.addEventListener("click", function(evt) { - var test1 = document.querySelector("#test1"), - test2 = document.querySelector("#test2"); - test1.setAttribute("style", "width: 300px"); - test2.setAttribute("style", "width: 300px"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-timing-function-005-manual.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-timing-function - 'ease-out' equivalent to 'cubic-bezier(0, 0, 0.58, 1.0)'</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function"> +<meta name="assert" content="The 'transition-timing-function' property set 'ease-out' is equivalent to cubic-bezier(0, 0, 0.58, 1.0)"> +<style> + div { + height: 100px; + transition: width 2s; + width: 100px; + } + #test1 { + background-color: blue; + transition-timing-function: ease-out; + } + #test2 { + background-color: yellow; + transition-timing-function: cubic-bezier(0, 0, 0.58, 1.0); + } +</style> +<body> + <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p> + <div id="test1"></div> + <div id="test2"></div> + <button>Start</button> + <script> + (function() { + var button = document.querySelector("button"); + button.addEventListener("click", function(evt) { + var test1 = document.querySelector("#test1"), + test2 = document.querySelector("#test2"); + test1.setAttribute("style", "width: 300px"); + test2.setAttribute("style", "width: 300px"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-timing-function-005.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-timing-function - 'ease-out' equivalent to 'cubic-bezier(0, 0, 0.58, 1.0)'</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function"> -<meta name="flags" content="interact"> -<meta name="assert" content="The 'transition-timing-function' property set 'ease-out' is equivalent to cubic-bezier(0, 0, 0.58, 1.0)"> -<style> - div { - height: 100px; - transition: width 2s; - width: 100px; - } - #test1 { - background-color: blue; - transition-timing-function: ease-out; - } - #test2 { - background-color: yellow; - transition-timing-function: cubic-bezier(0, 0, 0.58, 1.0); - } -</style> -<body> - <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p> - <div id="test1"></div> - <div id="test2"></div> - <button>Start</button> - <script> - (function() { - var button = document.querySelector("button"); - button.addEventListener("click", function(evt) { - var test1 = document.querySelector("#test1"), - test2 = document.querySelector("#test2"); - test1.setAttribute("style", "width: 300px"); - test2.setAttribute("style", "width: 300px"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-timing-function-006-manual.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-timing-function - 'linear' equivalent to 'cubic-bezier(0.0, 0.0, 1.0, 1.0)'</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function"> +<meta name="assert" content="The 'transition-timing-function' property set 'linear' is equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)"> +<style> + div { + height: 100px; + transition: width 2s; + width: 100px; + } + #test1 { + background-color: blue; + transition-timing-function: linear; + } + #test2 { + background-color: yellow; + transition-timing-function: cubic-bezier(0, 0, 1.0, 1.0); + } +</style> +<body> + <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p> + <div id="test1"></div> + <div id="test2"></div> + <button>Start</button> + <script> + (function() { + var button = document.querySelector("button"); + button.addEventListener("click", function(evt) { + var test1 = document.querySelector("#test1"), + test2 = document.querySelector("#test2"); + test1.setAttribute("style", "width: 300px"); + test2.setAttribute("style", "width: 300px"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-timing-function-006.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-timing-function - 'linear' equivalent to 'cubic-bezier(0.0, 0.0, 1.0, 1.0)'</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function"> -<meta name="flags" content="interact"> -<meta name="assert" content="The 'transition-timing-function' property set 'linear' is equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)"> -<style> - div { - height: 100px; - transition: width 2s; - width: 100px; - } - #test1 { - background-color: blue; - transition-timing-function: linear; - } - #test2 { - background-color: yellow; - transition-timing-function: cubic-bezier(0, 0, 1.0, 1.0); - } -</style> -<body> - <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p> - <div id="test1"></div> - <div id="test2"></div> - <button>Start</button> - <script> - (function() { - var button = document.querySelector("button"); - button.addEventListener("click", function(evt) { - var test1 = document.querySelector("#test1"), - test2 = document.querySelector("#test2"); - test1.setAttribute("style", "width: 300px"); - test2.setAttribute("style", "width: 300px"); - }, false); - })(); - </script> -</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-timing-function-007.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-timing-function - 'step-end' equivalent to 'steps(1, end)'</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function"> -<meta name="flags" content="interact"> -<meta name="assert" content="The 'transition-timing-function' property set 'step-end' is equivalent to 'steps(1, end)'"> -<style> - div { - height: 100px; - transition: width 2s; - width: 100px; - } - #test1 { - background-color: blue; - transition-timing-function: step-end; - } - #test2 { - background-color: yellow; - transition-timing-function: steps(1, end); - } -</style> -<body> - <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p> - <div id="test1"></div> - <div id="test2"></div> - <button>Start</button> - <script> - (function() { - var button = document.querySelector("button"); - button.addEventListener("click", function(evt) { - var test1 = document.querySelector("#test1"), - test2 = document.querySelector("#test2"); - test1.setAttribute("style", "width: 300px"); - test2.setAttribute("style", "width: 300px"); - }, false); - })(); - </script> -</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-timing-function-008.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-timing-function - 'step-start' equivalent to 'steps(1, start)'</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function"> -<meta name="flags" content="interact"> -<meta name="assert" content="The 'transition-timing-function' property set 'step-start' is equivalent to 'steps(1, start)'"> -<style> - div { - height: 100px; - transition: width 2s; - width: 100px; - } - #test1 { - background-color: blue; - transition-timing-function: step-start; - } - #test2 { - background-color: yellow; - transition-timing-function: steps(1, start); - } -</style> -<body> - <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p> - <div id="test1"></div> - <div id="test2"></div> - <button>Start</button> - <script> - (function() { - var button = document.querySelector("button"); - button.addEventListener("click", function(evt) { - var test1 = document.querySelector("#test1"), - test2 = document.querySelector("#test2"); - test1.setAttribute("style", "width: 300px"); - test2.setAttribute("style", "width: 300px"); - }, false); - })(); - </script> -</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-timing-function-009.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-timing-function - ease(initial value)</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the initial value of 'transition-timing-function' property is 'ease'."> -<style> - div { - height: 100px; - transition-duration: 2s; - transition-property: width; - width: 100px; - } - #test1 { - background-color: blue; - transition-timing-function: ease; - } - #test2 { - background-color: yellow; - } -</style> -<body> - <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p> - <div id="test1"></div> - <div id="test2"></div> - <button>Start</button> - <script> - (function() { - var button = document.querySelector("button"); - button.addEventListener("click", function(evt) { - var test1 = document.querySelector("#test1"), - test2 = document.querySelector("#test2"); - test1.setAttribute("style", "width: 300px"); - test2.setAttribute("style", "width: 300px"); - }, false); - })(); - </script> -</body>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/transition-timing-function-010-manual.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transitions Test: transition-timing-function - steps(2)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function"> +<meta name="assert" content="Test checks that the first parameter of 'steps()' function specifies the number of intervals."> +<style> + div { + background-color: blue; + height: 100px; + transition-duration: 1s; + transition-property: width; + transition-timing-function: steps(2); + width: 100px; + } +</style> +<body> + <p>Click the blue square. Test passes if the width of blue square grows <strong>twice</strong>.</p> + <div></div> + <script> + (function() { + var div = document.querySelector("div"); + div.addEventListener("click", function(evt) { + div.setAttribute("style", "width: 300px"); + }, false); + })(); + </script> +</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-timing-function-010.html +++ /dev/null @@ -1,30 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-timing-function - steps(2)</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the first parameter of 'steps()' function specifies the number of intervals."> -<style> - div { - background-color: blue; - height: 100px; - transition-duration: 1s; - transition-property: width; - transition-timing-function: steps(2); - width: 100px; - } -</style> -<body> - <p>Click the blue square. Test passes if the width of blue square grows <strong>twice</strong>.</p> - <div></div> - <script> - (function() { - var div = document.querySelector("div"); - div.addEventListener("click", function(evt) { - div.setAttribute("style", "width: 300px"); - }, false); - })(); - </script> -</body>
deleted file mode 100644 --- a/testing/web-platform/tests/css/css-transitions/transition-timing-function-011.html +++ /dev/null @@ -1,41 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>CSS Transitions Test: transition-timing-function - steps(the second parameter default 'end')</title> -<link rel="author" title="Intel" href="http://www.intel.com"> -<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> -<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function"> -<meta name="flags" content="interact"> -<meta name="assert" content="Test checks that the second parameter of 'steps()' function is default 'end'."> -<style> - div { - height: 100px; - transition-duration: 2s; - transition-property: width; - width: 100px; - } - #test1 { - background-color: blue; - transition-timing-function: steps(2); - } - #test2 { - background-color: yellow; - transition-timing-function: steps(2, end); - } -</style> -<body> - <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p> - <div id="test1"></div> - <div id="test2"></div> - <button>Start</button> - <script> - (function() { - var button = document.querySelector("button"); - button.addEventListener("click", function(evt) {