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

Auto merge of #24527 - servo-wpt-sync:wpt_update_23-10-2019, r=servo-wpt-sync

Browse source 
Sync WPT with upstream (23-10-2019)

Automated downstream sync of changes from upstream as of 23-10-2019.
[no-wpt-sync]
r? @servo-wpt-sync
This commit is contained in:
bors-servo 2019-10-23 17:18:10 -04:00 • committed by GitHub
commit dc8be8f282
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
171 changed files with 2819 additions and 1841 deletions
Download patch file Download diff file Expand all files Collapse all files

3
tests/wpt/metadata/FileAPI/url/url-with-fetch.any.js.ini
View file

@ -34,6 +34,3 @@
[Revoke blob URL after creating Request, will fetch]
expected: FAIL
[Revoke blob URL after calling fetch, fetch should succeed]
expected: FAIL

530
tests/wpt/metadata/MANIFEST.json
View file

File diff suppressed because it is too large Load diff

2
tests/wpt/metadata/css/compositing/mix-blend-mode/mix-blend-mode-animation.html.ini
View file

@ -1,2 +0,0 @@
[mix-blend-mode-animation.html]
expected: FAIL

1
tests/wpt/metadata/css/css-transforms/animation/perspective-interpolation.html.ini
View file

@ -1,4 +1,5 @@
[perspective-interpolation.html]
expected: CRASH
[ perspective interpolation]
expected: FAIL

2
tests/wpt/metadata/css/css-ui/outline-006.html.ini
View file

@ -1,2 +0,0 @@
[outline-006.html]
expected: FAIL

2
tests/wpt/metadata/css/css-values/attr-in-max.html.ini Normal file
View file

@ -0,0 +1,2 @@
[attr-in-max.html]
expected: FAIL

2
tests/wpt/metadata/css/css-values/calc-in-max.html.ini Normal file
View file

@ -0,0 +1,2 @@
[calc-in-max.html]
expected: FAIL

2
tests/wpt/metadata/css/css-values/max-20-arguments.html.ini Normal file
View file

@ -0,0 +1,2 @@
[max-20-arguments.html]
expected: FAIL

2
tests/wpt/metadata/css/css-values/max-unitless-zero-invalid.html.ini Normal file
View file

@ -0,0 +1,2 @@
[max-unitless-zero-invalid.html]
expected: FAIL

3
tests/wpt/metadata/css/cssom-view/matchMediaAddListener-handleEvent.html.ini
View file

@ -8,3 +8,6 @@
[throws if handleEvent is thruthy and not callable]
expected: FAIL
[doesn't look up handleEvent method on callable event listeners]
expected: FAIL

12
tests/wpt/metadata/css/cssom-view/scroll-behavior-smooth-positions.html.ini
View file

@ -53,3 +53,15 @@
[Scroll positions when performing smooth scrolling from (0, 0) to (500, 250) using scrollBy() ]
expected: FAIL
[Scroll positions when performing smooth scrolling from 500 to 250 by setting scrollTop ]
expected: FAIL
[Scroll positions when performing smooth scrolling from 1000 to 500 by setting scrollLeft ]
expected: FAIL
[Scroll positions when performing smooth scrolling from 0 to 500 by setting scrollLeft ]
expected: FAIL
[Scroll positions when performing smooth scrolling from 0 to 250 by setting scrollTop ]
expected: FAIL

2
tests/wpt/metadata/css/filter-effects/backdrop-filters-hue-rotate.html.ini
View file

@ -1,2 +0,0 @@
[backdrop-filters-hue-rotate.html]
expected: FAIL

1
tests/wpt/metadata/encoding/single-byte-decoder.html.ini
View file

@ -2,7 +2,6 @@
type: testharness
[single-byte-decoder.html?document]
expected: TIMEOUT
[ISO-8859-4: iso_8859-4:1988 (document.characterSet and document.inputEncoding)]
expected: FAIL

10
tests/wpt/metadata/fetch/content-type/response.window.js.ini
View file

@ -312,21 +312,15 @@
[<iframe>: separate response Content-Type: */* text/html]
expected: FAIL
[<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
expected: FAIL
[<iframe>: separate response Content-Type: text/html */*;charset=gbk]
expected: FAIL
[<iframe>: combined response Content-Type: */* text/html]
expected: FAIL
[<iframe>: combined response Content-Type: text/html */*]
expected: FAIL
[<iframe>: separate response Content-Type: text/plain */*]
[<iframe>: separate response Content-Type: text/html;x=" text/plain]
expected: FAIL
[<iframe>: combined response Content-Type: text/html;" \\" text/plain]
[<iframe>: separate response Content-Type: text/html;" \\" text/plain]
expected: FAIL

4
tests/wpt/metadata/fetch/content-type/script.window.js.ini
View file

@ -56,9 +56,9 @@
[separate text/javascript x/x]
expected: FAIL
[separate text/javascript;charset=windows-1252 error text/javascript]
[separate text/javascript error]
expected: FAIL
[separate text/javascript;charset=windows-1252 text/javascript]
[separate text/javascript ]
expected: FAIL

3
tests/wpt/metadata/fetch/nosniff/parsing-nosniff.window.js.ini
View file

@ -11,6 +11,3 @@
[X-Content-Type-Options%3A%20nosniff%0C]
expected: FAIL
[X-Content-Type-Options%3A%20%2Cnosniff]
expected: FAIL

6
tests/wpt/metadata/fetch/security/embedded-credentials.tentative.sub.html.ini
View file

@ -13,3 +13,9 @@
[Embedded credentials matching the top-level are treated as network errors for cross-origin URLs.]
expected: TIMEOUT
[Embedded credentials matching the top-level are not treated as network errors for same-origin URLs.]
expected: TIMEOUT
[Embedded credentials matching the top-level are not treated as network errors for relative URLs.]
expected: TIMEOUT

4
tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_2.html.ini
View file

@ -1,4 +0,0 @@
[traverse_the_history_2.html]
[Multiple history traversals, last would be aborted]
expected: FAIL

4
tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_4.html.ini
View file

@ -1,4 +0,0 @@
[traverse_the_history_4.html]
[Multiple history traversals, last would be aborted]
expected: FAIL

4
tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_5.html.ini
View file

@ -1,4 +0,0 @@
[traverse_the_history_5.html]
[Multiple history traversals, last would be aborted]
expected: FAIL

19
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-negative-innerwidth-innerheight.html.ini
View file

@ -1,5 +1,24 @@
[open-features-negative-innerwidth-innerheight.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: negative values for legacy `innerwidth`, `innerheight`]
expected: FAIL
[features "innerheight=-404.5" should NOT set "height=404"]
expected: TIMEOUT
[features "innerwidth=-404.5" should NOT set "width=404"]
expected: TIMEOUT
[features "innerwidth=-404" should NOT set "width=404"]
expected: TIMEOUT
[features "innerheight=-404e1" should NOT set "height=404"]
expected: TIMEOUT
[features "innerheight=-404" should NOT set "height=404"]
expected: TIMEOUT
[features "innerwidth=-404e1" should NOT set "width=404"]
expected: TIMEOUT

19
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-negative-screenx-screeny.html.ini
View file

@ -1,5 +1,24 @@
[open-features-negative-screenx-screeny.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: negative values for legacy `screenx`, `screeny`]
expected: FAIL
[features "screenx=-204" should NOT set "left=204"]
expected: TIMEOUT
[features "screeny=-204" should NOT set "top=204"]
expected: TIMEOUT
[features "screeny=-204.5" should NOT set "top=204"]
expected: TIMEOUT
[features "screeny=-0" should NOT set "top=204"]
expected: TIMEOUT
[features "screenx=-0" should NOT set "left=204"]
expected: TIMEOUT
[features "screenx=-204.5" should NOT set "left=204"]
expected: TIMEOUT

19
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-negative-top-left.html.ini
View file

@ -1,5 +1,24 @@
[open-features-negative-top-left.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: negative values for `top`, `left`]
expected: FAIL
[features "top=-204" should NOT set "top=204"]
expected: TIMEOUT
[features "top=-204.5" should NOT set "top=204"]
expected: TIMEOUT
[features "left=-204" should NOT set "left=204"]
expected: TIMEOUT
[features "top=-0" should NOT set "top=204"]
expected: TIMEOUT
[features "left=-204.5" should NOT set "left=204"]
expected: TIMEOUT
[features "left=-0" should NOT set "left=204"]
expected: TIMEOUT

19
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-negative-width-height.html.ini
View file

@ -1,5 +1,24 @@
[open-features-negative-width-height.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: negative values for `width`, `height`]
expected: FAIL
[features "height=-404" should NOT set "height=404"]
expected: TIMEOUT
[features "height=-404e1" should NOT set "height=404"]
expected: TIMEOUT
[features "height=-404.5" should NOT set "height=404"]
expected: TIMEOUT
[features "width=-404" should NOT set "width=404"]
expected: TIMEOUT
[features "width=-404e1" should NOT set "width=404"]
expected: TIMEOUT
[features "width=-404.5" should NOT set "width=404"]
expected: TIMEOUT

34
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-non-integer-height.html.ini
View file

@ -1,32 +1,48 @@
[open-features-non-integer-height.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for feature `height`]
expected: FAIL
[features "height=405*3" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "height=405.32" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "height=405e1" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "height=405/5" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "height=405^4" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "height=405.5" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "height=405e-1" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "height=405 " should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "height=405LLl" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "height=/404" should NOT set "height=404"]
expected: TIMEOUT
[top=0,left=0,width=401,: absence of feature "height" should be treated same as "height=0"]
expected: TIMEOUT
[top=0,left=0: absence of feature "height" should be treated same as "height=0"]
expected: TIMEOUT
[features "height=_404" should NOT set "height=404"]
expected: TIMEOUT
[features "height=L404" should NOT set "height=404"]
expected: TIMEOUT

28
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-non-integer-innerheight.html.ini
View file

@ -1,32 +1,42 @@
[open-features-non-integer-innerheight.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for legacy feature `innerheight`]
expected: FAIL
[features "innerheight=405e-1" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "innerheight=405LLl" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "innerheight=405^4" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "innerheight=405e1" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "innerheight=405 " should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "innerheight=405/5" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "innerheight=405.32" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "innerheight=405.5" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "innerheight=405*3" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "innerheight=_404" should NOT set "height=404"]
expected: TIMEOUT
[features "innerheight=L404" should NOT set "height=404"]
expected: TIMEOUT
[features "innerheight=/404" should NOT set "height=404"]
expected: TIMEOUT

28
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-non-integer-innerwidth.html.ini
View file

@ -1,32 +1,42 @@
[open-features-non-integer-innerwidth.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for legacy feature `innerwidth`]
expected: FAIL
[features "innerwidth=405e-1" should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "innerwidth=405*3" should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "innerwidth=405.5" should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "innerwidth=405e1" should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "innerwidth=405.32" should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "innerwidth=405 " should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "innerwidth=405LLl" should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "innerwidth=405/5" should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "innerwidth=405^4" should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "innerwidth=/404" should NOT set "width=404"]
expected: TIMEOUT
[features "innerwidth=_404" should NOT set "width=404"]
expected: TIMEOUT
[features "innerwidth=L404" should NOT set "width=404"]
expected: TIMEOUT

28
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-non-integer-left.html.ini
View file

@ -1,32 +1,42 @@
[open-features-non-integer-left.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for feature `left`]
expected: FAIL
[features "left=105e1" should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "left=105 " should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "left=105/5" should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "left=105e-1" should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "left=105^4" should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "left=105LLl" should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "left=105.32" should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "left=105*3" should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "left=105.5" should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "left=L104" should NOT set "left=104"]
expected: TIMEOUT
[features "left=/104" should NOT set "left=104"]
expected: TIMEOUT
[features "left=_104" should NOT set "left=104"]
expected: TIMEOUT

28
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-non-integer-screenx.html.ini
View file

@ -1,32 +1,42 @@
[open-features-non-integer-screenx.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for legacy feature `screenx`]
expected: FAIL
[features "screenx=105.5" should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "screenx=105e1" should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "screenx=105 " should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "screenx=105*3" should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "screenx=105e-1" should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "screenx=105^4" should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "screenx=105LLl" should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "screenx=105/5" should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "screenx=105.32" should set "left=105"]
expected: FAIL
expected: TIMEOUT
[features "screenx=_104" should NOT set "left=104"]
expected: TIMEOUT
[features "screenx=L104" should NOT set "left=104"]
expected: TIMEOUT
[features "screenx=/104" should NOT set "left=104"]
expected: TIMEOUT

28
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-non-integer-screeny.html.ini
View file

@ -1,32 +1,42 @@
[open-features-non-integer-screeny.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for legacy feature `screeny`]
expected: FAIL
[features "screeny=405^4" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "screeny=405e-1" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "screeny=405LLl" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "screeny=405e1" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "screeny=405 " should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "screeny=405/5" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "screeny=405*3" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "screeny=405.32" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "screeny=405.5" should set "height=405"]
expected: FAIL
expected: TIMEOUT
[features "screeny=_404" should NOT set "height=404"]
expected: TIMEOUT
[features "screeny=L404" should NOT set "height=404"]
expected: TIMEOUT
[features "screeny=/404" should NOT set "height=404"]
expected: TIMEOUT

28
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-non-integer-top.html.ini
View file

@ -1,32 +1,42 @@
[open-features-non-integer-top.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for feature `top`]
expected: FAIL
[features "top=105/5" should set "top=105"]
expected: FAIL
expected: TIMEOUT
[features "top=105*3" should set "top=105"]
expected: FAIL
expected: TIMEOUT
[features "top=105LLl" should set "top=105"]
expected: FAIL
expected: TIMEOUT
[features "top=105e-1" should set "top=105"]
expected: FAIL
expected: TIMEOUT
[features "top=105.32" should set "top=105"]
expected: FAIL
expected: TIMEOUT
[features "top=105e1" should set "top=105"]
expected: FAIL
expected: TIMEOUT
[features "top=105 " should set "top=105"]
expected: FAIL
expected: TIMEOUT
[features "top=105^4" should set "top=105"]
expected: FAIL
expected: TIMEOUT
[features "top=105.5" should set "top=105"]
expected: FAIL
expected: TIMEOUT
[features "top=/104" should NOT set "top=104"]
expected: TIMEOUT
[features "top=_104" should NOT set "top=104"]
expected: TIMEOUT
[features "top=L104" should NOT set "top=104"]
expected: TIMEOUT

34
tests/wpt/metadata/html/browsers/the-window-object/apis-for-creating-and-navigating-browsing-contexts-by-name/open-features-non-integer-width.html.ini
View file

@ -1,32 +1,48 @@
[open-features-non-integer-width.html]
type: testharness
expected: TIMEOUT
[HTML: window.open `features`: non-integer values for feature `width`]
expected: FAIL
[features "width=405^4" should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "width=405.5" should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "width=405e1" should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "width=405 " should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "width=405.32" should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "width=405LLl" should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "width=405*3" should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "width=405e-1" should set "width=405"]
expected: FAIL
expected: TIMEOUT
[features "width=405/5" should set "width=405"]
expected: FAIL
expected: TIMEOUT
[top=0,left=0: absence of feature "width" should be treated same as "width=0"]
expected: TIMEOUT
[features "width=_404" should NOT set "width=404"]
expected: TIMEOUT
[top=0,left=0,height=401,: absence of feature "width" should be treated same as "width=0"]
expected: TIMEOUT
[features "width=/404" should NOT set "width=404"]
expected: TIMEOUT
[features "width=L404" should NOT set "width=404"]
expected: TIMEOUT

4
tests/wpt/metadata/html/interaction/focus/the-autofocus-attribute/update-the-rendering.html.ini
View file

@ -1,5 +1,7 @@
[update-the-rendering.html]
expected: TIMEOUT
["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: TIMEOUT
["Flush autofocus candidates" should be happen before a scroll event and animation frame callbacks]
expected: FAIL

3
tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-1.html.ini
View file

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

2
tests/wpt/metadata/html/semantics/forms/form-submission-0/form-double-submit-3.html.ini
View file

@ -1,5 +1,5 @@
[form-double-submit-3.html]
expected: ERROR
[<button> should have the same double-submit protection as <input type=submit>]
expected: TIMEOUT
expected: FAIL

2
tests/wpt/metadata/html/semantics/forms/form-submission-0/form-double-submit.html.ini
View file

@ -1,5 +1,5 @@
[form-double-submit.html]
expected: ERROR
[default submit action should supersede onclick submit()]
expected: FAIL
expected: TIMEOUT

9
tests/wpt/metadata/url/url-setters.html.ini
View file

@ -1041,3 +1041,12 @@
[<area>: Setting <data:text/plain,Stuff>.hostname = 'example.net' Cannot-be-a-base means no host]
expected: FAIL
[<area>: Setting <ssh://me@example.net>.protocol = 'https']
expected: FAIL
[<a>: Setting <ssh://me@example.net>.protocol = 'https']
expected: FAIL
[URL: Setting <ssh://me@example.net>.protocol = 'https']
expected: FAIL

4
tests/wpt/metadata/webxr/ar-module/idlharness.https.window.js.ini
View file

@ -1,4 +0,0 @@
[idlharness.https.window.html]
[idl_test validation]
expected: FAIL

1
tests/wpt/metadata/workers/semantics/multiple-workers/005.html.ini
View file

@ -1,5 +1,4 @@
[005.html]
expected: ERROR
[dedicated worker in shared worker in dedicated worker]
expected: FAIL

3
tests/wpt/mozilla/meta/css/canvas_linear_gradient_a.html.ini
View file

@ -1,3 +0,0 @@
[canvas_linear_gradient_a.html]
type: reftest
expected: FAIL

3
tests/wpt/mozilla/meta/css/filter_sepia_a.html.ini
View file

@ -1,3 +0,0 @@
[filter_sepia_a.html]
type: reftest
expected: FAIL

2
tests/wpt/mozilla/meta/gfx-rs-gecko/opacity-background-1.html.ini
View file

@ -1,2 +0,0 @@
[opacity-background-1.html]
expected: FAIL

2
tests/wpt/web-platform-tests/.azure-pipelines.yml
View file

@ -60,7 +60,7 @@ jobs:
displayName: './wpt test-jobs'
condition: eq(variables['Build.Reason'], 'PullRequest')
pool:
vmImage: 'ubuntu-16.04'
vmImage: 'ubuntu-18.04'
steps:
- template: tools/ci/azure/checkout.yml
- script: |

96
tests/wpt/web-platform-tests/IndexedDB/structured-clone-transaction-state.any.js Normal file
View file

@ -0,0 +1,96 @@
// META: script=support-promises.js
// META: title=Indexed DB transaction state during Structured Serializing
// META: timeout=long
'use strict';
promise_test(async testCase => {
const db = await createDatabase(testCase, database => {
database.createObjectStore('store');
});
const transaction = db.transaction(['store'], 'readwrite');
const objectStore = transaction.objectStore('store');
let getterCalled = false;
const activeValue = {};
Object.defineProperty(activeValue, 'propertyName', {
enumerable: true,
get: testCase.step_func(() => {
getterCalled = true;
assert_throws('TransactionInactiveError', () => {
objectStore.get('key');
}, 'transaction should not be active during structured clone');
return 'value that should not be used';
}),
});
objectStore.add(activeValue, 'key');
await promiseForTransaction(testCase, transaction);
db.close();
assert_true(getterCalled,
"activeValue's getter should be called during test");
}, 'Transaction inactive during structured clone in IDBObjectStore.add()');
promise_test(async testCase => {
const db = await createDatabase(testCase, database => {
database.createObjectStore('store');
});
const transaction = db.transaction(['store'], 'readwrite');
const objectStore = transaction.objectStore('store');
let getterCalled = false;
const activeValue = {};
Object.defineProperty(activeValue, 'propertyName', {
enumerable: true,
get: testCase.step_func(() => {
getterCalled = true;
assert_throws('TransactionInactiveError', () => {
objectStore.get('key');
}, 'transaction should not be active during structured clone');
return 'value that should not be used';
}),
});
objectStore.put(activeValue, 'key');
await promiseForTransaction(testCase, transaction);
db.close();
assert_true(getterCalled,
"activeValue's getter should be called during test");
}, 'Transaction inactive during structured clone in IDBObjectStore.put()');
promise_test(async testCase => {
const db = await createDatabase(testCase, database => {
const objectStore = database.createObjectStore('store');
objectStore.put({}, 'key');
});
const transaction = db.transaction(['store'], 'readwrite');
const objectStore = transaction.objectStore('store');
let getterCalled = false;
const activeValue = {};
Object.defineProperty(activeValue, 'propertyName', {
enumerable: true,
get: testCase.step_func(() => {
getterCalled = true;
assert_throws('TransactionInactiveError', () => {
objectStore.get('key');
}, 'transaction should not be active during structured clone');
return 'value that should not be used';
}),
});
const request = objectStore.openCursor();
request.onsuccess = testCase.step_func(() => {
const cursor = request.result;
cursor.update(activeValue);
});
await promiseForTransaction(testCase, transaction);
db.close();
assert_true(getterCalled,
"activeValue's getter should be called during test");
}, 'Transaction inactive during structured clone in IDBCursor.update()');

41
tests/wpt/web-platform-tests/animation-worklet/inactive-timeline.https.html
View file

@ -49,6 +49,16 @@ function setupAndRegisterTests() {
promise_test(async t => {
const animation = createScrollLinkedWorkletAnimation(t);
const scroller = animation.timeline.scrollSource;
const target = animation.effect.target;
// There is no direct way to control when local times of composited
// animations are synced to the main thread. This test uses another
// composited worklet animation with an always active timeline as an
// indicator of when the sync is ready. The sync is done when animation
// effect's output has changed as a result of advancing the timeline.
const animationRef = createScrollLinkedWorkletAnimation(t);
const scrollerRef = animationRef.timeline.scrollSource;
const targetRef = animationRef.effect.target;
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
const timeRange = animation.timeline.timeRange;
@ -60,6 +70,7 @@ function setupAndRegisterTests() {
scroller.scrollTop;
animation.play();
animationRef.play();
assert_equals(animation.currentTime, null,
'Initial current time must be unresolved in idle state.');
assert_equals(animation.startTime, null,
@ -72,6 +83,17 @@ function setupAndRegisterTests() {
assert_equals(animation.startTime, null,
'Initial start time must be unresolved in playing state.');
scrollerRef.scrollTop = 0.2 * maxScroll;
// Wait until local times are synced back to the main thread.
await waitForAnimationFrameWithCondition(_ => {
return animationRef.effect.getComputedTiming().localTime == 200;
});
assert_equals(animation.effect.getComputedTiming().localTime, null,
'The underlying effect local time must be undefined while the ' +
'timeline is inactive.');
// Make the timeline active.
scroller.style.display = ""
scroller.scrollTop;
@ -81,6 +103,15 @@ function setupAndRegisterTests() {
assert_times_equal(animation.startTime, 0,
'Start time must be initialized.');
scrollerRef.scrollTop = 0.4 * maxScroll;
// Wait until local times are synced back to the main thread.
await waitForAnimationFrameWithCondition(_ => {
return animationRef.effect.getComputedTiming().localTime == 400;
});
assert_times_equal(animation.effect.getComputedTiming().localTime, 200,
'When the timeline becomes newly active, the underlying effect\'s ' +
'timing should be properly updated.');
// Make the timeline inactive again.
scroller.style.display = "none"
scroller.scrollTop;
@ -90,6 +121,16 @@ function setupAndRegisterTests() {
assert_equals(animation.startTime, null,
'Initial start time must be unresolved.');
scrollerRef.scrollTop = 0.6 * maxScroll;
scrollerRef.scrollTop;
// Wait until local times are synced back to the main thread.
await waitForAnimationFrameWithCondition(_ => {
return animationRef.effect.getComputedTiming().localTime == 600;
});
assert_times_equal(animation.effect.getComputedTiming().localTime, 200,
'When the timeline becomes newly inactive, the underlying effect\'s ' +
'timing should stay unchanged.');
}, 'When timeline time becomes inactive previous current time must be ' +
'the current time and start time unresolved');
done();

18
tests/wpt/web-platform-tests/content-security-policy/connect-src/connect-src-beacon-allowed.sub.html
View file

@ -19,19 +19,19 @@ connect-src 'self' http://{{host}}:{{ports[http][0]}}; script-src 'self' 'unsafe
window.addEventListener('securitypolicyviolation', function(e) {
log("FAIL");
});
if (typeof navigator.sendBeacon != 'function') {
if (typeof navigator.sendBeacon != 'function') {
t_log.set_status(t_log.NOTRUN, "No navigator.sendBeacon, cannot run test.");
t_log.phase = t_log.phases.HAS_RESULT;
t_log.done();
} else {
try {
var es = navigator.sendBeacon("http://{{host}}:{{ports[http][0]}}/cors/resources/status.py");
log("Pass");
} catch (e) {
log("Fail");
}
}
try {
var es = navigator.sendBeacon("http://{{host}}:{{ports[http][0]}}/cors/resources/status.py");
log("Pass");
} catch (e) {
log("Fail");
}
}
</script>
<div id="log"></div>
</body>

26
tests/wpt/web-platform-tests/content-security-policy/connect-src/connect-src-beacon-blocked.sub.html
View file

@ -3,7 +3,7 @@
<head>
<!-- Programmatically converted from a WebKit Reftest, please forgive resulting idiosyncracies.-->
<meta http-equiv="Content-Security-Policy" content="connect-src 'self'; script-src 'self' 'unsafe-inline';">
<meta http-equiv="Content-Security-Policy" content="connect-src 'self'; script-src 'self' 'unsafe-inline';">
<title>connect-src-beacon-blocked</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
@ -16,22 +16,22 @@ connect-src 'self' http://{{host}}:{{ports[http][0]}}; script-src 'self' 'unsafe
<body>
<script>
window.addEventListener('securitypolicyviolation', function(e) {
window.addEventListener('securitypolicyviolation', function(e) {
log("violated-directive=" + e.violatedDirective);
});
if (typeof navigator.sendBeacon != 'function') {
});
if (typeof navigator.sendBeacon != 'function') {
t_log.set_status(t_log.NOTRUN, "No navigator.sendBeacon, cannot run test.");
t_log.phase = t_log.phases.HAS_RESULT;
t_log.done();
} else {
try {
var es = navigator.sendBeacon("http://www1.{{host}}:{{ports[http][0]}}/security/contentSecurityPolicy/echo-report.php");
log("Pass");
} catch (e) {
log("Fail");
}
}
} else {
try {
var es = navigator.sendBeacon("http://www1.{{host}}:{{ports[http][0]}}/security/contentSecurityPolicy/echo-report.php");
log("Pass");
} catch (e) {
log("Fail");
}
}
</script>
<div id="log"></div>
</body>

10
tests/wpt/web-platform-tests/content-security-policy/connect-src/connect-src-beacon-redirect-to-blocked.sub.html
View file

@ -16,12 +16,12 @@
<p>The beacon should not follow the redirect to http://www1.{{host}}:{{ports[http][0]}}/content-security-policy/support/fail.png and send a CSP violation report.</p>
<p>Verify that a CSP connect-src directive blocks redirects.</p>
<script>
window.addEventListener('securitypolicyviolation', function(e) {
window.addEventListener('securitypolicyviolation', function(e) {
log("violated-directive=" + e.violatedDirective);
});
if (typeof navigator.sendBeacon != 'function') {
t_log.set_status(t_log.NOTRUN, "No navigator.sendBeacon, cannot run test.");
});
if (typeof navigator.sendBeacon != 'function') {
t_log.set_status(t_log.NOTRUN, "No navigator.sendBeacon, cannot run test.");
t_log.phase = t_log.phases.HAS_RESULT;
t_log.done();
} else {

4
tests/wpt/web-platform-tests/content-security-policy/frame-ancestors/frame-ancestors-nested-cross-in-sandboxed-cross-url-block.html
View file

@ -8,9 +8,9 @@
<body>
<script>
test = async_test("A 'frame-ancestors' CSP directive with a URL value should compare against each frame's origin rather than URL, " +
"so a nested frame with a sandboxed parent frame should be blocked due to the parent having a unique origin.");
"so a nested frame with a sandboxed parent frame should be blocked due to the parent having a unique origin.");
testNestedSandboxedIFrame(SAMEORIGIN_ORIGIN + " " + CROSSORIGIN_ORIGIN, CROSS_ORIGIN, CROSS_ORIGIN, EXPECT_BLOCK);
testNestedSandboxedIFrame(SAMEORIGIN_ORIGIN + " " + CROSSORIGIN_ORIGIN, CROSS_ORIGIN, CROSS_ORIGIN, EXPECT_BLOCK);
</script>
</body>
</html>

10
tests/wpt/web-platform-tests/content-security-policy/media-src/media-src-7_3_2.sub.html
View file

@ -15,14 +15,14 @@
async_test("Disallowed track element onerror handler fires.");
var trackURL = location.protocol + "//{{domains[www]}}:{{ports[http][0]}}/media/foo.vtt";
var t_spv = async_test("Test that securitypolicyviolation events are fired");
var test_count = 1;
window.addEventListener("securitypolicyviolation", t_spv.step_func(function(e) {
assert_equals(e.violatedDirective, "media-src");
assert_equals(e.blockedURI, trackURL);
if (--test_count <= 0) {
t_spv.done();
t_spv.done();
}
}));
@ -62,9 +62,9 @@
setTimeout(function() {
if(source_test.phase != source_test.phases.COMPLETE) {
source_test.step( function () { assert_unreached("Onerror event never fired for track element."); });
source_test.done();
}
source_test.step( function () { assert_unreached("Onerror event never fired for track element."); });
source_test.done();
}
}, 2 * 1000);
</script>

2
tests/wpt/web-platform-tests/content-security-policy/reporting/report-cross-origin-no-cookies.sub.html
View file

@ -12,7 +12,7 @@
<body>
<script>
promise_test(function(test) {
const path = encodeURIComponent("{{domains[www1]}}:{{ports[http][0]}}/");
const path = encodeURIComponent("{{domains[www1]}}:{{ports[http][0]}}/");
return fetch(
"/cookies/resources/set-cookie.py?name=cspViolationReportCookie1&path=" + path,
{mode: 'no-cors', credentials: 'include'})

4
tests/wpt/web-platform-tests/content-security-policy/script-src/scripthash-unicode-normalization.sub.html
View file

@ -49,9 +49,9 @@
script1.test.done();
});
} else {
script1.test.step(function() {
script1.test.step(function() {
assert_unreached("nonMatchingContent script ran");
});
});
}
}

24
tests/wpt/web-platform-tests/css/css-align/distribution-values/space-evenly-001.html
View file

@ -11,22 +11,22 @@
<link rel=help href="https://drafts.csswg.org/css-flexbox-1/#justify-content-property">
<style>
.red {
position: absolute;
z-index: -1;
width: 100px;
height: 100px;
background: red;
position: absolute;
z-index: -1;
width: 100px;
height: 100px;
background: red;
}
.container {
margin-left: -100px;
width: 300px;
display: flex;
justify-content: space-evenly;
margin-left: -100px;
width: 300px;
display: flex;
justify-content: space-evenly;
}
.container div {
width: 100px;
height: 100px;
background: green;
width: 100px;
height: 100px;
background: green;
}
</style>

44
tests/wpt/web-platform-tests/css/css-align/reference/ttwf-reftest-alignContent-ref.html
View file

@ -5,33 +5,33 @@
<link rel="author" title="Heechang Kang" href="mailto:hckang80@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css3-align/#align-content">
<style type="text/css">
#main{
display:table;
position:relative;
font-size:0;
width:70px;
border:1px solid #c3c3c3;
}
#main .sample{
position:absolute;
left:0;
top:50%;
z-index:-1;
margin:-35px 0 0;
}
#main > span{
display:inline-block;
width:70px;
height:70px;
margin:50px 0;
}
#main{
display:table;
position:relative;
font-size:0;
width:70px;
border:1px solid #c3c3c3;
}
#main .sample{
position:absolute;
left:0;
top:50%;
z-index:-1;
margin:-35px 0 0;
}
#main > span{
display:inline-block;
width:70px;
height:70px;
margin:50px 0;
}
</style>
</head>
<body>
<p>PASS if there is no red box.</p>
<div id="main">
<span class="sample" style="background-color:red;"></span>
<span style="background-color:green;"></span>
<span class="sample" style="background-color:red;"></span>
<span style="background-color:green;"></span>
</div>
</body>
</html>

48
tests/wpt/web-platform-tests/css/css-align/ttwf-reftest-alignContent.html
View file

@ -5,35 +5,35 @@
<link rel="author" title="Heechang Kang" href="mailto:hckang80@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css3-align/#content-distribution">
<style type="text/css">
#main{
display:flex;
flex-flow:row wrap;
align-content:space-around;
position:relative;
width:70px;
height:170px;
border:1px solid #c3c3c3;
}
#main .sample{
position:absolute;
left:0;
top:50%;
z-index:-1;
margin:-35px 0 0;
}
#main > span{
display:inline-block;
width:70px;
height:70px;
vertical-align:middle;
}
#main{
display:flex;
flex-flow:row wrap;
align-content:space-around;
position:relative;
width:70px;
height:170px;
border:1px solid #c3c3c3;
}
#main .sample{
position:absolute;
left:0;
top:50%;
z-index:-1;
margin:-35px 0 0;
}
#main > span{
display:inline-block;
width:70px;
height:70px;
vertical-align:middle;
}
</style>
</head>
<body>
<p>PASS if there is no red box.</p>
<div id="main">
<span class="sample" style="background-color:red;"></span>
<span style="background-color:green;"></span>
<span class="sample" style="background-color:red;"></span>
<span style="background-color:green;"></span>
</div>
</body>
</html>

25
tests/wpt/web-platform-tests/css/css-counter-styles/ethiopic-numeric/css3-counter-styles-068.html
View file

@ -18,18 +18,19 @@ ol li { list-style-type: ethiopic-numeric; }
<p class="instructions">Test passes if the two columns are the same, ignoring the suffix.</p>
<div class='test'><ol>
<li title='1'>፩.</li>
<li title='2'>፪.</li>
<li title='3'>፫.</li>
<li title='4'>፬.</li>
<li title='5'>፭.</li>
<li title='6'>፮.</li>
<li title='7'>፯.</li>
<li title='8'>፰.</li>
<li title='9'>፱.</li>
</ol>
</div>
<div class='test'>
<ol>
<li title='1'>፩.</li>
<li title='2'>፪.</li>
<li title='3'>፫.</li>
<li title='4'>፬.</li>
<li title='5'>፭.</li>
<li title='6'>፮.</li>
<li title='7'>፯.</li>
<li title='8'>፰.</li>
<li title='9'>፱.</li>
</ol>
</div>
<!--Notes:

150
tests/wpt/web-platform-tests/css/css-counter-styles/ethiopic-numeric/css3-counter-styles-069.html
View file

@ -18,85 +18,77 @@ ol li { list-style-type: ethiopic-numeric; }
<p class="instructions">Test passes if the two columns are the same, ignoring the suffix.</p>
<div class='test'><ol start='10'>
<li title='10'>፲.</li>
<li title='11'>፲፩.</li>
<li title='12'>፲፪.</li>
</ol>
<ol start='43'>
<li title='43'>፵፫.</li>
</ol>
<ol start='77'>
<li title='77'>፸፯.</li>
</ol>
<ol start='80'>
<li title='80'>፹.</li>
</ol>
<ol start='99'>
<li title='99'>፺፱.</li>
<li title='100'>፻.</li>
<li title='101'>፻፩.</li>
</ol>
<ol start='222'>
<li title='222'>፪፻፳፪.</li>
</ol>
<ol start='540'>
<li title='540'>፭፻፵.</li>
</ol>
<ol start='999'>
<li title='999'>፱፻፺፱.</li>
<li title='1000'>፲፻.</li>
</ol>
<ol start='1005'>
<li title='1005'>፲፻፭.</li>
</ol>
<ol start='1060'>
<li title='1060'>፲፻፷.</li>
</ol>
<ol start='1065'>
<li title='1065'>፲፻፷፭.</li>
</ol>
<ol start='1800'>
<li title='1800'>፲፰፻.</li>
</ol>
<ol start='1860'>
<li title='1860'>፲፰፻፷.</li>
</ol>
<ol start='1865'>
<li title='1865'>፲፰፻፷፭.</li>
</ol>
<ol start='5865'>
<li title='5865'>፶፰፻፷፭.</li>
</ol>
<ol start='7005'>
<li title='7005'>፸፻፭.</li>
</ol>
<ol start='7800'>
<li title='7800'>፸፰፻.</li>
</ol>
<ol start='7864'>
<li title='7864'>፸፰፻፷፬.</li>
</ol>
<ol start='9999'>
<li title='9999'>፺፱፻፺፱.</li>
<li title='10000'>፼.</li>
</ol>
<ol start='78010092'>
<li title='78010092'>፸፰፻፩፼፺፪.</li>
</ol>
<ol start='1000001'>
<li title='1000001'>፻፼፩.</li>
</ol>
</div>
<div class='test'>
<ol start='10'>
<li title='10'>፲.</li>
<li title='11'>፲፩.</li>
<li title='12'>፲፪.</li>
</ol>
<ol start='43'>
<li title='43'>፵፫.</li>
</ol>
<ol start='77'>
<li title='77'>፸፯.</li>
</ol>
<ol start='80'>
<li title='80'>፹.</li>
</ol>
<ol start='99'>
<li title='99'>፺፱.</li>
<li title='100'>፻.</li>
<li title='101'>፻፩.</li>
</ol>
<ol start='222'>
<li title='222'>፪፻፳፪.</li>
</ol>
<ol start='540'>
<li title='540'>፭፻፵.</li>
</ol>
<ol start='999'>
<li title='999'>፱፻፺፱.</li>
<li title='1000'>፲፻.</li>
</ol>
<ol start='1005'>
<li title='1005'>፲፻፭.</li>
</ol>
<ol start='1060'>
<li title='1060'>፲፻፷.</li>
</ol>
<ol start='1065'>
<li title='1065'>፲፻፷፭.</li>
</ol>
<ol start='1800'>
<li title='1800'>፲፰፻.</li>
</ol>
<ol start='1860'>
<li title='1860'>፲፰፻፷.</li>
</ol>
<ol start='1865'>
<li title='1865'>፲፰፻፷፭.</li>
</ol>
<ol start='5865'>
<li title='5865'>፶፰፻፷፭.</li>
</ol>
<ol start='7005'>
<li title='7005'>፸፻፭.</li>
</ol>
<ol start='7800'>
<li title='7800'>፸፰፻.</li>
</ol>
<ol start='7864'>
<li title='7864'>፸፰፻፷፬.</li>
</ol>
<ol start='9999'>
<li title='9999'>፺፱፻፺፱.</li>
<li title='10000'>፼.</li>
</ol>
<ol start='78010092'>
<li title='78010092'>፸፰፻፩፼፺፪.</li>
</ol>
<ol start='1000001'>
<li title='1000001'>፻፼፩.</li>
</ol>
</div>
<!--Notes:

8
tests/wpt/web-platform-tests/css/css-counter-styles/ethiopic-numeric/css3-counter-styles-070.html
View file

@ -19,10 +19,10 @@ ol li { list-style-type: ethiopic-numeric; }
<div class='test'>
<ol start='1'>
<li title='1'>፩/ </li>
</ol>
</div>
<ol start='1'>
<li title='1'>፩/ </li>
</ol>
</div>
<!--Notes:

40
tests/wpt/web-platform-tests/css/css-flexbox/flexbox_align-items-stretch-4.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<title>Auto cross margins and align-items: stretch</title>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-stretch">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="" />
<meta name="assert" content="Auto cross margins prevent an item from stretching." />
<link rel="bookmark" href="https://crbug.com/1015475" />
<style>
x-flexbox {
display: flex;
/* This makes auto margins prevent stretching without affecting position. Without
it the auto margins make the item move to the center of the window. */
width: 100px;
}
.item-with-auto-margin {
background: green;
margin: auto;
}
.pct-height-child {
height: 100%;
width: 100px;
background: red;
}
.second-child {
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<x-flexbox>
<div class=item-with-auto-margin>
<div class="pct-height-child"></div>
<div class="second-child"></div>
</div>
</x-flexbox>

286
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001-ref.html
View file

@ -49,71 +49,71 @@ h3 { font-size: 1em; }
<div class="floatLeft">
<h3>Only fit-content() and with fixed size tracks.</h3>
<div class="grid">
<div class="item">XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="item">XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 30px 0px;">
<div class="item">XXX</div>
<div class="spanningItem">XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item">XXX</div>
<div class="spanningItem">XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 40px;">
<div class="item">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="item">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid" style="grid-template-columns: auto auto;">
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 40px auto;">
<div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 80px;">
<div class="item">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="item">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid" style="grid-template-columns: auto auto;">
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 25px 70px;">
<div class="item autoRowSecondColumn">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item autoRowSecondColumn">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 20px 50px;">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 40px 40px;">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 15px 80px;">
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
</div>
@ -121,139 +121,139 @@ h3 { font-size: 1em; }
<div class="floatLeft">
<h3>fit-content() with other content-sized tracks.</h3>
<div class="grid" style="grid-template-columns: 12.5px 82.5px;">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 50px 45px;">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 0px 95px;">
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 12.5px 40px;">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 50px 40px;">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 0px 50px;">
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: auto min-content max-content">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content auto max-content">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content max-content auto">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 30px 0px 60px;">
<div class="item" style="grid-column: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
<div class="item" style="grid-column: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 30px 0px 60px;">
<div class="item" style="grid-column: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
<div class="item" style="grid-column: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 0px 90px 0px;">
<div class="item" style="grid-column: 2">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
<div class="item" style="grid-column: 2">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
</div>
<div class="floatLeft">
<h3>fit-content() with percentage arguments.</h3>
<div class="grid" style="grid-template-columns: 30px;">
<div class="item">XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="item">XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 30px 0px;">
<div class="item">XXX</div>
<div class="spanningItem">XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item">XXX</div>
<div class="spanningItem">XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 30px;">
<div class="item">XX XX</div>
<div class="test autoRowFirstColumn"></div>
<div class="item">XX XX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 30px 30px;">
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 30px 30px;">
<div class="item autoRowSecondColumn">X X X</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item autoRowSecondColumn">X X X</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 90px;">
<div class="item">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="item">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 47.5px 47.5px;">
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 15px 80px;">
<div class="item autoRowSecondColumn">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item autoRowSecondColumn">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
</div>
@ -261,71 +261,71 @@ h3 { font-size: 1em; }
<h3>max-content &lt; fit-content() argument.</h3>
<div class="grid" style="grid-template-columns: 70px;">
<div class="item">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="item">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 32.5px 32.5px;">
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 70px 0px;">
<div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 32.5px 32.5px;">
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 45px 20px;">
<div class="item autoRowSecondColumn">XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item autoRowSecondColumn">XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 92.5px 12.5px;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: 82.5px 12.5px;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: max-content auto max-content;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content auto min-content;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: auto auto auto;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>

288
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001.html
View file

@ -73,71 +73,71 @@ h3 { font-size: 1em; }
<div class="floatLeft">
<h3>Only fit-content() and with fixed size tracks.</h3>
<div class="grid fc0">
<div class="item">XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="item">XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc0x2">
<div class="item">XXX</div>
<div class="spanningItem">XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item">XXX</div>
<div class="spanningItem">XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc40">
<div class="item">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="item">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc40x2">
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc40x2">
<div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc80">
<div class="item">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="item">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc80x2">
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc80x2">
<div class="item autoRowSecondColumn">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item autoRowSecondColumn">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(20px) 50%;">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: minmax(10px, 40px) fit-content(40px);">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(40px) minmax(10%, 200px);">
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
</div>
@ -145,139 +145,139 @@ h3 { font-size: 1em; }
<div class="floatLeft">
<h3>fit-content() with other content-sized tracks.</h3>
<div class="grid" style="grid-template-columns: fit-content(40px) max-content;">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(40px) max-content;">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(40px) max-content;">
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content fit-content(40px);">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content fit-content(40px);">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content fit-content(40px);">
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(30px) min-content max-content">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content fit-content(30px) max-content">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content max-content fit-content(30px)">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(30px) min-content max-content">
<div class="item" style="grid-column: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
<div class="item" style="grid-column: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content fit-content(30px) max-content">
<div class="item" style="grid-column: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
<div class="item" style="grid-column: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content max-content fit-content(30px)">
<div class="item" style="grid-column: 2">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
<div class="item" style="grid-column: 2">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
</div>
<div class="floatLeft">
<h3>fit-content() with percentage arguments.</h3>
<div class="grid fc0p">
<div class="item">XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="item">XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc0px2">
<div class="item">XXX</div>
<div class="spanningItem">XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item">XXX</div>
<div class="spanningItem">XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc30p">
<div class="item">XX XX</div>
<div class="test autoRowFirstColumn"></div>
<div class="item">XX XX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc30px2">
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc30px2">
<div class="item autoRowSecondColumn">X X X</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item autoRowSecondColumn">X X X</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc90p">
<div class="item">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="item">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc90px2">
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc90px2">
<div class="item autoRowSecondColumn">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item autoRowSecondColumn">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
</div>
@ -285,71 +285,71 @@ h3 { font-size: 1em; }
<h3>max-content &lt; fit-content() argument.</h3>
<div class="grid fc110">
<div class="item">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="item">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc110x2">
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc110x2">
<div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(110px) fit-content(40px);">
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(110px) fit-content(40px);">
<div class="item autoRowSecondColumn">XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="item autoRowSecondColumn">XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: max-content fit-content(110px);">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(110px) min-content;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: max-content fit-content(110px) max-content;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content fit-content(110px) min-content;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: auto fit-content(110px) auto;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>

16
tests/wpt/web-platform-tests/css/css-images/css-image-fallbacks-and-annotations.html
View file

@ -4,15 +4,15 @@
<title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
<link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="When the image doesn't load, the background color is still there to ensure that the white text is readable.">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="When the image doesn't load, the background color is still there to ensure that the white text is readable.">
<style type="text/css">
.square{
width: 200px;
height: 200px;
background-color: red;
background: image("green.png", green);
}
.square{
width: 200px;
height: 200px;
background-color: red;
background: image("green.png", green);
}
</style>
</head>
<body>

18
tests/wpt/web-platform-tests/css/css-images/css-image-fallbacks-and-annotations002.html
View file

@ -4,16 +4,16 @@
<title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
<link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="The 'image()' function load the image.">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="The 'image()' function load the image.">
<style type="text/css">
.square{
width: 200px;
height: 200px;
color: white;
background-color: red;
background-image: image("support/1x1-green.png");
}
.square{
width: 200px;
height: 200px;
color: white;
background-color: red;
background-image: image("support/1x1-green.png");
}
</style>
</head>
<body>

16
tests/wpt/web-platform-tests/css/css-images/css-image-fallbacks-and-annotations003.html
View file

@ -4,15 +4,15 @@
<title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
<link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="The rule below would tell the UA to load The first file if it can; failing that to load The second file; failing that to display The third file.">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="The rule below would tell the UA to load The first file if it can; failing that to load The second file; failing that to display The third file.">
<style type="text/css">
.square{
width: 200px;
height: 200px;
background-color: red;
background-image: image("1x1-green.svg", "support/1x1-green.png","support/1x1-green.gif");
}
.square{
width: 200px;
height: 200px;
background-color: red;
background-image: image("1x1-green.svg", "support/1x1-green.png","support/1x1-green.gif");
}
</style>
</head>
<body>

16
tests/wpt/web-platform-tests/css/css-images/css-image-fallbacks-and-annotations004.html
View file

@ -4,15 +4,15 @@
<title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
<link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="The rule below would tell the UA to load The first file if it can; failing that to load The second file.">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="The rule below would tell the UA to load The first file if it can; failing that to load The second file.">
<style type="text/css">
.square{
width: 200px;
height: 200px;
background-color: red;
background-image: image("1x1-green.svg", "1x1-green.png", "support/1x1-green.gif");
}
.square{
width: 200px;
height: 200px;
background-color: red;
background-image: image("1x1-green.svg", "1x1-green.png", "support/1x1-green.gif");
}
</style>
</head>
<body>

16
tests/wpt/web-platform-tests/css/css-images/css-image-fallbacks-and-annotations005.html
View file

@ -4,15 +4,15 @@
<title>CSS Image Fallbacks and Annotations: the 'image()' notation</title>
<link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com">
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-notation">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="The 'image()' function specifies only a color without any URLs, the function immediately falls back to representing a solid-color image of the chosen color.">
<link rel="match" href="css-image-fallbacks-and-annotations-ref.html">
<meta name="assert" content="The 'image()' function specifies only a color without any URLs, the function immediately falls back to representing a solid-color image of the chosen color.">
<style type="text/css">
.square{
width: 200px;
height: 200px;
background-color: red;
background-image: image(rgba(0,0,255,0.5)), url("support/1x1-green.png");
}
.square{
width: 200px;
height: 200px;
background-color: red;
background-image: image(rgba(0,0,255,0.5)), url("support/1x1-green.png");
}
</style>
</head>
<body>

4
tests/wpt/web-platform-tests/css/css-images/gradients-with-transparent.html
View file

@ -18,9 +18,9 @@
}
</style>
<body>
<p>Gradient using 'transparent'</p>
<p>Gradient using 'transparent'</p>
<div id="gradient1" class="test"></div>
<br />
<p>Gradient using rgba(0,0,255,0)</p>
<p>Gradient using rgba(0,0,255,0)</p>
<div id="gradient2" class="test"></div>
</body>

14
tests/wpt/web-platform-tests/css/css-images/image-fit-001.xht
View file

@ -7,14 +7,14 @@
<meta name="assert" content="The initial value of the 'object-fit' property is 'fill'."/>
<style type="text/css"><![CDATA[
img {
background: red;
height: 100px;
width: 50px;
}
background: red;
height: 100px;
width: 50px;
}
]]></style>
</head>
<body>
<div>A green block appears below. There must be no red on the page.</div>
<div><img src="support/swatch-green.png" alt="Failed: image missing"/></div>
<div>A green block appears below. There must be no red on the page.</div>
<div><img src="support/swatch-green.png" alt="Failed: image missing"/></div>
</body>
</html>
</html>

18
tests/wpt/web-platform-tests/css/css-images/image-fit-006.xht
View file

@ -8,16 +8,16 @@
<meta name="assert" content="The 'fill' value of the 'image-scaling' property scales the content height and width independently so that the edges of the content just meet the edges of the box established by the used 'height' and 'width'."/>
<style type="text/css"><![CDATA[
img {
border: 5px solid blue;
height: 50px;
width: 100px;
object-fit: fill;
background: red;
}
border: 5px solid blue;
height: 50px;
width: 100px;
object-fit: fill;
background: red;
}
]]></style>
</head>
<body>
<div>The image below should fill the blue border with no red between the border and the image.</div>
<div><img src="support/intrinsic-size.jpg" alt="Failed: image missing" /></div>
<div>The image below should fill the blue border with no red between the border and the image.</div>
<div><img src="support/intrinsic-size.jpg" alt="Failed: image missing" /></div>
</body>
</html>
</html>

144
tests/wpt/web-platform-tests/css/css-lists/list-style-type-armenian-002.xht
View file

@ -24,78 +24,78 @@ ol { margin: 0; padding-left: 8em; }
<div class="test">
<ol class="armenian">
<li title="1">Ա</li>
<li title="2">Բ</li>
<li title="3">Գ</li>
<li title="4">Դ</li>
<li title="5">Ե</li>
<li title="6">Զ</li>
<li title="7">Է</li>
<li title="8">Ը</li>
<li title="9">Թ</li>
<li title="10">Ժ</li>
<li title="11">ԺԱ</li>
<li title="12">ԺԲ</li>
</ol>
<ol class="armenian" start="43">
<li title="43">ԽԳ</li>
</ol>
<ol class="armenian" start="77">
<li title="77">ՀԷ</li>
</ol>
<ol class="armenian" start="80">
<li title="80">Ձ</li>
</ol>
<ol class="armenian" start="99">
<li title="99">ՂԹ</li>
<li title="100">Ճ</li>
<li title="101">ՃԱ</li>
</ol>
<ol class="armenian" start="222">
<li title="222">ՄԻԲ</li>
</ol>
<ol class="armenian" start="540">
<li title="540">ՇԽ</li>
</ol>
<ol class="armenian" start="999">
<li title="999">ՋՂԹ</li>
<li title="1000">Ռ</li>
</ol>
<ol class="armenian" start="1005">
<li title="1005">ՌԵ</li>
</ol>
<ol class="armenian" start="1060">
<li title="1060">ՌԿ</li>
</ol>
<ol class="armenian" start="1065">
<li title="1065">ՌԿԵ</li>
</ol>
<ol class="armenian" start="1800">
<li title="1800">ՌՊ</li>
</ol>
<ol class="armenian" start="1860">
<li title="1860">ՌՊԿ</li>
</ol>
<ol class="armenian" start="1865">
<li title="1865">ՌՊԿԵ</li>
</ol>
<ol class="armenian" start="5865">
<li title="5865">ՐՊԿԵ</li>
</ol>
<ol class="armenian" start="7005">
<li title="7005">ՈՒԵ</li>
</ol>
<ol class="armenian" start="7800">
<li title="7800">ՈՒՊ</li>
</ol>
<ol class="armenian" start="7865">
<li title="7865">ՈՒՊԿԵ</li>
</ol>
<ol class="armenian" start="9999">
<li title="9999">ՔՋՂԹ</li>
</ol>
</div>
<ol class="armenian">
<li title="1">Ա</li>
<li title="2">Բ</li>
<li title="3">Գ</li>
<li title="4">Դ</li>
<li title="5">Ե</li>
<li title="6">Զ</li>
<li title="7">Է</li>
<li title="8">Ը</li>
<li title="9">Թ</li>
<li title="10">Ժ</li>
<li title="11">ԺԱ</li>
<li title="12">ԺԲ</li>
</ol>
<ol class="armenian" start="43">
<li title="43">ԽԳ</li>
</ol>
<ol class="armenian" start="77">
<li title="77">ՀԷ</li>
</ol>
<ol class="armenian" start="80">
<li title="80">Ձ</li>
</ol>
<ol class="armenian" start="99">
<li title="99">ՂԹ</li>
<li title="100">Ճ</li>
<li title="101">ՃԱ</li>
</ol>
<ol class="armenian" start="222">
<li title="222">ՄԻԲ</li>
</ol>
<ol class="armenian" start="540">
<li title="540">ՇԽ</li>
</ol>
<ol class="armenian" start="999">
<li title="999">ՋՂԹ</li>
<li title="1000">Ռ</li>
</ol>
<ol class="armenian" start="1005">
<li title="1005">ՌԵ</li>
</ol>
<ol class="armenian" start="1060">
<li title="1060">ՌԿ</li>
</ol>
<ol class="armenian" start="1065">
<li title="1065">ՌԿԵ</li>
</ol>
<ol class="armenian" start="1800">
<li title="1800">ՌՊ</li>
</ol>
<ol class="armenian" start="1860">
<li title="1860">ՌՊԿ</li>
</ol>
<ol class="armenian" start="1865">
<li title="1865">ՌՊԿԵ</li>
</ol>
<ol class="armenian" start="5865">
<li title="5865">ՐՊԿԵ</li>
</ol>
<ol class="armenian" start="7005">
<li title="7005">ՈՒԵ</li>
</ol>
<ol class="armenian" start="7800">
<li title="7800">ՈՒՊ</li>
</ol>
<ol class="armenian" start="7865">
<li title="7865">ՈՒՊԿԵ</li>
</ol>
<ol class="armenian" start="9999">
<li title="9999">ՔՋՂԹ</li>
</ol>
</div>
<!--p class="notes">Notes: <br />CSS2.1 CR specifies an armenian property, but does not specify in any detail the mechanism for implementing it. Expectations for behavior in these tests are based on the descriptions of lower-armenian and upper-armenian in the version of the CSS3 Lists module current at the time this test was last updated.</p><p class="notes">The test uses the start attribute to reduce the size of the list. This attribute is deprecated or unavailable in some formats, causing the test page not to validate, but appears to be supported in major browsers anyway (and will be reinstated in HTML5).</p><p class="notes">Both upper and lowercase variants are shown here because the test is about the generative mechanism. The case is tested elsewhere.</p-->

22
tests/wpt/web-platform-tests/css/css-lists/list-style-type-armenian-003.xht
View file

@ -24,17 +24,17 @@ ol { margin: 0; padding-left: 8em; }
<div class="test">
<ol class="armenian" start="10000">
<li title="10,000">Ա̂</li>
<li title="10,001">Ա̂Ա</li>
</ol>
<ol class="armenian" start="55465">
<li title="55,465">Ե̂ՐՆԿԵ</li>
</ol>
<ol class="armenian" start="655465">
<li title="655,465">Կ̂Ե̂ՐՆԿԵ</li>
</ol>
</div>
<ol class="armenian" start="10000">
<li title="10,000">Ա̂</li>
<li title="10,001">Ա̂Ա</li>
</ol>
<ol class="armenian" start="55465">
<li title="55,465">Ե̂ՐՆԿԵ</li>
</ol>
<ol class="armenian" start="655465">
<li title="655,465">Կ̂Ե̂ՐՆԿԵ</li>
</ol>
</div>
<!--p class="notes">Notes: <br />CSS2.1 CR specifies an armenian property, but does not specify in any detail the mechanism for implementing it. Expectations for behavior in these tests are based on the descriptions of lower-armenian and upper-armenian in the version of the CSS3 Lists module current at the time this test was last updated.</p><p class="notes">The test uses the start attribute to reduce the size of the list. This attribute is deprecated or unavailable in some formats, causing the test page not to validate, but appears to be supported in major browsers anyway (and will be reinstated in HTML5).</p><p class="notes">Both upper and lowercase variants are shown here because the test is about the generative mechanism. The case is tested elsewhere.</p-->

19
tests/wpt/web-platform-tests/css/css-pseudo/before-in-display-none-crash.html Normal file
View file

@ -0,0 +1,19 @@
<!doctype html>
<title>CSS Test: Invalidating style inside display:none with ::before should not crash.</title>
<link rel="help" href="https://crbug.com/1013570">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#outer { display: none }
#outer::before { content: " "; }
</style>
<div id="outer">
<div id="inner"></div>
</div>
<script>
test(() => {
assert_equals(getComputedStyle(inner).color, "rgb(0, 0, 0)");
inner.style.color = "green";
assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)");
}, "Invalidating style inside display:none with ::before should not crash.");
</script>

36
tests/wpt/web-platform-tests/css/css-pseudo/first-letter-001-ref.html
View file

@ -1,25 +1,25 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Reference File</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<style>
div {
font-size: 50px;
position: absolute;
left: 30px;
top: 50px;
}
div span {
color: green;
background: green;
float: left;
}
</style>
<meta charset="utf-8">
<title>CSS Reference File</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<style>
div {
font-size: 50px;
position: absolute;
left: 30px;
top: 50px;
}
div span {
color: green;
background: green;
float: left;
}
</style>
</head>
<body>
<p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p>
<div><span>a</span></div>
<p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p>
<div><span>a</span></div>
</body>
</html>

52
tests/wpt/web-platform-tests/css/css-pseudo/first-letter-001.html
View file

@ -1,33 +1,33 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: ::first-letter formatting</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="match" href="first-letter-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
<meta name="flags" content="">
<meta name="assert" content="Test checks that a floated ::first-letter follows the usual formating rules for floats.">
<style>
div {
font-size: 50px;
position: absolute;
left: 30px;
top: 50px;
background: red;
}
span {
background : white;
}
div::first-letter {
color: green;
background: green;
float: left;
}
</style>
<meta charset="utf-8">
<title>CSS Test: ::first-letter formatting</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="match" href="first-letter-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
<meta name="flags" content="">
<meta name="assert" content="Test checks that a floated ::first-letter follows the usual formating rules for floats.">
<style>
div {
font-size: 50px;
position: absolute;
left: 30px;
top: 50px;
background: red;
}
span {
background : white;
}
div::first-letter {
color: green;
background: green;
float: left;
}
</style>
</head>
<body>
<p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p>
<div>a<span>&nbsp;</span></div>
<p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p>
<div>a<span>&nbsp;</span></div>
</body>
</html>

56
tests/wpt/web-platform-tests/css/css-pseudo/first-letter-002.html
View file

@ -1,35 +1,35 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: ::first-letter formatting</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="match" href="first-letter-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
<meta name="flags" content="">
<meta name="assert" content="Test checks that a floated ::first-letter is formatted identically to a floated non-pseudo element with the same content.">
<style>
div {
font-size: 50px;
position: absolute;
left: 30px;
top: 50px;
}
#d1 span {
color: red;
background: red;
float: left;
}
#d2::first-letter {
color: green;
background: green;
float: left;
}
</style>
<meta charset="utf-8">
<title>CSS Test: ::first-letter formatting</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="match" href="first-letter-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
<meta name="flags" content="">
<meta name="assert" content="Test checks that a floated ::first-letter is formatted identically to a floated non-pseudo element with the same content.">
<style>
div {
font-size: 50px;
position: absolute;
left: 30px;
top: 50px;
}
#d1 span {
color: red;
background: red;
float: left;
}
#d2::first-letter {
color: green;
background: green;
float: left;
}
</style>
</head>
<body>
<p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p>
<div id="d1"><span>a</span></div>
<div id="d2">a</div>
<p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p>
<div id="d1"><span>a</span></div>
<div id="d2">a</div>
</body>
</html>

56
tests/wpt/web-platform-tests/css/css-pseudo/first-letter-003.html
View file

@ -1,35 +1,35 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: ::first-letter formatting</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="match" href="first-letter-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
<meta name="flags" content="">
<meta name="assert" content="Test checks that a floated ::first-letter is formatted identically to a floated non-pseudo element with the same content.">
<style>
div {
font-size: 50px;
position: absolute;
left: 30px;
top: 50px;
}
#d1::first-letter {
color: red;
background: red;
float: left;
}
#d2 span {
color: green;
background: green;
float: left;
}
</style>
<meta charset="utf-8">
<title>CSS Test: ::first-letter formatting</title>
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
<link rel="match" href="first-letter-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
<meta name="flags" content="">
<meta name="assert" content="Test checks that a floated ::first-letter is formatted identically to a floated non-pseudo element with the same content.">
<style>
div {
font-size: 50px;
position: absolute;
left: 30px;
top: 50px;
}
#d1::first-letter {
color: red;
background: red;
float: left;
}
#d2 span {
color: green;
background: green;
float: left;
}
</style>
</head>
<body>
<p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p>
<div id="d1">a</div>
<div id="d2"><span>a</span></div>
<p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p>
<div id="d1">a</div>
<div id="d2"><span>a</span></div>
</body>
</html>

26
tests/wpt/web-platform-tests/css/css-pseudo/first-letter-width-ref.html
View file

@ -2,19 +2,19 @@
<meta charset="utf-8">
<html lang="en">
<head>
<title>initial-letter width test</title>
<style>
span {
position: absolute;
color: transparent;
}
#control {
background-color: green;
}
</style>
<title>initial-letter width test</title>
<style>
span {
position: absolute;
color: transparent;
}
#control {
background-color: green;
}
</style>
</head>
<body>
<p>There should be no red</p>
<span id="control">Test.</span>
<p>There should be no red</p>
<span id="control">Test.</span>
</body>
</html>
</html>

62
tests/wpt/web-platform-tests/css/css-pseudo/first-letter-width.html
View file

@ -2,37 +2,37 @@
<meta charset="utf-8">
<html lang="en">
<head>
<title>initial-letter width test</title>
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=362880">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
<link rel="match" href="first-letter-width-ref.html">
<meta name="assert" content="The width of an element with first-letter styling should render correctly.">
<style>
div {
position: relative;
}
span {
position: absolute;
color: transparent;
}
#control {
background-color: green;
}
#test {
background-color: red;
line-height: 1;
top: 1px;
}
#test::first-letter {
text-transform: uppercase;
}
</style>
<title>initial-letter width test</title>
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=362880">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
<link rel="match" href="first-letter-width-ref.html">
<meta name="assert" content="The width of an element with first-letter styling should render correctly.">
<style>
div {
position: relative;
}
span {
position: absolute;
color: transparent;
}
#control {
background-color: green;
}
#test {
background-color: red;
line-height: 1;
top: 1px;
}
#test::first-letter {
text-transform: uppercase;
}
</style>
</head>
<body>
<p>There should be no red</p>
<div>
<span id="test">Test</span>
<span id="control">Test.</span>
</div>
<p>There should be no red</p>
<div>
<span id="test">Test</span>
<span id="control">Test.</span>
</div>
</body>
</html>
</html>

40
tests/wpt/web-platform-tests/css/css-shapes/shape-outside-invalid-001.html
View file

@ -1,35 +1,35 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="flags" content="dom">
<meta charset="UTF-8">
<meta name="flags" content="dom">
<meta name="assert" content="shape-outside declaration is invalid if shape is invalid">
<title>CSS Shapes Test - shape-outside invalid shape</title>
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<title>CSS Shapes Test - shape-outside invalid shape</title>
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
<style>
#shape{
width: 300px;
height: 300px;
shape-outside: invalid(50px,50px,50px,50px);
width: 300px;
height: 300px;
shape-outside: invalid(50px,50px,50px,50px);
}
</style>
</style>
</head>
<body>
<div id="log"></div>
<div id="log"></div>
<div id="shape"></div>
<div id="shape"></div>
<script>
var obj = document.getElementById('shape');
var shapeOutside = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(shapeOutside, "none", "declaration should be Invalid")});
</script>
<script>
var obj = document.getElementById('shape');
var shapeOutside = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(shapeOutside, "none", "declaration should be Invalid")});
</script>
</body>
</html>

44
tests/wpt/web-platform-tests/css/css-shapes/shape-outside-invalid-circle-002.html
View file

@ -1,36 +1,36 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="flags" content="dom">
<meta charset="UTF-8">
<meta name="flags" content="dom">
<meta name="assert" content="shape-outside declaration is invalid if cy for circle function is invalid">
<title>CSS Shapes Test - Circle - invalid cy value</title>
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<title>CSS Shapes Test - Circle - invalid cy value</title>
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
<style>
#shape{
width: 300px;
height: 300px;
shape-outside: circle(50% at 50% 50);
width: 300px;
height: 300px;
shape-outside: circle(50% at 50% 50);
}
</style>
</style>
</head>
<body>
<div id="log"></div>
<div id="log"></div>
<div id="shape"></div>
<div id="shape"></div>
<script>
var obj = document.getElementById('shape');
var cy = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(cy, "none", "declaration should be Invalid")});
</script>
<script>
var obj = document.getElementById('shape');
var cy = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(cy, "none", "declaration should be Invalid")});
</script>
</body>
</html>
</html>

46
tests/wpt/web-platform-tests/css/css-shapes/shape-outside-invalid-circle-003.html
View file

@ -1,36 +1,36 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="flags" content="dom">
<meta charset="UTF-8">
<meta name="flags" content="dom">
<meta name="assert" content="shape-outside declaration is invalid if circle shape function has an invalid cx param">
<title>CSS Shapes Test: Circle - invalid cx value</title>
<link rel="author" title="Sherlock Zhong" href="mailto:sherlock.z0917@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 11-09-2013 TestTWF Shenzhen -->
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
<title>CSS Shapes Test: Circle - invalid cx value</title>
<link rel="author" title="Sherlock Zhong" href="mailto:sherlock.z0917@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 11-09-2013 TestTWF Shenzhen -->
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#shape{
width: 300px;
height: 300px;
shape-outside: circle(50, 50%);
width: 300px;
height: 300px;
shape-outside: circle(50, 50%);
}
</style>
</style>
</head>
<body>
<div id="log"></div>
<div id="log"></div>
<div id="shape"></div>
<div id="shape"></div>
<script>
var obj = document.getElementById('shape');
var cx = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(cx, "none", "declaration should be invalid")});
</script>
<script>
var obj = document.getElementById('shape');
var cx = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(cx, "none", "declaration should be invalid")});
</script>
</body>
</html>
</html>

42
tests/wpt/web-platform-tests/css/css-shapes/shape-outside-invalid-ellipse-004.html
View file

@ -1,35 +1,35 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="flags" content="dom">
<meta charset="UTF-8">
<meta name="flags" content="dom">
<meta name="assert" content="shape-outside declaration is invalid if ellipse function has one invalid argument">
<title>CSS Shapes Test - Ellipse - invalid 1 arg</title>
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<title>CSS Shapes Test - Ellipse - invalid 1 arg</title>
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
<style>
#shape{
width: 300px;
height: 300px;
shape-outside: ellipse(50);
width: 300px;
height: 300px;
shape-outside: ellipse(50);
}
</style>
</style>
</head>
<body>
<div id="log"></div>
<div id="log"></div>
<div id="shape"></div>
<div id="shape"></div>
<script>
var obj = document.getElementById('shape');
var ellipse = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(ellipse, "none", "declaration should be Invalid")});
</script>
<script>
var obj = document.getElementById('shape');
var ellipse = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(ellipse, "none", "declaration should be Invalid")});
</script>
</body>
</html>
</html>

42
tests/wpt/web-platform-tests/css/css-shapes/shape-outside-invalid-ellipse-005.html
View file

@ -1,35 +1,35 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="flags" content="dom">
<meta charset="UTF-8">
<meta name="flags" content="dom">
<meta name="assert" content="shape-outside declaration is invalid if cy in ellipse function is invalid">
<title>CSS Shapes Test - Ellipse - invalid cy value</title>
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<title>CSS Shapes Test - Ellipse - invalid cy value</title>
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
<style>
#shape{
width: 300px;
height: 300px;
shape-outside: ellipse(50%, 50, 50%, 50%);
width: 300px;
height: 300px;
shape-outside: ellipse(50%, 50, 50%, 50%);
}
</style>
</style>
</head>
<body>
<div id="log"></div>
<div id="log"></div>
<div id="shape"></div>
<div id="shape"></div>
<script>
var obj = document.getElementById('shape');
var ellipse = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(ellipse, "none", "declaration should be Invalid")});
</script>
<script>
var obj = document.getElementById('shape');
var ellipse = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(ellipse, "none", "declaration should be Invalid")});
</script>
</body>
</html>
</html>

42
tests/wpt/web-platform-tests/css/css-shapes/shape-outside-invalid-ellipse-006.html
View file

@ -1,35 +1,35 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="flags" content="dom">
<meta charset="UTF-8">
<meta name="flags" content="dom">
<meta name="assert" content="shape-outside declaration is invalid if cx in ellipse function is invalid">
<title>CSS Shapes Test - Ellipse - invalid cx value</title>
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<title>CSS Shapes Test - Ellipse - invalid cx value</title>
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
<style>
#shape{
width: 300px;
height: 300px;
shape-outside: ellipse(50, 50%, 50%, 50%);
width: 300px;
height: 300px;
shape-outside: ellipse(50, 50%, 50%, 50%);
}
</style>
</style>
</head>
<body>
<div id="log"></div>
<div id="log"></div>
<div id="shape"></div>
<div id="shape"></div>
<script>
var obj = document.getElementById('shape');
var ellipse = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(ellipse, "none", "declaration should be Invalid")});
</script>
<script>
var obj = document.getElementById('shape');
var ellipse = getComputedStyle(obj).shapeOutside;
test(function() {assert_equals(ellipse, "none", "declaration should be Invalid")});
</script>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-shapes/spec-examples/support/rounded-triangle.svg
View file

@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px">
<g>
<path fill="#AED8E6" d="M167.405,164.386C186.707,183.974,180,200,152.5,200H50c-27.5,0-50-22.5-50-50V44.5
C0,17,15.792,10.526,35.094,30.114L167.405,164.386z"/>
<path fill="#AED8E6" d="M167.405,164.386C186.707,183.974,180,200,152.5,200H50c-27.5,0-50-22.5-50-50V44.5
C0,17,15.792,10.526,35.094,30.114L167.405,164.386z"/>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 291 B

After

Width:  |  Height:  |  Size: 314 B

Before After
Before After

20
tests/wpt/web-platform-tests/css/css-speech/age-declarations-001.html
View file

@ -3,26 +3,26 @@
<head>
<title>CSS Test: voice-family age keywords</title>
<link rel="author" title="John Foliot" href="mailto:john@foliot.ca">
<link rel="author" title="Katherine Mancuso" href="mailto:kmancuso@gmail.com">
<link rel="author" title="Ryan Eilders" href="mailto:ryaneilders@gmail.com">
<link rel="author" title="Katherine Mancuso" href="mailto:kmancuso@gmail.com">
<link rel="author" title="Ryan Eilders" href="mailto:ryaneilders@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css3-speech/#voice-props-voice-family">
<meta name="flags" content="speech">
<meta name="assert" content="The child, young, and old values of voice-family render the text in child, young, and old voices, respectively.">
<style>
p.child { voice-family: child; }
p.young { voice-family: young; }
p.old { voice-family: old; }
<style>
p.child { voice-family: child; }
p.young { voice-family: young; }
p.old { voice-family: old; }
</style>
</style>
</head>
<body>
<p class="child">This sentence should be read in a child's voice.</p>
<p class="young">This sentence should be read in a young voice.</p>
<p class="old">This sentence should be read in a old voice.</p>
<p class="child">This sentence should be read in a child's voice.</p>
<p class="young">This sentence should be read in a young voice.</p>
<p class="old">This sentence should be read in a old voice.</p>
</body>
</html>

20
tests/wpt/web-platform-tests/css/css-speech/age-declarations-female-001.html
View file

@ -3,26 +3,26 @@
<head>
<title>CSS Test: voice-family age keywords + femal</title>
<link rel="author" title="John Foliot" href="mailto:john@foliot.ca">
<link rel="author" title="Katherine Mancuso" href="mailto:kmancuso@gmail.com">
<link rel="author" title="Ryan Eilders" href="mailto:ryaneilders@gmail.com">
<link rel="author" title="Katherine Mancuso" href="mailto:kmancuso@gmail.com">
<link rel="author" title="Ryan Eilders" href="mailto:ryaneilders@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css3-speech/#voice-props-voice-family">
<meta name="flags" content="speech">
<meta name="assert" content="The child, young, and old values of voice-family +femal render the text in child, young, and old female voices, respectively.">
<style>
p.child_f { voice-family: child female; }
p.young_f { voice-family: young female; }
p.old_f { voice-family: old female; }
<style>
p.child_f { voice-family: child female; }
p.young_f { voice-family: young female; }
p.old_f { voice-family: old female; }
</style>
</style>
</head>
<body>
<p class="child_f">This sentence should be read in a child's female voice.</p>
<p class="young_f">This sentence should be read in a young female voice.</p>
<p class="old_f">This sentence should be read in a old female voice.</p>
<p class="child_f">This sentence should be read in a child's female voice.</p>
<p class="young_f">This sentence should be read in a young female voice.</p>
<p class="old_f">This sentence should be read in a old female voice.</p>
</body>
</html>

20
tests/wpt/web-platform-tests/css/css-speech/age-declarations-male-001.html
View file

@ -3,26 +3,26 @@
<head>
<title>CSS Test: voice-family age keywords + male</title>
<link rel="author" title="John Foliot" href="mailto:john@foliot.ca">
<link rel="author" title="Katherine Mancuso" href="mailto:kmancuso@gmail.com">
<link rel="author" title="Ryan Eilders" href="mailto:ryaneilders@gmail.com">
<link rel="author" title="Katherine Mancuso" href="mailto:kmancuso@gmail.com">
<link rel="author" title="Ryan Eilders" href="mailto:ryaneilders@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css3-speech/#voice-props-voice-family">
<meta name="flags" content="speech">
<meta name="assert" content="The child, young, and old values of voice-family +male render the text in child, young, and old male voices, respectively.">
<style>
p.child_m { voice-family: child male; }
p.young_m { voice-family: young male; }
p.old_m { voice-family: old male; }
<style>
p.child_m { voice-family: child male; }
p.young_m { voice-family: young male; }
p.old_m { voice-family: old male; }
</style>
</style>
</head>
<body>
<p class="child_m">This sentence should be read in a child's male voice.</p>
<p class="young_m">This sentence should be read in a young male voice.</p>
<p class="old_m">This sentence should be read in a old male voice.</p>
<p class="child_m">This sentence should be read in a child's male voice.</p>
<p class="young_m">This sentence should be read in a young male voice.</p>
<p class="old_m">This sentence should be read in a old male voice.</p>
</body>
</html>

20
tests/wpt/web-platform-tests/css/css-speech/age-declarations-neutral-001.html
View file

@ -3,26 +3,26 @@
<head>
<title>CSS Test: voice-family age keywords + neutral</title>
<link rel="author" title="John Foliot" href="mailto:john@foliot.ca">
<link rel="author" title="Katherine Mancuso" href="mailto:kmancuso@gmail.com">
<link rel="author" title="Ryan Eilders" href="mailto:ryaneilders@gmail.com">
<link rel="author" title="Katherine Mancuso" href="mailto:kmancuso@gmail.com">
<link rel="author" title="Ryan Eilders" href="mailto:ryaneilders@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css3-speech/#voice-props-voice-family">
<meta name="flags" content="speech">
<meta name="assert" content="The child, young, and old values of voice-family + neutral render the text in child, young, and old neutral voices, respectively.">
<style>
p.child_n { voice-family: child neutral; }
p.young_n { voice-family: young neutral; }
p.old_n { voice-family: old neutral; }
<style>
p.child_n { voice-family: child neutral; }
p.young_n { voice-family: young neutral; }
p.old_n { voice-family: old neutral; }
</style>
</style>
</head>
<body>
<p class="child_n">This sentence should be read in a child's neutral voice.</p>
<p class="young_n">This sentence should be read in a young neutral voice.</p>
<p class="old_n">This sentence should be read in a old neutral voice.</p>
<p class="child_n">This sentence should be read in a child's neutral voice.</p>
<p class="young_n">This sentence should be read in a young neutral voice.</p>
<p class="old_n">This sentence should be read in a old neutral voice.</p>
</body>
</html>

16
tests/wpt/web-platform-tests/css/css-speech/generic-gender-declarations-001.html
View file

@ -8,18 +8,18 @@
<meta name="assert" content="The male, female, and neutral values of voice-family render the text in male, female, and neutral voices, respectively.">
<style>
p.male { voice-family: male; }
p.female { voice-family: female; }
p.neutral { voice-family: neutral; }
</style>
<style>
p.male { voice-family: male; }
p.female { voice-family: female; }
p.neutral { voice-family: neutral; }
</style>
</head>
<body>
<p class="male">This sentence should be read in a male voice.</p>
<p class="female">This sentence should be read in a female voice.</p>
<p class="neutral">This sentence should be read in a "neutral" voice.</p>
<p class="male">This sentence should be read in a male voice.</p>
<p class="female">This sentence should be read in a female voice.</p>
<p class="neutral">This sentence should be read in a "neutral" voice.</p>
</body>
</html>

2
tests/wpt/web-platform-tests/css/css-speech/no-voice-family-specified-001.html
View file

@ -10,7 +10,7 @@
</head>
<body>
<p>This sentence should be read in the user's preferred voice.</p>
<p>This sentence should be read in the user's preferred voice.</p>
</body>
</html>

6
tests/wpt/web-platform-tests/css/css-transitions/support/vendorPrefix.js
View file

@ -9,9 +9,9 @@ var prefixCache = {};
// convert "foo-bar" to "fooBar"
function camelCase(str) {
return str.replace(/\-(\w)/g, function(match, letter){
return letter.toUpperCase();
});
return str.replace(/\-(\w)/g, function(match, letter){
return letter.toUpperCase();
});
}
// vendor-prefix a css property

28
tests/wpt/web-platform-tests/css/css-values/attr-in-max.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Values and Units Test: attr() in max()</title>
<meta name="assert" content="The attr() function notation is allowed inside a max() notation.">
<link rel="author" title="Fuqiao Xue" href="mailto:xfq@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-values/#attr-notation">
<link rel="help" href="https://drafts.csswg.org/css-values/#calc-notation">
<link rel="match" href="reference/200-200-green.html">
<style>
html, body { margin: 0px; padding: 0px; }
html { background: white; overflow: hidden; }
#outer { position: relative; background: green; }
#outer { width: max(attr(data-test length)); height: 200px; }
</style>
</head>
<body>
<div id="outer" data-test="200px"></div>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-values/calc-in-max.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Values and Units Test: calc() in max()</title>
<meta name="assert" content="The calc() function notation is allowed inside a max() notation.">
<link rel="author" title="Fuqiao Xue" href="mailto:xfq@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-syntax">
<link rel="match" href="reference/all-green.html">
<style>
html, body { margin: 0px; padding: 0px; }
html { background: red; overflow: hidden; }
#outer { position: absolute; top: 0px; left: 0px; background: green; width: 100%; }
#outer { height: max(calc(100%)); }
</style>
</head>
<body>
<div id="outer"></div>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-values/max-20-arguments.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Values and Units Test: max() with 20 arguments</title>
<meta name="assert" content="UAs must support math function expressions of at least 20 terms.">
<link rel="author" title="Fuqiao Xue" href="mailto:xfq@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-syntax">
<link rel="match" href="reference/all-green.html">
<style>
html, body { margin: 0px; padding: 0px; }
html { background: red; overflow: hidden; }
#outer { position: absolute; top: 0px; left: 0px; background: green; width: 100%; }
#outer { height: max(5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75%, 80%, 85%, 90%, 95%, 100%); }
</style>
</head>
<body>
<div id="outer"></div>
</body>
</html>

33
tests/wpt/web-platform-tests/css/css-values/max-unitless-zero-invalid.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Values and Units Test: min() with unitless 0</title>
<meta name="assert" content="Unitless 0 isn't supported in math functions.">
<link rel="author" title="Fuqiao Xue" href="mailto:xfq@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-values/#calc-type-checking">
<link rel="match" href="reference/all-green.html">
<style>
html, body { margin: 0px; padding: 0px; }
html { background: red; overflow: hidden; }
#outer { position: absolute; top: 0px; left: 0px; background: green; width: 100%; }
#outer {
/* Assert that min() is supported */
height: min(100%);
/* The min() expression (thus the declaration) should be invalid */
height: min(0, 100%);
}
</style>
</head>
<body>
<div id="outer"></div>
</body>
</html>

12
tests/wpt/web-platform-tests/css/css-variables/reference/vars-background-shorthand-001-ref.html
View file

@ -3,12 +3,12 @@
<link rel="author" title="Lea Verou" href="mailto:lea@verou.me">
<style>
div {
width: 50px;
height: 50px;
padding: 50px;
margin: 10px;
display: inline-block;
background: green;
width: 50px;
height: 50px;
padding: 50px;
margin: 10px;
display: inline-block;
background: green;
}
</style>
<p>Test passes if you see four green squares, and no red.</p>

20
tests/wpt/web-platform-tests/css/css-variables/reference/vars-font-shorthand-001-ref.html
View file

@ -2,19 +2,19 @@
<title>CSS Variables 1: Test variables in @font-face, font-family, font shorthand.</title>
<link rel="author" title="Lea Verou" href="mailto:lea@verou.me">
<style>
div {
width: 150px;
height: 150px;
margin: 10px;
display: inline-block;
vertical-align: middle;
background: green;
text-align: center;
color: green;
overflow: hidden;
width: 150px;
height: 150px;
margin: 10px;
display: inline-block;
vertical-align: middle;
background: green;
text-align: center;
color: green;
overflow: hidden;
}
</style>

28
tests/wpt/web-platform-tests/css/css-variables/vars-background-shorthand-001.html
View file

@ -5,32 +5,32 @@
<link rel="match" href="reference/vars-background-shorthand-001-ref.html">
<style>
div {
width: 50px;
height: 50px;
padding: 50px;
margin: 10px;
display: inline-block;
background: red;
width: 50px;
height: 50px;
padding: 50px;
margin: 10px;
display: inline-block;
background: red;
}
div#d1 {
--foo: green;
background: var(--foo);
--foo: green;
background: var(--foo);
}
div#d2 {
--foo: green, green;
background: linear-gradient(var(--foo));
--foo: green, green;
background: linear-gradient(var(--foo));
}
div#d3 {
--foo: linear-gradient(green, green);
background: var(--foo);
--foo: linear-gradient(green, green);
background: var(--foo);
}
div#d4 {
--foo: center / 0 0;
background: green linear-gradient(red, red) var(--foo, );
--foo: center / 0 0;
background: green linear-gradient(red, red) var(--foo, );
}
</style>
<p>Test passes if you see four green squares, and no red.</p>

50
tests/wpt/web-platform-tests/css/css-variables/vars-font-shorthand-001.html
View file

@ -8,49 +8,49 @@
<style>
div {
width: 150px;
height: 150px;
margin: 10px;
display: inline-block;
vertical-align: middle;
background: red;
text-align: center;
color: green;
overflow: hidden;
width: 150px;
height: 150px;
margin: 10px;
display: inline-block;
vertical-align: middle;
background: red;
text-align: center;
color: green;
overflow: hidden;
}
div#d1 {
--foo: Ahem;
font-family: var(--foo);
font-size: 150px;
line-height: 1;
--foo: Ahem;
font-family: var(--foo);
font-size: 150px;
line-height: 1;
}
div#d2 {
--foo: 0 Ahem;
font: var(--foo);
font-size: 150px;
line-height: 150px;
--foo: 0 Ahem;
font: var(--foo);
font-size: 150px;
line-height: 150px;
}
div#d3 {
--foo: Ahem, sans-serif;
font: 150px/1 var(--foo);
--foo: Ahem, sans-serif;
font: 150px/1 var(--foo);
}
div#d4 {
--foo: Ahem;
font: 150px/1 var(--foo), sans-serif;
--foo: Ahem;
font: 150px/1 var(--foo), sans-serif;
}
div#d5 {
--foo: 1 Ahem;
font: 150px/var(--foo);
--foo: 1 Ahem;
font: 150px/var(--foo);
}
div#d6 {
--foo: 150px/1 Ahem;
font: var(--foo);
--foo: 150px/1 Ahem;
font: var(--foo);
}
</style>
<p>Test passes if you see six green squares, and no red.</p>

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