Update web-platform-tests to revision 50ff4f970fd8592a9f436d4e86e7d572de143260

This commit is contained in:
WPT Sync Bot 2018-09-20 21:31:18 -04:00
parent 82bbf3ad45
commit 8ea5658199
150 changed files with 4737 additions and 998 deletions

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,49 @@
[inheritance.html]
[Property text-emphasis-style inherits]
expected: FAIL
[Property text-emphasis-style has initial value none]
expected: FAIL
[Property text-decoration-style has initial value solid]
expected: FAIL
[Property text-underline-position has initial value auto]
expected: FAIL
[Property text-decoration-line has initial value none]
expected: FAIL
[Property text-emphasis-color has initial value rgba(2, 3, 4, 0.5)]
expected: FAIL
[Property text-shadow has initial value none]
expected: FAIL
[Property text-decoration-color has initial value rgba(2, 3, 4, 0.5)]
expected: FAIL
[Property text-decoration-line does not inherit]
expected: FAIL
[Property text-underline-position inherits]
expected: FAIL
[Property text-emphasis-position inherits]
expected: FAIL
[Property text-decoration-color does not inherit]
expected: FAIL
[Property text-emphasis-position has initial value over right]
expected: FAIL
[Property text-decoration-style does not inherit]
expected: FAIL
[Property text-shadow inherits]
expected: FAIL
[Property text-emphasis-color inherits]
expected: FAIL

View file

@ -71,6 +71,3 @@
[bottom intermediate]
expected: FAIL
[outline-width end]
expected: FAIL

View file

@ -1,19 +0,0 @@
[calc-integer.html]
[Accepts numbers, and rounds]
expected: FAIL
[Rounds down if fractional part is < 0.5]
expected: FAIL
[Basic division works]
expected: FAIL
[Operation between <integer> and <number> works]
expected: FAIL
[Only rounds at the end of the conversion]
expected: FAIL
[Rounds up if fractional part is >= 0.5]
expected: FAIL

View file

@ -0,0 +1,4 @@
[scroll-behavior-default-css.html]
[Testing default value of scroll-behavior]
expected: FAIL

View file

@ -0,0 +1,4 @@
[scroll-behavior-element.html]
[Testing scrollOptions' behavior for Element.scroll* and scroll-behavior on an element]
expected: FAIL

View file

@ -0,0 +1,4 @@
[scroll-behavior-main-frame-root.html]
[Page loaded]
expected: FAIL

View file

@ -0,0 +1,4 @@
[scroll-behavior-main-frame-window.html]
[Page loaded]
expected: FAIL

View file

@ -0,0 +1,4 @@
[scroll-behavior-scrollintoview-nested.html]
[scrollIntoView with nested elements with different scroll-behavior]
expected: FAIL

View file

@ -0,0 +1,55 @@
[scroll-behavior-smooth-positions.html]
[Scroll positions when performing smooth scrolling from (1000, 0) to (500, 250) using scrollIntoView() ]
expected: FAIL
[Scroll positions when performing smooth scrolling from (1000, 500) to (500, 250) using scrollTo() ]
expected: FAIL
[Scroll positions when performing smooth scrolling from (0, 0) to (500, 250) using scrollIntoView() ]
expected: FAIL
[Scroll positions when performing smooth scrolling from (1000, 500) to (500, 250) using scrollIntoView() ]
expected: FAIL
[Scroll positions when performing smooth scrolling from (0, 500) to (500, 250) using scrollTo() ]
expected: FAIL
[Scroll positions when performing smooth scrolling from (0, 500) to (500, 250) using scrollIntoView() ]
expected: FAIL
[Scroll positions when performing smooth scrolling from (0, 500) to (500, 250) using scrollBy() ]
expected: FAIL
[Scroll positions when performing smooth scrolling from (1000, 0) to (500, 250) using scrollBy() ]
expected: FAIL
[Scroll positions when aborting a smooth scrolling with an instant scrolling]
expected: FAIL
[Scroll positions when performing smooth scrolling from (1000, 500) to (500, 250) using scrollBy() ]
expected: FAIL
[Scroll positions when performing smooth scrolling from (1000, 0) to (500, 250) using scroll() ]
expected: FAIL
[Scroll positions when performing smooth scrolling from (1000, 0) to (500, 250) using scrollTo() ]
expected: FAIL
[Scroll positions when performing smooth scrolling from (0, 500) to (500, 250) using scroll() ]
expected: FAIL
[Scroll positions when aborting a smooth scrolling with another smooth scrolling]
expected: FAIL
[Scroll positions when performing smooth scrolling from (1000, 500) to (500, 250) using scroll() ]
expected: FAIL
[Scroll positions when performing smooth scrolling from (0, 0) to (500, 250) using scroll() ]
expected: FAIL
[Scroll positions when performing smooth scrolling from (0, 0) to (500, 250) using scrollTo() ]
expected: FAIL
[Scroll positions when performing smooth scrolling from (0, 0) to (500, 250) using scrollBy() ]
expected: FAIL

View file

@ -0,0 +1,5 @@
[scroll-behavior-subframe-root.html]
expected: ERROR
[iframe loaded]
expected: NOTRUN

View file

@ -0,0 +1,5 @@
[scroll-behavior-subframe-window.html]
expected: ERROR
[iframe loaded]
expected: NOTRUN

View file

@ -0,0 +1,4 @@
[overflow-serialization.html]
[CSSOM - Overflow shorthand serialization]
expected: FAIL

View file

@ -29,3 +29,6 @@
[The serialization of list-style-type: circle; list-style-position: inside; list-style-image: initial; should be canonical.]
expected: FAIL
[The serialization of overflow-x: scroll; overflow-y: hidden; should be canonical.]
expected: FAIL

View file

@ -0,0 +1,23 @@
[header-value-combining.any.html]
[response.headers.get('foo-test')]
expected: FAIL
[response.headers.get('www-authenticate')]
expected: FAIL
[header-value-combining.any.worker.html]
[response.headers.get('foo-test')]
expected: FAIL
[response.headers.get('www-authenticate')]
expected: FAIL
[header-value-combining.any.serviceworker.html]
expected: TIMEOUT
[header-value-combining.any.sharedworker.html]
[header-value-combining]
expected: FAIL

View file

@ -0,0 +1,11 @@
[stream-safe-creation.any.serviceworker.html]
expected: TIMEOUT
[stream-safe-creation.any.sharedworker.html]
[stream-safe-creation]
expected: FAIL
[stream-safe-creation.any.worker.html]
[stream-safe-creation.any.html]

View file

@ -1,5 +1,4 @@
[fetch-in-iframe.html]
expected: CRASH
[Untitled]
expected: FAIL

View file

@ -0,0 +1,4 @@
[traverse_the_history_1.html]
[Multiple history traversals from the same task]
expected: FAIL

View file

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

View file

@ -0,0 +1,28 @@
[fieldset-percentage-block-size.html]
[div (writing-mode: vertical-lr)]
expected: FAIL
[rendered legend (writing-mode: horizontal-tb)]
expected: FAIL
[second legend (writing-mode: vertical-rl)]
expected: FAIL
[rendered legend (writing-mode: vertical-lr)]
expected: FAIL
[second legend (writing-mode: horizontal-tb)]
expected: FAIL
[rendered legend (writing-mode: vertical-rl)]
expected: FAIL
[div (writing-mode: horizontal-tb)]
expected: FAIL
[div (writing-mode: vertical-rl)]
expected: FAIL
[second legend (writing-mode: vertical-lr)]
expected: FAIL

View file

@ -0,0 +1,2 @@
[legend-display-rendering.html]
expected: FAIL

View file

@ -0,0 +1,13 @@
[legend-margin-inline.html]
[right]
expected: FAIL
[center]
expected: FAIL
[10px]
expected: FAIL
[left]
expected: FAIL

View file

@ -172,63 +172,3 @@
[XHTML img usemap="http://example.org/#garbage-before-hash-id"]
expected: FAIL
[XHTML img usemap="#percent-escape-id-%41"]
expected: FAIL
[XHTML img usemap="#different-CASE-id"]
expected: FAIL
[XHTML img usemap="hash-last#"]
expected: FAIL
[XHTML img usemap="no-hash-id"]
expected: FAIL
[XHTML img usemap="#no-such-map"]
expected: FAIL
[XHTML img usemap="#percent-escape-name-%41"]
expected: FAIL
[XHTML img usemap="#"]
expected: FAIL
[XHTML img usemap="#different-CASE-name"]
expected: FAIL
[XHTML img usemap=""]
expected: FAIL
[XHTML img usemap="no-hash-name"]
expected: FAIL
[HTML (quirks) IMG usemap="#"]
expected: FAIL
[HTML (quirks) IMG usemap="no-hash-id"]
expected: FAIL
[HTML (quirks) IMG usemap="no-hash-name"]
expected: FAIL
[HTML (quirks) IMG usemap="#no-such-map"]
expected: FAIL
[HTML (quirks) IMG usemap="hash-last#"]
expected: FAIL
[HTML (quirks) IMG usemap="#different-CASE-name"]
expected: FAIL
[HTML (quirks) IMG usemap="#different-CASE-id"]
expected: FAIL
[HTML (quirks) IMG usemap=""]
expected: FAIL
[HTML (quirks) IMG usemap="#percent-escape-name-%41"]
expected: FAIL
[HTML (quirks) IMG usemap="#percent-escape-id-%41"]
expected: FAIL

View file

@ -1,14 +1,33 @@
[viewport-change.html]
type: testharness
expected: TIMEOUT
[picture: source (max-width:500px) broken image, img valid image, resize to wide]
expected: TIMEOUT
[picture: source (max-width:500px) valid image, img valid image, resize to wide]
expected: TIMEOUT
expected: FAIL
[picture: source (max-width:500px) valid image, img broken image, resize to narrow]
expected: TIMEOUT
[picture: source (max-width:500px) valid image, img valid image, resize to narrow]
expected: TIMEOUT
expected: FAIL
[picture: source (max-width:500px) broken image, img valid image, resize to narrow]
expected: FAIL
[img (srcset 1 cand) valid image, resize to wide]
expected: FAIL
[picture: same URL in source (max-width:500px) and img, resize to wide]
expected: FAIL
[img (srcset 1 cand) valid image, resize to narrow]
expected: FAIL
[picture: source (max-width:500px) valid image, img broken image, resize to wide]
expected: FAIL
[picture: same URL in source (max-width:500px) and img, resize to narrow]
expected: FAIL

View file

@ -0,0 +1,52 @@
[parse-a-sizes-attribute-display-none.html]
[<img srcset="/images/green-1x1.png?e36a 50w, /images/green-16x16.png?e36a 51w" sizes="min(1px, 100px)"> ref sizes="1px" (display:none)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e36b 50w, /images/green-16x16.png?e36b 51w" sizes="min(-100px, 1px)"> ref sizes="1px" (display:none)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e37a 50w, /images/green-16x16.png?e37a 51w" sizes="(min-width:0) min(1px, 100px)"> ref sizes="1px" (display:none)]
expected: FAIL
[<img srcset="/images/green-1x1.png?f49b 50w, /images/green-16x16.png?f49b 51w" sizes="(min-width:0) max(-200vw, 1px"> ref sizes="1px" (display:none)]
expected: FAIL
[<img srcset="/images/green-1x1.png?f49a 50w, /images/green-16x16.png?f49a 51w" sizes="(min-width:0) min(1px, 200vw"> ref sizes="1px" (display:none)]
expected: FAIL
[<img srcset="/images/green-1x1.png?f48b 50w, /images/green-16x16.png?f48b 51w" sizes="max(-200vw, 1px"> ref sizes="1px" (display:none)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e106 50w, /images/green-16x16.png?e106 51w" sizes="(min-width:0) or (unknown-general-enclosed !) 1px"> ref sizes="1px" (display:none)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e38b 50w, /images/green-16x16.png?e38b 51w" sizes="(min-width:max(-200vw, 0)) 1px"> ref sizes="1px" (display:none)]
expected: FAIL
[<img srcset="/images/green-1x1.png?f48a 50w, /images/green-16x16.png?f48a 51w" sizes="min(1px, 200vw"> ref sizes="1px" (display:none)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e61 50w, /images/green-16x16.png?e61 51w" sizes="(min-width:0) or (unknown &quot;general-enclosed&quot;) 1px"> ref sizes="1px" (display:none)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e62 50w, /images/green-16x16.png?e62 51w" sizes="(min-width:0) or unknown-general-enclosed(foo) 1px"> ref sizes="1px" (display:none)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e60 50w, /images/green-16x16.png?e60 51w" sizes="(min-width:0) or (min-width:-1px) 1px"> ref sizes="1px" (display:none)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e37b 50w, /images/green-16x16.png?e37b 51w" sizes="(min-width:0) max(-100px, 1px)"> ref sizes="1px" (display:none)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e59 50w, /images/green-16x16.png?e59 51w" sizes="(min-width:0) or (min-width:unknown-mf-value) 1px"> ref sizes="1px" (display:none)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e38a 50w, /images/green-16x16.png?e38a 51w" sizes="(min-width:min(0, 200vw)) 1px"> ref sizes="1px" (display:none)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e58 50w, /images/green-16x16.png?e58 51w" sizes="(min-width:0) or (unknown-mf-name) 1px"> ref sizes="1px" (display:none)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e38 50w, /images/green-16x16.png?e38 51w" sizes="(min-width:calc(0)) 1px"> ref sizes="1px" (display:none)]
expected: FAIL

View file

@ -0,0 +1,52 @@
[parse-a-sizes-attribute-quirks-mode.html]
[<img srcset="/images/green-1x1.png?e38b 50w, /images/green-16x16.png?e38b 51w" sizes="(min-width:max(-200vw, 0)) 1px"> ref sizes="1px" (quirks mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?f49b 50w, /images/green-16x16.png?f49b 51w" sizes="(min-width:0) max(-200vw, 1px"> ref sizes="1px" (quirks mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?f48a 50w, /images/green-16x16.png?f48a 51w" sizes="min(1px, 200vw"> ref sizes="1px" (quirks mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e36b 50w, /images/green-16x16.png?e36b 51w" sizes="min(-100px, 1px)"> ref sizes="1px" (quirks mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e62 50w, /images/green-16x16.png?e62 51w" sizes="(min-width:0) or unknown-general-enclosed(foo) 1px"> ref sizes="1px" (quirks mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e59 50w, /images/green-16x16.png?e59 51w" sizes="(min-width:0) or (min-width:unknown-mf-value) 1px"> ref sizes="1px" (quirks mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e38 50w, /images/green-16x16.png?e38 51w" sizes="(min-width:calc(0)) 1px"> ref sizes="1px" (quirks mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e60 50w, /images/green-16x16.png?e60 51w" sizes="(min-width:0) or (min-width:-1px) 1px"> ref sizes="1px" (quirks mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?f49a 50w, /images/green-16x16.png?f49a 51w" sizes="(min-width:0) min(1px, 200vw"> ref sizes="1px" (quirks mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e38a 50w, /images/green-16x16.png?e38a 51w" sizes="(min-width:min(0, 200vw)) 1px"> ref sizes="1px" (quirks mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e58 50w, /images/green-16x16.png?e58 51w" sizes="(min-width:0) or (unknown-mf-name) 1px"> ref sizes="1px" (quirks mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e37a 50w, /images/green-16x16.png?e37a 51w" sizes="(min-width:0) min(1px, 100px)"> ref sizes="1px" (quirks mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?f48b 50w, /images/green-16x16.png?f48b 51w" sizes="max(-200vw, 1px"> ref sizes="1px" (quirks mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e106 50w, /images/green-16x16.png?e106 51w" sizes="(min-width:0) or (unknown-general-enclosed !) 1px"> ref sizes="1px" (quirks mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e61 50w, /images/green-16x16.png?e61 51w" sizes="(min-width:0) or (unknown &quot;general-enclosed&quot;) 1px"> ref sizes="1px" (quirks mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e37b 50w, /images/green-16x16.png?e37b 51w" sizes="(min-width:0) max(-100px, 1px)"> ref sizes="1px" (quirks mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e36a 50w, /images/green-16x16.png?e36a 51w" sizes="min(1px, 100px)"> ref sizes="1px" (quirks mode)]
expected: FAIL

View file

@ -0,0 +1,52 @@
[parse-a-sizes-attribute-standards-mode.html]
[<img srcset="/images/green-1x1.png?e59 50w, /images/green-16x16.png?e59 51w" sizes="(min-width:0) or (min-width:unknown-mf-value) 1px"> ref sizes="1px" (standards mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e38 50w, /images/green-16x16.png?e38 51w" sizes="(min-width:calc(0)) 1px"> ref sizes="1px" (standards mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?f48b 50w, /images/green-16x16.png?f48b 51w" sizes="max(-200vw, 1px"> ref sizes="1px" (standards mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e60 50w, /images/green-16x16.png?e60 51w" sizes="(min-width:0) or (min-width:-1px) 1px"> ref sizes="1px" (standards mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e36b 50w, /images/green-16x16.png?e36b 51w" sizes="min(-100px, 1px)"> ref sizes="1px" (standards mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e37b 50w, /images/green-16x16.png?e37b 51w" sizes="(min-width:0) max(-100px, 1px)"> ref sizes="1px" (standards mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e37a 50w, /images/green-16x16.png?e37a 51w" sizes="(min-width:0) min(1px, 100px)"> ref sizes="1px" (standards mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e62 50w, /images/green-16x16.png?e62 51w" sizes="(min-width:0) or unknown-general-enclosed(foo) 1px"> ref sizes="1px" (standards mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?f49a 50w, /images/green-16x16.png?f49a 51w" sizes="(min-width:0) min(1px, 200vw"> ref sizes="1px" (standards mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e106 50w, /images/green-16x16.png?e106 51w" sizes="(min-width:0) or (unknown-general-enclosed !) 1px"> ref sizes="1px" (standards mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e38a 50w, /images/green-16x16.png?e38a 51w" sizes="(min-width:min(0, 200vw)) 1px"> ref sizes="1px" (standards mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e58 50w, /images/green-16x16.png?e58 51w" sizes="(min-width:0) or (unknown-mf-name) 1px"> ref sizes="1px" (standards mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e38b 50w, /images/green-16x16.png?e38b 51w" sizes="(min-width:max(-200vw, 0)) 1px"> ref sizes="1px" (standards mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?f48a 50w, /images/green-16x16.png?f48a 51w" sizes="min(1px, 200vw"> ref sizes="1px" (standards mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?f49b 50w, /images/green-16x16.png?f49b 51w" sizes="(min-width:0) max(-200vw, 1px"> ref sizes="1px" (standards mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e61 50w, /images/green-16x16.png?e61 51w" sizes="(min-width:0) or (unknown &quot;general-enclosed&quot;) 1px"> ref sizes="1px" (standards mode)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e36a 50w, /images/green-16x16.png?e36a 51w" sizes="min(1px, 100px)"> ref sizes="1px" (standards mode)]
expected: FAIL

View file

@ -0,0 +1,52 @@
[parse-a-sizes-attribute-width-1000px.html]
[<img srcset="/images/green-1x1.png?e37a 50w, /images/green-16x16.png?e37a 51w" sizes="(min-width:0) min(1px, 100px)"> ref sizes="1px" (width:1000px)]
expected: FAIL
[<img srcset="/images/green-1x1.png?f49b 50w, /images/green-16x16.png?f49b 51w" sizes="(min-width:0) max(-200vw, 1px"> ref sizes="1px" (width:1000px)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e38b 50w, /images/green-16x16.png?e38b 51w" sizes="(min-width:max(-200vw, 0)) 1px"> ref sizes="1px" (width:1000px)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e60 50w, /images/green-16x16.png?e60 51w" sizes="(min-width:0) or (min-width:-1px) 1px"> ref sizes="1px" (width:1000px)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e37b 50w, /images/green-16x16.png?e37b 51w" sizes="(min-width:0) max(-100px, 1px)"> ref sizes="1px" (width:1000px)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e38a 50w, /images/green-16x16.png?e38a 51w" sizes="(min-width:min(0, 200vw)) 1px"> ref sizes="1px" (width:1000px)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e61 50w, /images/green-16x16.png?e61 51w" sizes="(min-width:0) or (unknown &quot;general-enclosed&quot;) 1px"> ref sizes="1px" (width:1000px)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e36b 50w, /images/green-16x16.png?e36b 51w" sizes="min(-100px, 1px)"> ref sizes="1px" (width:1000px)]
expected: FAIL
[<img srcset="/images/green-1x1.png?f48b 50w, /images/green-16x16.png?f48b 51w" sizes="max(-200vw, 1px"> ref sizes="1px" (width:1000px)]
expected: FAIL
[<img srcset="/images/green-1x1.png?f48a 50w, /images/green-16x16.png?f48a 51w" sizes="min(1px, 200vw"> ref sizes="1px" (width:1000px)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e38 50w, /images/green-16x16.png?e38 51w" sizes="(min-width:calc(0)) 1px"> ref sizes="1px" (width:1000px)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e58 50w, /images/green-16x16.png?e58 51w" sizes="(min-width:0) or (unknown-mf-name) 1px"> ref sizes="1px" (width:1000px)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e62 50w, /images/green-16x16.png?e62 51w" sizes="(min-width:0) or unknown-general-enclosed(foo) 1px"> ref sizes="1px" (width:1000px)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e59 50w, /images/green-16x16.png?e59 51w" sizes="(min-width:0) or (min-width:unknown-mf-value) 1px"> ref sizes="1px" (width:1000px)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e106 50w, /images/green-16x16.png?e106 51w" sizes="(min-width:0) or (unknown-general-enclosed !) 1px"> ref sizes="1px" (width:1000px)]
expected: FAIL
[<img srcset="/images/green-1x1.png?e36a 50w, /images/green-16x16.png?e36a 51w" sizes="min(1px, 100px)"> ref sizes="1px" (width:1000px)]
expected: FAIL
[<img srcset="/images/green-1x1.png?f49a 50w, /images/green-16x16.png?f49a 51w" sizes="(min-width:0) min(1px, 200vw"> ref sizes="1px" (width:1000px)]
expected: FAIL

View file

@ -1,283 +0,0 @@
[quirks.html]
[top: -\\31 .5]
expected: FAIL
[bottom: -1A]
expected: FAIL
[bottom: -1a]
expected: FAIL
[top: @1]
expected: FAIL
[top: "1a"]
expected: FAIL
[top: @a]
expected: FAIL
[bottom: "1"]
expected: FAIL
[bottom: -/**/1]
expected: FAIL
[top: +/**/1]
expected: FAIL
[bottom: @1a]
expected: FAIL
[top: 1\\31 ]
expected: FAIL
[top: url('1')]
expected: FAIL
[bottom: -\\31 ]
expected: FAIL
[top: calc(1)]
expected: FAIL
[top: \\31 ]
expected: FAIL
[bottom: +1\\31 ]
expected: FAIL
[bottom: 1\\31 .5]
expected: FAIL
[bottom: #0001]
expected: FAIL
[top: calc(2 * 2px)]
expected: FAIL
[bottom: 1a]
expected: FAIL
[bottom: A]
expected: FAIL
[bottom: #01]
expected: FAIL
[top: +\\31 .5]
expected: FAIL
[bottom: #1]
expected: FAIL
[top: -/**/1]
expected: FAIL
[bottom: +\\31 .5]
expected: FAIL
[bottom: \\31 ]
expected: FAIL
[bottom: calc(1)]
expected: FAIL
[top: #001]
expected: FAIL
[top: +\\31 ]
expected: FAIL
[bottom: +\\31 ]
expected: FAIL
[top: +1.5]
expected: FAIL
[top: +1\\31 ]
expected: FAIL
[bottom: @a]
expected: FAIL
[bottom: @1]
expected: FAIL
[top: #1]
expected: FAIL
[top: 1a]
expected: FAIL
[bottom: +1a]
expected: FAIL
[bottom: +1A]
expected: FAIL
[bottom: "a"]
expected: FAIL
[top: #00001]
expected: FAIL
[bottom: -1\\31 .5]
expected: FAIL
[top: "1"]
expected: FAIL
[bottom: 1.5]
expected: FAIL
[bottom: -\\31 .5]
expected: FAIL
[bottom: url('1')]
expected: FAIL
[bottom: -1.5]
expected: FAIL
[top: \\31 .5]
expected: FAIL
[bottom: "1a"]
expected: FAIL
[bottom: calc(2 * 2px)]
expected: FAIL
[bottom: +1\\31 .5]
expected: FAIL
[bottom: 1\\31 ]
expected: FAIL
[bottom: +/**/1]
expected: FAIL
[bottom: #00001]
expected: FAIL
[top: url(1)]
expected: FAIL
[bottom: #001]
expected: FAIL
[top: +1\\31 .5]
expected: FAIL
[top: -1a]
expected: FAIL
[top: -1A]
expected: FAIL
[bottom: url(1)]
expected: FAIL
[top: a]
expected: FAIL
[top: A]
expected: FAIL
[top: #000001]
expected: FAIL
[top: 1]
expected: FAIL
[top: 1\\31 .5]
expected: FAIL
[bottom: a]
expected: FAIL
[bottom: 1]
expected: FAIL
[bottom: +1]
expected: FAIL
[bottom: #000001]
expected: FAIL
[bottom: +a]
expected: FAIL
[bottom: +A]
expected: FAIL
[top: 1.5]
expected: FAIL
[top: +A]
expected: FAIL
[top: +a]
expected: FAIL
[top: +1]
expected: FAIL
[top: -1.5]
expected: FAIL
[top: -1\\31 .5]
expected: FAIL
[top: +1a]
expected: FAIL
[top: +1A]
expected: FAIL
[top: @1a]
expected: FAIL
[bottom: \\31 .5]
expected: FAIL
[top: "a"]
expected: FAIL
[top: #01]
expected: FAIL
[bottom: +1.5]
expected: FAIL
[bottom: -A]
expected: FAIL
[bottom: -a]
expected: FAIL
[bottom: -1\\31 ]
expected: FAIL
[top: #0001]
expected: FAIL
[bottom: -1]
expected: FAIL
[top: -\\31 ]
expected: FAIL
[top: -A]
expected: FAIL
[top: -a]
expected: FAIL
[top: -1]
expected: FAIL
[top: -1\\31 ]
expected: FAIL

View file

@ -1,36 +1,30 @@
[urlencoded-parser.any.html]
[request.formData() with input: &&&a=b&&&&c=d&]
expected: FAIL
[request.formData() with input: _charset_=windows-1252&test=%C2x]
expected: FAIL
[response.formData() with input: a=b&c=d&]
expected: FAIL
[response.formData() with input: a=b&c=d]
expected: FAIL
[urlencoded-parser.any.worker.html]
[request.formData() with input: a&b&c]
expected: FAIL
[request.formData() with input: _charset_=windows-1252&test=%C2x]
expected: FAIL
[request.formData() with input: a=b&c=d]
expected: FAIL
[response.formData() with input: a&b&c]
expected: FAIL
[request.formData() with input: &&&a=b&&&&c=d&]
expected: FAIL
[request.formData() with input: a=b&c=d]
expected: FAIL
[request.formData() with input: a=b&c=d&]
expected: FAIL
[request.formData() with input: _charset_=windows-1252&test=%C2x]
expected: FAIL
[response.formData() with input: _charset_=windows-1252&test=%C2x]
expected: FAIL
[urlencoded-parser.any.worker.html]
[response.formData() with input: a=b&c=d]
expected: FAIL
[request.formData() with input: a&b&c]
expected: FAIL
[request.formData() with input: _charset_=windows-1252&test=%C2x]
expected: FAIL
[request.formData() with input: a=b&c=d]
[response.formData() with input: a=b&c=d&]
expected: FAIL

View file

@ -1,2 +1,73 @@
[realtimeanalyser-fft-scaling.html]
expected: TIMEOUT
[X 2048-point FFT peak position is not equal to 64. Got 0.]
expected: FAIL
[X 128-point FFT peak position is not equal to 4. Got 0.]
expected: FAIL
[X 32768-point FFT peak value in dBFS is not greater than or equal to -13.56. Got -1000.]
expected: FAIL
[X 64-point FFT peak value in dBFS is not greater than or equal to -13.56. Got -1000.]
expected: FAIL
[X 4096-point FFT peak value in dBFS is not greater than or equal to -13.56. Got -1000.]
expected: FAIL
[< [FFT scaling tests\] 22 out of 22 assertions were failed.]
expected: FAIL
[X 128-point FFT peak value in dBFS is not greater than or equal to -13.56. Got -1000.]
expected: FAIL
[X 8192-point FFT peak position is not equal to 256. Got 0.]
expected: FAIL
[X 32-point FFT peak value in dBFS is not greater than or equal to -14.43. Got -1000.]
expected: FAIL
[X 16384-point FFT peak value in dBFS is not greater than or equal to -13.56. Got -1000.]
expected: FAIL
[X 256-point FFT peak value in dBFS is not greater than or equal to -13.56. Got -1000.]
expected: FAIL
[X 8192-point FFT peak value in dBFS is not greater than or equal to -13.56. Got -1000.]
expected: FAIL
[X 1024-point FFT peak position is not equal to 32. Got 0.]
expected: FAIL
[X 64-point FFT peak position is not equal to 2. Got 0.]
expected: FAIL
[X 512-point FFT peak value in dBFS is not greater than or equal to -13.56. Got -1000.]
expected: FAIL
[X 32-point FFT peak position is not equal to 1. Got 0.]
expected: FAIL
[X 16384-point FFT peak position is not equal to 512. Got 0.]
expected: FAIL
[X 1024-point FFT peak value in dBFS is not greater than or equal to -13.56. Got -1000.]
expected: FAIL
[X 2048-point FFT peak value in dBFS is not greater than or equal to -13.56. Got -1000.]
expected: FAIL
[X 32768-point FFT peak position is not equal to 1024. Got 0.]
expected: FAIL
[X 4096-point FFT peak position is not equal to 128. Got 0.]
expected: FAIL
[X 512-point FFT peak position is not equal to 16. Got 0.]
expected: FAIL
[X 256-point FFT peak position is not equal to 8. Got 0.]
expected: FAIL
[# AUDIT TASK RUNNER FINISHED: 1 out of 1 tasks were failed.]
expected: FAIL

View file

@ -8,3 +8,6 @@
[# AUDIT TASK RUNNER FINISHED: 1 out of 1 tasks were failed.]
expected: FAIL
[X Max error in Allpass filter response is not less than or equal to 3.9337e-8. Got 1.]
expected: FAIL

View file

@ -8,3 +8,6 @@
[# AUDIT TASK RUNNER FINISHED: 1 out of 1 tasks were failed.]
expected: FAIL
[X Max error in Highpass filter response is not less than or equal to 1.5487e-8. Got 0.6490383096498159.]
expected: FAIL

View file

@ -8,3 +8,6 @@
[# AUDIT TASK RUNNER FINISHED: 1 out of 1 tasks were failed.]
expected: FAIL
[X Max error in Notch filter response is not less than or equal to 1.9669e-8. Got 1.]
expected: FAIL

View file

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

View file

@ -9,3 +9,6 @@
[XMLHttpRequest: getAllResponseHeaders() 2]
expected: FAIL
[XMLHttpRequest: getAllResponseHeaders() 3]
expected: FAIL

View file

@ -0,0 +1,15 @@
[getresponseheader.any.worker.html]
[getResponseHeader('foo-test')]
expected: FAIL
[getResponseHeader('www-authenticate')]
expected: FAIL
[getresponseheader.any.html]
[getResponseHeader('foo-test')]
expected: FAIL
[getResponseHeader('www-authenticate')]
expected: FAIL

View file

@ -1,17 +0,0 @@
// META: script=/service-workers/service-worker/resources/test-helpers.sub.js
// META: script=resources/utils.js
'use strict';
// "If request's url's potentially-dangling-markup flag is set, and request's
// url's scheme is an HTTP(S) scheme, then set response to a network error."
// https://github.com/whatwg/fetch/pull/519
// https://github.com/whatwg/fetch/issues/546
// This is not a comprehensive test of dangling markup detection - it is just
// intended to check that detection is enabled.
backgroundFetchTest((t, bgFetch) => {
return promise_rejects(
t, new TypeError(),
bgFetch.fetch(uniqueId(), 'https://example.com/?\n<'));
}, 'fetch to URL containing \\n and < should reject');

View file

@ -139,14 +139,12 @@ backgroundFetchTest(async (test, backgroundFetch) => {
assert_equals(results.length, 1);
assert_equals(eventRegistration.id, registration.id);
assert_equals(eventRegistration.state, 'success');
assert_equals(eventRegistration.failureReason, '');
for (const result of results) {
assert_true(result.url.includes('resources/feature-name.txt'));
assert_equals(result.status, 200);
assert_equals(result.text, 'Background Fetch');
}
assert_true(results[0].url.includes('resources/feature-name.txt'));
assert_equals(results[0].status, 200);
assert_equals(results[0].text, 'Background Fetch');
}, 'Fetches can have requests with a body');
@ -171,3 +169,25 @@ backgroundFetchTest(async (test, backgroundFetch) => {
assert_false(registration.recordsAvailable);
}, 'recordsAvailable is false after onbackgroundfetchsuccess finishes execution.');
backgroundFetchTest(async (test, backgroundFetch) => {
const registrationId = uniqueId();
const registration =
await backgroundFetch.fetch(registrationId, 'resources/missing-cat.txt');
assert_equals(registration.id, registrationId);
assert_equals(registration.result, '');
assert_equals(registration.failureReason, '');
const {type, eventRegistration, results} = await getMessageFromServiceWorker();
assert_equals(type, 'backgroundfetchfail');
assert_equals(results.length, 1);
assert_true(results[0].url.includes('resources/missing-cat.txt'));
assert_equals(results[0].status, 404);
assert_equals(results[0].text, '');
assert_equals(eventRegistration.id, registration.id);
assert_equals(eventRegistration.result, 'failure');
assert_equals(eventRegistration.failureReason, 'bad-status');
}, 'Using Background Fetch to fetch a non-existent resource should fail.');

View file

@ -13,12 +13,19 @@ async function getFetchResult(record) {
};
}
self.addEventListener('backgroundfetchsuccess', event => {
function handleBackgroundFetchUpdateEvent(event) {
event.waitUntil(
event.registration.matchAll()
.then(records => Promise.all(records.map(record => getFetchResult(record))))
.then(records =>
Promise.all(records.map(record => getFetchResult(record))))
.then(results => {
const registrationCopy = cloneRegistration(event.registration);
sendMessageToDocument({ type: event.type, eventRegistration: registrationCopy, results })
sendMessageToDocument(
{ type: event.type, eventRegistration: registrationCopy, results })
}));
});
}
self.addEventListener('backgroundfetchsuccess', handleBackgroundFetchUpdateEvent);
self.addEventListener('backgroundfetchfail', handleBackgroundFetchUpdateEvent);

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Box Alignment properties</title>
<link rel="help" href="https://drafts.csswg.org/css-align-3/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<style>
#container {
justify-items: legacy center;
}
</style>
<script>
assert_not_inherited('align-content', 'normal', 'last baseline');
assert_not_inherited('align-items', 'normal', 'last baseline');
assert_not_inherited('align-self', 'auto', 'last baseline');
assert_not_inherited('column-gap', 'normal', '10px');
assert_not_inherited('justify-content', 'normal', 'space-evenly');
assert_not_inherited('justify-items', 'legacy center', 'last baseline');
assert_not_inherited('justify-self', 'auto', 'last baseline');
assert_not_inherited('row-gap', 'normal', '10px');
</script>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Fragmentation properties</title>
<link rel="help" href="https://drafts.csswg.org/css-break/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('box-decoration-break', 'slice', 'clone');
assert_not_inherited('break-after', 'auto', 'column');
assert_not_inherited('break-before', 'auto', 'page');
assert_not_inherited('break-inside', 'auto', 'avoid');
assert_inherited('orphans', '2', '3');
assert_inherited('widows', '2', '3');
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS contain property</title>
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
<meta name="assert" content="Property 'contain' does not inherit.">
<meta name="assert" content="Property 'contain' has initial value 'none'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('contain', 'none', 'paint');
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS display property</title>
<link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties">
<meta name="assert" content="Property 'display' does not inherit.">
<meta name="assert" content="Property 'display' has initial value 'inline'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('display', 'inline', 'table');
</script>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Grid Layout properties</title>
<link rel="help" href="https://drafts.csswg.org/css-grid/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('grid-auto-columns', 'auto', '10px');
assert_not_inherited('grid-auto-flow', 'row', 'column dense');
assert_not_inherited('grid-auto-rows', 'auto', '10px');
assert_not_inherited('grid-column-end', 'auto', 'span 2');
assert_not_inherited('grid-column-start', 'auto', 'span 2');
assert_not_inherited('grid-row-end', 'auto', 'span 2');
assert_not_inherited('grid-row-start', 'auto', 'span 2');
assert_not_inherited('grid-template-areas', 'none', '"one two" "three four"');
assert_not_inherited('grid-template-columns', 'none', '10px');
assert_not_inherited('grid-template-rows', 'none', '10px');
</script>
</body>
</html>

View file

@ -0,0 +1,38 @@
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
height: 100px;
}
.test {
background: red;
--expected-block-size: 50; /* In quirks mode we should get 100px * 50% */
width: 100px;
height: 50%;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="container">
<div class="test">
<div class="child"></div>
</div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Lists properties</title>
<link rel="help" href="https://drafts.csswg.org/css-lists/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('counter-increment', 'none', 'foo 123');
assert_not_inherited('counter-reset', 'none', 'foo 123');
assert_inherited('list-style-image', 'none', 'url("https://example.com/")');
assert_inherited('list-style-position', 'outside', 'inside');
assert_inherited('list-style-type', 'disc', 'square');
</script>
</body>
</html>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Masking properties</title>
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('clip', 'auto', 'rect(10px, 20px, 30px, 40px)');
assert_not_inherited('clip-path', 'none', 'url("https://example.com/")');
assert_inherited('clip-rule', 'nonzero', 'evenodd');
assert_not_inherited('mask-border-mode', 'alpha', 'luminance');
assert_not_inherited('mask-border-outset', '0', '10px 20px 30px 40px');
assert_not_inherited('mask-border-repeat', 'stretch', 'round space');
assert_not_inherited('mask-border-slice', '0', '1 2 3 4 fill');
assert_not_inherited('mask-border-source', 'none', 'url("https://example.com/")');
assert_not_inherited('mask-border-width', 'auto', '10px 20px 30px 40px');
assert_not_inherited('mask-clip', 'border-box', 'no-clip');
assert_not_inherited('mask-composite', 'add', 'exclude');
assert_not_inherited('mask-image', 'none', 'url("https://example.com/")');
assert_not_inherited('mask-mode', 'match-source', 'luminance');
assert_not_inherited('mask-origin', 'border-box', 'padding-box');
assert_not_inherited('mask-position', '0% 0%', '10px 20px');
assert_not_inherited('mask-repeat', 'repeat', 'space round');
assert_not_inherited('mask-size', 'auto', '10px 20px');
assert_not_inherited('mask-type', 'luminance', 'alpha');
</script>
</body>
</html>

View file

@ -8,15 +8,15 @@
<div id="test-div"></div>
<script>
let div = document.getElementById("test-div");
function testOverflowShorthand(y, x) {
function testOverflowShorthand(x, y) {
test(function() {
div.style.overflowX = x;
div.style.overflowY = y;
let expectedX = getComputedStyle(div).overflowX;
let expectedY = getComputedStyle(div).overflowY;
let expectedComputedSerialization = expectedX == expectedY ? expectedX : `${expectedY} ${expectedX}`;
let expectedSpecifiedSerialization = x == y ? x : `${y} ${x}`;
let expectedComputedSerialization = expectedX == expectedY ? expectedX : `${expectedX} ${expectedY}`;
let expectedSpecifiedSerialization = x == y ? x : `${x} ${y}`;
assert_equals(div.style.overflow, expectedSpecifiedSerialization);
assert_equals(getComputedStyle(div).overflow, expectedComputedSerialization);
@ -25,18 +25,18 @@ function testOverflowShorthand(y, x) {
div.style.overflowY = "";
assert_equals(div.style.overflow, "");
div.style.overflow = `${y} ${x}`;
div.style.overflow = `${x} ${y}`;
assert_equals(div.style.overflow, expectedSpecifiedSerialization);
assert_equals(div.style.overflowX, x);
assert_equals(div.style.overflowY, y);
assert_equals(getComputedStyle(div).overflow, expectedComputedSerialization);
assert_equals(getComputedStyle(div).overflowX, expectedX);
assert_equals(getComputedStyle(div).overflowY, expectedY);
}, `overflow: ${y} ${x} works`);
}, `overflow: ${x} ${y} works`);
}
let OVERFLOW_VALUES = [ "auto", "hidden", "scroll", "visible" ];
for (let x of OVERFLOW_VALUES)
for (let y of OVERFLOW_VALUES)
testOverflowShorthand(y, x);
testOverflowShorthand(x, y);
</script>

View file

@ -44,4 +44,17 @@ test(function() {
assert_equals(innerComputedStyle.getPropertyValue('--non-inherited-length-2'), '90px');
assert_equals(innerComputedStyle.getPropertyValue('--non-inherited-length-3'), '6px');
}, "Registered properties are correctly inherited (or not) depending on the inherits flag.");
test(function(){
CSS.registerProperty({name: '--initial-length-1', syntax: '<length>', initialValue: '0px', inherits: false});
outer.style = '--initial-length-1: notalength';
inner.style = '--initial-length-1: inherit';
assert_equals(getComputedStyle(inner).getPropertyValue('--initial-length-1'), '0px');
}, "Explicitly inheriting from a parent with an invalid value results in initial value.");
test(function(){
CSS.registerProperty({name: '--initial-length-2', syntax: '<length>', initialValue: '0px', inherits: false});
inner.style = '--initial-length-2: inherit';
assert_equals(getComputedStyle(inner).getPropertyValue('--initial-length-2'), '0px');
}, "Explicitly inheriting from a parent with no value results in initial value.");
</script>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Ruby Layout properties</title>
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#property-index">
<meta name="assert" content="Properties inherit according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_inherited('ruby-align', 'space-around', 'center');
assert_inherited('ruby-position', 'over', 'under');
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Ruby Layout: parsing ruby-align with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
<meta name="assert" content="ruby-align supports only the grammar 'start | center | space-between | space-around'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("ruby-align", "auto");
test_invalid_value("ruby-align", "left");
test_invalid_value("ruby-align", "10px");
test_invalid_value("ruby-align", "center start");
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Ruby Layout: parsing ruby-align with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
<meta name="assert" content="ruby-align supports the full grammar 'start | center | space-between | space-around'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("ruby-align", "start");
test_valid_value("ruby-align", "center");
test_valid_value("ruby-align", "space-between");
test_valid_value("ruby-align", "space-around");
</script>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Ruby Layout: parsing ruby-position with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#propdef-ruby-position">
<meta name="assert" content="ruby-position supports only the grammar 'over | under | inter-character'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("ruby-position", "auto");
test_invalid_value("ruby-position", "center");
test_invalid_value("ruby-position", "above");
test_invalid_value("ruby-position", "10px 20px");
test_invalid_value("ruby-position", "over under");
</script>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Ruby Layout: parsing ruby-position with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#propdef-ruby-position">
<meta name="assert" content="ruby-position supports the full grammar 'over | under | inter-character'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("ruby-position", "over");
test_valid_value("ruby-position", "under");
test_valid_value("ruby-position", "inter-character");
</script>
</body>
</html>

View file

@ -2,8 +2,7 @@
<meta charset="UTF-8">
<style>
body {
scrollbar-track-color: blue;
scrollbar-face-color: yellow;
scrollbar-color: yellow blue;
}
html, body {
margin: 0;

View file

@ -2,8 +2,7 @@
<meta charset="UTF-8">
<style>
html {
scrollbar-track-color: blue;
scrollbar-face-color: yellow;
scrollbar-color: yellow blue;
}
html, body {
margin: 0;

View file

@ -9,8 +9,7 @@
border: 1px solid black;
width: 200px; height: 200px;
overflow: scroll;
scrollbar-track-color: blue;
scrollbar-face-color: yellow;
scrollbar-color: yellow blue;
}
#inner {
width: 400px; height: 400px;

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Shapes properties</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_not_inherited('shape-image-threshold', '0', '0.5');
assert_not_inherited('shape-margin', '0px', '10px');
assert_not_inherited('shape-outside', 'none', 'inset(10px 20px 30px 40px)');
</script>
</body>
</html>

View file

@ -0,0 +1,81 @@
<!doctype html>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<link rel="author" title="Richard Townsend" href="Richard.Townsend@arm.com" />
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-column-measures" />
<style type="text/css">
td {
padding: 0;
}
div {
/* Bug does not happen when the table's containing block is less
than (100+200+300)=600px, so make sure sure that it's larger. */
width: 750px;
}
</style>
<div>
<h1>Width Distribution</h1>
<h4>"Computing column measures"</h4>
<p>This is testing that the table's auto columns are correctly recalculated after removing and adding a <code>col</code> element.
<a href="https://www.w3.org/TR/CSS2/tables.html#auto-table-layout">Spec Text</a></p>
<hr/>
<table id="one" style="border: 1px solid orange">
<colgroup>
<col style="width: 100px" />
<col style="width: 200px" />
<col style="width: 300px;" id="hideable" />
</colgroup>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<table id="two" style="border: 1px solid orange">
<colgroup>
<col style="width: 100px; display: none;" id="displayable" />
<col style="width: 200px;" />
<col style="width: auto;" />
</colgroup>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<table id="ref" style="border: 1px solid orange">
<colgroup>
<col style="width: 100px;" />
<col style="width: 200px;" />
<col style="width: auto;" />
</colgroup>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
</div>
<script>
test(function() {
var one = document.getElementById('one');
var two = document.getElementById('two');
var ref = document.getElementById('ref');
// Force initial layout.
assert_greater_than(one.offsetWidth, ref.offsetWidth);
// Display two's colgroup and hide one's.
document.getElementById('displayable').style.display = 'table-column';
document.getElementById('hideable').style.display = 'none';
// Both tables should now match the reference.
assert_equals(one.offsetWidth, ref.offsetWidth);
assert_equals(two.offsetWidth, ref.offsetWidth);
}, "Table recalculations should match the reference");
</script>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Text Decoration properties</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<style>
#container {
color: rgba(2, 3, 4, 0.5);
}
</style>
<script>
assert_not_inherited('text-decoration-color', 'rgba(2, 3, 4, 0.5)', 'rgba(42, 53, 64, 0.75)');
assert_not_inherited('text-decoration-line', 'none', 'line-through');
assert_not_inherited('text-decoration-style', 'solid', 'dashed');
assert_inherited('text-emphasis-color', 'rgba(2, 3, 4, 0.5)', 'rgba(42, 53, 64, 0.75)');
assert_inherited('text-emphasis-position', 'over right', 'under left');
assert_inherited('text-emphasis-style', 'none', 'filled triangle');
assert_inherited('text-shadow', 'none', 'rgba(42, 53, 64, 0.75) 10px 20px 0px');
assert_inherited('text-underline-position', 'auto', 'under');
</script>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inheritance of CSS Writing Modes properties</title>
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#property-index">
<meta name="assert" content="Properties inherit or not according to the spec.">
<meta name="assert" content="Properties have initial values according to the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/inheritance-testcommon.js"></script>
</head>
<body>
<div id="container">
<div id="target"></div>
</div>
<script>
assert_inherited('direction', 'ltr', 'rtl');
assert_inherited('text-combine-upright', 'none', 'all');
assert_inherited('text-orientation', 'mixed', 'upright');
assert_not_inherited('unicode-bidi', 'normal', 'embed');
assert_inherited('writing-mode', 'horizontal-tb', 'vertical-rl');
</script>
</body>
</html>

View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<title>Testing default value of scroll-behavior</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<style>
.scrollable {
overflow: auto;
width: 400px;
height: 200px;
}
</style>
<div id="log">
</div>
<div id="overflowNode" class="scrollable">
<div style="width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);">
<span style="display: inline-block; width: 500px; height: 250px;"></span><span id="elementToReveal" style="display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;"></span>
</div>
</div>
<script>
var scrollingElement = overflowNode;
var elementToRevealLeft = 500;
var elementToRevealTop = 250;
var scrollFunction = "scroll";
promise_test(() => {
resetScroll(scrollingElement);
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, "Instant scrolling of an element with default scroll-behavior");
promise_test(() => {
resetScroll(scrollingElement);
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, "Smooth scrolling of an element with default scroll-behavior");
</script>

View file

@ -0,0 +1,163 @@
<!DOCTYPE html>
<title>Testing scrollOptions' behavior for Element.scroll* and scroll-behavior on an element</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<style>
.scrollable {
overflow: auto;
width: 400px;
height: 200px;
}
.autoBehavior {
scroll-behavior: auto;
}
.smoothBehavior {
scroll-behavior: smooth;
}
</style>
<div id="log">
</div>
<div id="overflowNode" class="scrollable">
<div style="width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);">
<span style="display: inline-block; width: 500px; height: 250px;"></span><span id="elementToReveal" style="display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;"></span>
</div>
</div>
<script>
var scrollingElement = overflowNode;
var styledElement = overflowNode;
var elementToRevealLeft = 500;
var elementToRevealTop = 250;
["scroll", "scrollTo", "scrollBy", "scrollIntoView"].forEach((scrollFunction) => {
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Element with auto scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Element with auto scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Element with auto scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Element with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Element with smooth scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Element with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Element with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Element with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`);
});
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2);
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft / 2, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop / 2, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on an element with another smooth scrolling");
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollNode(scrollingElement, "scroll", "instant", 0, 0);
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, 0, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, 0, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on an element with an instant scrolling");
</script>

View file

@ -0,0 +1,169 @@
<!DOCTYPE html>
<title>Testing scrollOptions' behavior for Element.scroll* and scroll-behavior on the root of the main frame</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<style>
body {
margin: 0;
}
.autoBehavior {
scroll-behavior: auto;
}
.smoothBehavior {
scroll-behavior: smooth;
}
</style>
<div id="log">
</div>
<div id="pageContent" style="position: absolute; left: 0; top: 0;">
<div id="elementToReveal" style="position: absolute; display: inline-block; width: 10px; height: 15px; background: black;"></div>
</div>
<script>
var pageLoaded = async_test("Page loaded");
var scrollingElement, styledElement, elementToRevealLeft, elementToRevealTop;
window.addEventListener("load", pageLoaded.step_func_done(function() {
scrollingElement = document.scrollingElement;
styledElement = document.documentElement;
pageContent.style.width = (10 + window.innerWidth) * 5 + "px";
pageContent.style.height = (20 + window.innerHeight) * 6 + "px";
elementToRevealLeft = (10 + window.innerWidth) * 3;
elementToRevealTop = (20 + window.innerHeight) * 4;
elementToReveal.style.left = elementToRevealLeft + "px";
elementToReveal.style.top = elementToRevealTop + "px";
add_completion_callback(() => { resetScroll(scrollingElement); });
["scroll", "scrollTo", "scrollBy", "scrollIntoView"].forEach((scrollFunction) => {
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`);
});
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2);
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft / 2, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop / 2, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on the main frame with another smooth scrolling");
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollNode(scrollingElement, "scroll", "instant", 0, 0);
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, 0, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, 0, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on the main frame with an instant scrolling");
}));
</script>

View file

@ -0,0 +1,169 @@
<!DOCTYPE html>
<title>Testing scrollOptions' behavior for Element.scroll* on the window of the main frame</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<style>
body {
margin: 0;
}
.autoBehavior {
scroll-behavior: auto;
}
.smoothBehavior {
scroll-behavior: smooth;
}
</style>
<div id="log">
</div>
<div id="pageContent" style="position: absolute; left: 0; top: 0;">
<div id="elementToReveal" style="position: absolute; display: inline-block; width: 10px; height: 15px; background: black;"></div>
</div>
<script>
var pageLoaded = async_test("Page loaded");
var scrollingWindow, styledElement, elementToRevealLeft, elementToRevealTop;
window.addEventListener("load", pageLoaded.step_func_done(function() {
scrollingWindow = window;
styledElement = document.documentElement;
pageContent.style.width = (10 + window.innerWidth) * 5 + "px";
pageContent.style.height = (20 + window.innerHeight) * 6 + "px";
elementToRevealLeft = (10 + window.innerWidth) * 3;
elementToRevealTop = (20 + window.innerHeight) * 4;
elementToReveal.style.left = elementToRevealLeft + "px";
elementToReveal.style.top = elementToRevealTop + "px";
add_completion_callback(() => { resetScrollForWindow(window); });
["scroll", "scrollTo", "scrollBy"].forEach((scrollFunction) => {
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`);
});
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2);
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft / 2, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop / 2, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on the main frame with another smooth scrolling");
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollWindow(scrollingWindow, "scroll", "instant", 0, 0);
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, 0, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, 0, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on the main frame with an instant scrolling");
}));
</script>

View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<title>Testing scrollOptions' behavior with scrollIntoView for nested scrolling nodes</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<style>
.scrollable {
overflow: auto;
height: 200px;
}
.smoothBehavior {
scroll-behavior: smooth;
}
.gradient {
background: linear-gradient(135deg, red, green);
}
</style>
<div id="log">
</div>
<div>
<div class="scrollable smoothBehavior" style="width: 450px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div class="scrollable smoothBehavior" style="width: 400px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div class="scrollable" style="width: 350px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div class="scrollable" style="width: 300px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div class="scrollable smoothBehavior" style="width: 250px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div class="scrollable" style="width: 200px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div id="elementToReveal" style="width: 10px; height: 10px; background: black;"></div>
<div class="gradient" style="width: 100px; height: 500px;"></div>
</div>
<div class="gradient" style="width: 100px; height: 500px;"></div>
</div>
<div class="gradient" style="width: 100px; height: 500px;"></div>
</div>
<div class="gradient" style="width: 100px; height: 500px;"></div>
</div>
<div class="gradient" style="width: 100px; height: 500px;"></div>
</div>
</div>
</div>
<script>
// The CSSOM-View spec and implementations follow different algorithms (scrolls performed in parallel, as inner-to-outer sequence or as outer-to-inner sequence).
// See https://github.com/w3c/csswg-drafts/issues/3127
promise_test(() => {
return new Promise(function(resolve, reject) {
var divs = document.querySelectorAll(".scrollable");
divs.forEach((scrollableDiv) => {
resetScroll(scrollableDiv);
});
elementToReveal.scrollIntoView({inline: "start", block: "start", behavior: "auto"});
var scrollTop = new Map();
var isSmooth = new Map();
divs.forEach((scrollableDiv) => {
scrollTop.set(scrollableDiv, scrollableDiv.scrollTop);
isSmooth.set(scrollableDiv, scrollableDiv.classList.contains("smoothBehavior"));
// If scroll operations are not performed in parallel, scroll boxes with instant behavior might also need to wait for their predecessors.
if (isSmooth.get(scrollableDiv))
assert_less_than(scrollTop.get(scrollableDiv), 500, "Element with smooth behavior should not scroll immediately");
});
observeScrolling(Array.from(divs), function(done) {
try {
divs.forEach((scrollableDiv) => {
assert_less_than_equal(scrollTop.get(scrollableDiv), scrollableDiv.scrollTop, "ScrollTop keeps increasing");
if (!isSmooth.get(scrollableDiv))
assert_any(assert_equals, scrollableDiv.scrollTop, [0, 500], "Element with instant behavior should jump to the final position");
if (done)
assert_equals(scrollableDiv.scrollTop, 500, "Final value of scrollTop");
scrollTop.set(scrollableDiv, scrollableDiv.scrollTop);
});
} catch(e) {
reject(e);
}
if (done)
resolve();
});
});
}, "scrollIntoView with nested elements with different scroll-behavior");
</script>

View file

@ -0,0 +1,151 @@
<!DOCTYPE html>
<title>Testing scroll positions when scrolling an element with smooth behavior</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<style>
.scrollable {
overflow: auto;
width: 400px;
height: 200px;
scroll-behavior: smooth;
}
</style>
<div id="log">
</div>
<div id="overflowNode" class="scrollable">
<div style="width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);">
<span style="display: inline-block; width: 500px; height: 250px;"></span><span id="elementToReveal" style="display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;"></span>
</div>
</div>
<script>
// For smooth behavior, evolution of scroll positions over time is not specified by CSSOM View.
// This test relies on the minimal assumption that scroll position functions are monotonic.
["scroll", "scrollTo", "scrollBy", "scrollIntoView"].forEach(function(scrollFunction) {
[{left:0, top:0}, {left:1000, top:0}, {left:0, top:500}, {left:1000, top:500}].forEach((initial) => {
var finalLeft = 500;
var finalTop = 250;
promise_test(() => {
return new Promise(function(resolve, reject) {
scrollNode(overflowNode, "scroll", "instant", initial.left, initial.top);
var oldLeft = overflowNode.scrollLeft;
var oldTop = overflowNode.scrollTop;
assert_equals(oldLeft, initial.left, "ScrollLeft should be at initial position");
assert_equals(oldTop, initial.top, "ScrollTop should be at initial position");
if (scrollFunction === "scrollBy")
scrollNode(overflowNode, scrollFunction, "smooth", finalLeft - initial.left, finalTop - initial.top);
else
scrollNode(overflowNode, scrollFunction, "smooth", finalLeft, finalTop);
observeScrolling(overflowNode, function(done) {
try {
var newLeft = overflowNode.scrollLeft;
var newTop = overflowNode.scrollTop;
assert_less_than_equal(Math.hypot(finalLeft - newLeft, finalTop - newTop), Math.hypot(finalLeft - oldLeft, finalTop - oldTop), "Scroll position should move towards the final position");
if (done) {
assert_equals(newLeft, finalLeft, "ScrollLeft should reach final position");
assert_equals(newTop, finalTop, "ScrollTop should reach final position");
}
oldLeft = newLeft;
oldTop = newTop;
} catch(e) {
reject(e);
}
if (done)
resolve();
});
});
}, `Scroll positions when performing smooth scrolling from (${initial.left}, ${initial.top}) to (${finalLeft}, ${finalTop}) using ${scrollFunction}() `);
});
});
promise_test(() => {
return new Promise(function(resolve, reject) {
resetScroll(overflowNode);
var initialScrollAborted = false;
var scrollDirectionChanged = false;
var oldLeft = overflowNode.scrollLeft;
var oldTop = overflowNode.scrollTop;
assert_equals(oldLeft, 0);
assert_equals(oldTop, 0);
scrollNode(overflowNode, "scroll", "smooth", 1500, 750);
observeScrolling(overflowNode, function(done) {
try {
var newLeft = overflowNode.scrollLeft;
var newTop = overflowNode.scrollTop;
if (initialScrollAborted) {
if (scrollDirectionChanged) {
assert_greater_than_equal(oldLeft, newLeft, "ScrollLeft keeps decreasing");
assert_greater_than_equal(oldTop, newTop, "ScrollTop keeps decreasing");
} else
scrollDirectionChanged = newLeft <= oldLeft && newTop <= oldTop;
} else {
assert_less_than_equal(oldLeft, newLeft, "ScrollLeft keeps increasing");
assert_less_than_equal(oldTop, newTop, "ScrollTop keeps increasing");
if (newLeft > 1000 && newTop > 500) {
// Abort the initial scroll.
initialScrollAborted = true;
scrollNode(overflowNode, "scroll", "smooth", 500, 250);
newLeft = overflowNode.scrollLeft;
newTop = overflowNode.scrollTop;
}
}
if (done) {
assert_equals(newLeft, 500, "ScrollLeft should reach final position");
assert_equals(newTop, 250, "ScrollTop should reach final position");
}
oldLeft = newLeft;
oldTop = newTop;
} catch(e) {
reject(e);
}
if (done)
resolve();
});
});
}, "Scroll positions when aborting a smooth scrolling with another smooth scrolling");
promise_test(() => {
return new Promise(function(resolve) {
resetScroll(overflowNode);
var initialScrollAborted = false;
var oldLeft = overflowNode.scrollLeft;
var oldTop = overflowNode.scrollTop;
assert_equals(oldLeft, 0);
assert_equals(oldTop, 0);
scrollNode(overflowNode, "scroll", "smooth", 1500, 750);
observeScrolling(overflowNode, function(done) {
try {
var newLeft = overflowNode.scrollLeft;
var newTop = overflowNode.scrollTop;
if (!initialScrollAborted) {
assert_less_than_equal(oldLeft, newLeft, "ScrollLeft keeps increasing");
assert_less_than_equal(oldTop, newTop, "ScrollTop keeps increasing");
if (newLeft > 1000 && newTop > 500) {
// Abort the initial scroll.
initialScrollAborted = true;
scrollNode(overflowNode, "scroll", "instant", 500, 250);
newLeft = overflowNode.scrollLeft;
newTop = overflowNode.scrollTop;
assert_equals(newLeft, 500, "ScrollLeft should reach final position");
assert_equals(newTop, 250, "ScrollTop should reach final position");
}
}
if (done) {
assert_equals(newLeft, 500, "ScrollLeft should stay at final position");
assert_equals(newTop, 250, "ScrollTop should stay at final position");
}
oldLeft = newLeft;
oldTop = newTop;
} catch(e) {
reject(e);
}
if (done)
resolve();
});
});
}, "Scroll positions when aborting a smooth scrolling with an instant scrolling");
</script>

View file

@ -0,0 +1,170 @@
<!DOCTYPE html>
<title>Testing scrollOptions' behavior for Element.scroll* and scroll-behavior on the root of a subframe</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<div id="log">
</div>
<iframe id="iframeNode" width="400px" height="200px" srcdoc="<!DOCTYPE>
<html>
<style>
body {
margin: 0;
}
.autoBehavior {
scroll-behavior: auto;
}
.smoothBehavior {
scroll-behavior: smooth;
}
</style>
<body>
<div style='width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);'>
<span style='display: inline-block; width: 500px; height: 250px;'></span><span id='elementToReveal' style='display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;'></span>
</div>
</body>
</html>">
</iframe>
<script>
var iframeLoadTest = async_test("iframe loaded");
var scrollingElement, styledElement, elementToReveal;
var elementToRevealLeft = 500;
var elementToRevealTop = 250;
iframeNode.addEventListener("load", iframeLoadTest.step_func_done(() => {
scrollingElement = iframeNode.contentDocument.scrollingElement;
styledElement = iframeNode.contentDocument.documentElement;
elementToReveal = iframeNode.contentDocument.getElementById("elementToReveal");
["scroll", "scrollTo", "scrollBy", "scrollIntoView"].forEach((scrollFunction) => {
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Subframe with auto scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Subframe with auto scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Subframe with auto scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Subframe with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Subframe with smooth scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Subframe with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Subframe with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop");
});
}, `Subframe with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`);
});
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2);
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, elementToRevealLeft / 2, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, elementToRevealTop / 2, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on a subframe with another smooth scrolling");
promise_test(() => {
resetScroll(scrollingElement);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingElement.scrollLeft, 0);
assert_equals(scrollingElement.scrollTop, 0);
scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollNode(scrollingElement, "scroll", "instant", 0, 0);
return waitForScrollEnd(scrollingElement).then(() => {
assert_equals(scrollingElement.scrollLeft, 0, "Final value of scrollLeft");
assert_equals(scrollingElement.scrollTop, 0, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on a subframe with an instant scrolling");
}));
</script>

View file

@ -0,0 +1,171 @@
<!DOCTYPE html>
<title>Testing scrollOptions' behavior for Element.scroll* and scroll-behavior on the root of a subframe</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<div id="log">
</div>
<iframe id="iframeNode" width="400px" height="200px" srcdoc="<!DOCTYPE>
<html>
<style>
body {
margin: 0;
}
.autoBehavior {
scroll-behavior: auto;
}
.smoothBehavior {
scroll-behavior: smooth;
}
</style>
<body>
<div style='width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);'>
<span style='display: inline-block; width: 500px; height: 250px;'></span><span id='elementToReveal' style='display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;'></span>
</div>
</body>
</html>">
</iframe>
<script>
var iframeLoadTest = async_test("iframe loaded");
var scrollingWindow, styledElement, elementToReveal;
var elementToRevealLeft = 500;
var elementToRevealTop = 250;
iframeNode.addEventListener("load", iframeLoadTest.step_func_done(() => {
scrollingWindow = iframeNode.contentWindow;
styledElement = iframeNode.contentDocument.documentElement;
elementToReveal = iframeNode.contentDocument.getElementById("elementToReveal");
["scroll", "scrollTo", "scrollBy"].forEach((scrollFunction) => {
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "autoBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with default behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
return new Promise((resolve) => { resolve(); });
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`);
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
});
}, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`);
});
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2);
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, elementToRevealLeft / 2, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, elementToRevealTop / 2, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on the main frame with another smooth scrolling");
promise_test(() => {
resetScrollForWindow(scrollingWindow);
setScrollBehavior(styledElement, "smoothBehavior");
assert_equals(scrollingWindow.scrollX, 0);
assert_equals(scrollingWindow.scrollY, 0);
scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
scrollWindow(scrollingWindow, "scroll", "instant", 0, 0);
return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
assert_equals(scrollingWindow.scrollX, 0, "Final value of scrollLeft");
assert_equals(scrollingWindow.scrollY, 0, "Final value of scrollTop");
});
}, "Aborting an ongoing smooth scrolling on the main frame with an instant scrolling");
}));
</script>

View file

@ -0,0 +1,87 @@
function observeScrolling(elements, callback) {
if (!Array.isArray(elements))
elements = [elements];
var lastChangedFrame = 0;
var lastLeft = new Map();
var lastTop = new Map();
elements.forEach((element) => {
lastLeft.set(element, element.scrollLeft);
lastTop.set(element, element.scrollTop);
});
function tick(frames) {
// We requestAnimationFrame either for 500 frames or until 20 frames with
// no change have been observed.
if (frames >= 500 || frames - lastChangedFrame > 20) {
callback(true);
} else {
var scrollHappened = elements.some((element) => {
return element.scrollLeft != lastLeft.get(element) || element.scrollTop != lastTop.get(element);
});
if (scrollHappened) {
lastChangedFrame = frames;
elements.forEach((element) => {
lastLeft.set(element, element.scrollLeft);
lastTop.set(element, element.scrollTop);
});
callback(false);
}
requestAnimationFrame(tick.bind(null, frames + 1));
}
}
tick(0);
}
function waitForScrollEnd(elements) {
return new Promise((resolve) => {
observeScrolling(elements, (done) => {
if (done)
resolve();
});
});
}
function resetScroll(scrollingElement) {
// Try various methods to ensure the element position is reset immediately.
scrollingElement.scrollLeft = 0;
scrollingElement.scrollTop = 0;
scrollingElement.scroll({left: 0, top: 0, behavior: "instant"});
}
function resetScrollForWindow(scrollingWindow) {
// Try various methods to ensure the element position is reset immediately.
scrollingWindow.document.scrollingElement.scrollLeft = 0;
scrollingWindow.document.scrollingElement.scrollTop = 0;
scrollingWindow.scroll({left: 0, top: 0, behavior: "instant"});
}
function setScrollBehavior(styledElement, className) {
styledElement.classList.remove("autoBehavior", "smoothBehavior");
styledElement.classList.add(className);
}
function scrollNode(scrollingElement, scrollFunction, behavior, elementToRevealLeft, elementToRevealTop) {
var args = {};
if (behavior)
args.behavior = behavior;
switch (scrollFunction) {
case "scrollIntoView":
args.inline = "start";
args.block = "start";
elementToReveal.scrollIntoView(args);
break;
default:
args.left = elementToRevealLeft;
args.top = elementToRevealTop;
scrollingElement[scrollFunction](args);
break;
}
}
function scrollWindow(scrollingWindow, scrollFunction, behavior, elementToRevealLeft, elementToRevealTop) {
var args = {};
if (behavior)
args.behavior = behavior;
args.left = elementToRevealLeft;
args.top = elementToRevealTop;
scrollingWindow[scrollFunction](args);
}

View file

@ -3,7 +3,7 @@
<title>CSSOM: resolved values of the inset properties for absolute positioning</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script type="module">

View file

@ -3,7 +3,7 @@
<title>CSSOM: resolved values of the inset properties for fixed positioning</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script type="module">

View file

@ -3,7 +3,7 @@
<title>CSSOM: resolved values of the inset properties when the element generates no box</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script type="module">

View file

@ -3,7 +3,7 @@
<title>CSSOM: resolved values of the inset properties for relative positioning</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script type="module">

View file

@ -3,7 +3,7 @@
<title>CSSOM: resolved values of the inset properties for static positioning</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script type="module">

View file

@ -3,7 +3,7 @@
<title>CSSOM: resolved values of the inset properties for sticky positioning</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script type="module">

View file

@ -22,7 +22,7 @@
assert_equals(styleSheet.cssRules[1].style.cssText, "overflow: hidden;", "Single value overflow with non-CSS-wide keyword should serialize correctly.");
assert_equals(styleSheet.cssRules[2].style.cssText, "overflow: initial;", "Overflow-x/y longhands with same CSS-wide keyword should serialize correctly.");
assert_equals(styleSheet.cssRules[3].style.cssText, "overflow: scroll;", "Overflow-x/y longhands with same non-CSS-wide keyword should serialize correctly.");
assert_equals(styleSheet.cssRules[4].style.cssText, "overflow: hidden scroll;", "Overflow-x/y longhands with different keywords should serialize correctly.");
assert_equals(styleSheet.cssRules[4].style.cssText, "overflow: scroll hidden;", "Overflow-x/y longhands with different keywords should serialize correctly.");
var div = document.createElement('div');
div.style.overflow = "inherit";
@ -42,7 +42,7 @@
div.style.overflowX = "scroll";
div.style.overflowY = "hidden";
assert_equals(div.style.overflow, "hidden scroll", "Overflow-x/y longhands with different keywords should serialize correctly.");
assert_equals(div.style.overflow, "scroll hidden", "Overflow-x/y longhands with different keywords should serialize correctly.");
});
</script>
</head>

View file

@ -32,7 +32,7 @@
'border: 1px; border-top-color: red;': 'border-width: 1px; border-top-color: red;',
'border: solid; border-style: dotted': 'border: dotted;',
'border-width: 1px;': 'border-width: 1px;',
'overflow-x: scroll; overflow-y: hidden;': 'overflow: hidden scroll;',
'overflow-x: scroll; overflow-y: hidden;': 'overflow: scroll hidden;',
'overflow-x: scroll; overflow-y: scroll;': 'overflow: scroll;',
'outline-width: 2px; outline-style: dotted; outline-color: blue;': 'outline: blue dotted 2px;',
'margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;': 'margin: 1px 2px 3px 4px;',

View file

@ -89,9 +89,9 @@ function runTestsWithWM(data, testWM, cbWM) {
function checkStyle(declarations, expected, msg) {
test(function() {
testEl.style.cssText = style + "; " + serialize({...declarations, ...testWM.style});
testEl.style.cssText = style + "; " + serialize(Object.assign({}, declarations, testWM.style));
if (containingBlockElement) {
containingBlockElement.style.cssText = serialize({...cbWM.style});
containingBlockElement.style.cssText = serialize(Object.assign({}, cbWM.style));
}
const cs = getComputedStyle(testEl);
for (let [prop, value] of Object.entries(expected)) {

View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Motion Path Module Level 1: path serialization</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/motion-1/">
<h:meta name="assert" content="computed offset-path is serialized using absolute commands"/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="target"></div>
<script>
'use strict';
test(function() {
var target = document.getElementById('target');
target.style.offsetPath = 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")';
assert_equals(target.style.offsetPath, 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")');
assert_equals(getComputedStyle(target).offsetPath, 'path("M 10 20 Q 40 80 50 70 Q 150 140 140 150")');
target.style.offsetPath = "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z')";
assert_equals(target.style.offsetPath, 'path("M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z")');
assert_equals(getComputedStyle(target).offsetPath, 'path("M 0 0 L 100 100 M 100 200 L 200 200 Z L 260 220 Z")');
target.style.offsetPath = 'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")';
assert_equals(target.style.offsetPath, 'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")');
assert_equals(getComputedStyle(target).offsetPath, 'path("M 10 20 L 30 50 Z L 60 80 Z M 80 100 L 170 160 Z T 150 220")');
target.style.offsetPath = 'path("m 10.0 170.0 h 90.00 v 30.00 m 0 0 s 1 2 3 4 z c 9 8 7 6 5 4")';
assert_equals(target.style.offsetPath, 'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 Z c 9 8 7 6 5 4")');
assert_equals(getComputedStyle(target).offsetPath, 'path("M 10 170 H 100 V 200 M 100 200 S 101 202 103 204 Z C 109 208 107 206 105 204")');
target.style.offsetPath = ' path( "m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50" ) ';
assert_equals(target.style.offsetPath, 'path("m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50")');
assert_equals(getComputedStyle(target).offsetPath, 'path("M 10 20 A 10 20 30 1 0 50 70 A 110 120 30 1 1 190 120")');
});
</script>
</body>
</html>

View file

@ -30,11 +30,11 @@ test_valid_value("offset", "path('M 0 0 H 1') 50px", "path(\"M 0 0 H 1\") 50px")
test_valid_value("offset", "path(\"M 0 0 H 1\") auto");
test_valid_value("offset", "path('M 0 0 H 1') reverse 30deg 50px", "path(\"M 0 0 H 1\") 50px reverse 30deg");
test_valid_value("offset", "path(\"M 0 0 H 1\")");
test_valid_value("offset", "path('m 0 0 h 100') -7rad 8px / auto", "path(\"m 0 0 h 100\") 8px -7rad / auto");
test_valid_value("offset", "path('m 0 0 h 100') -7rad 8px / left top", "path(\"m 0 0 h 100\") 8px -7rad / left top");
test_valid_value("offset", "path('m 20 0 h 100') -7rad 8px / auto", "path(\"m 20 0 h 100\") 8px -7rad / auto");
test_valid_value("offset", "path('m 0 30 v 100') -7rad 8px / left top", "path(\"m 0 30 v 100\") 8px -7rad / left top");
test_valid_value("offset", "path('m 0 0 h 100') -7rad 8px", "path(\"m 0 0 h 100\") 8px -7rad");
test_valid_value("offset", "path(\"m 0 0 h 100\") 100px 0deg");
test_valid_value("offset", "path('m 1 2 v 3 Z')", "path(\"m 1 2 v 3 Z\")");
test_valid_value("offset", "path(\"M 0 0 H 100\") 100px 0deg");
test_valid_value("offset", "path( 'm 1 2 v 3.00 z')", "path(\"m 1 2 v 3 Z\")");
test_valid_value("offset", "ray(farthest-corner 90deg) 1%", "ray(90deg farthest-corner) 1%");
test_valid_value("offset", "ray(sides 0deg) 50% 90deg auto", "ray(0deg sides) 50% auto 90deg");
test_valid_value("offset", "right bottom / left top");

View file

@ -21,8 +21,13 @@ test_valid_value("offset-path", "ray(270deg farthest-corner contain)");
test_valid_value("offset-path", "ray(-720deg sides)");
test_valid_value("offset-path", "ray(calc(180deg - 45deg) farthest-side)", "ray(calc(135deg) farthest-side)");
test_valid_value("offset-path", 'path("m 0 0 h -100")');
test_valid_value("offset-path", 'path("m 20 0 h -100")');
test_valid_value("offset-path", 'path("M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z")');
test_valid_value("offset-path", 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")');
test_valid_value("offset-path", 'path("M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z")');
test_valid_value("offset-path", 'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")');
test_valid_value("offset-path", 'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 z c 9 8 7 6 5 4")', 'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 Z c 9 8 7 6 5 4")');
test_valid_value("offset-path", 'path("m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50")');
test_valid_value("offset-path", 'url("http://www.example.com/index.html#polyline1")');

View file

@ -24,10 +24,10 @@ function assert_inherited(property, initial, other) {
assert_equals(getComputedStyle(container)[property], other);
assert_equals(getComputedStyle(target)[property], other);
target.style[property] = 'initial';
assert_not_equals(getComputedStyle(container)[property], other);
assert_equals(getComputedStyle(container)[property], other);
assert_not_equals(getComputedStyle(target)[property], other);
target.style[property] = 'inherit';
assert_equals(getComputedStyle(container)[property], other);
assert_equals(getComputedStyle(target)[property], other);
container.style[property] = '';
target.style[property] = '';
}, 'Property ' + property + ' inherits');

View file

@ -12,9 +12,9 @@ body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
</head>
<body>
<div style="width: 10px"></div>
<div style="width: 7px"></div>
<div style="width: 57px"></div>
<div style="width: 10px"></div>
<div style="width: 60px"></div>
<div style="width: 10px"></div>
<div style="width: 60px"></div>
<div style="width: 10px"></div>

View file

@ -2,40 +2,27 @@
layout: page
title: Chrome
---
When running Chrome, there are some additional useful command line arguments.
When running Chrome, there are some useful command line arguments.
As with most products, you can use a different binary with `--binary`, e.g., to
run Chrome Dev on Linux:
You can inform `wpt` of the release channel of Chrome using `--channel`.
However, `wpt` currently does not support installing Chrome or finding the
Chrome binary of a specific channel, so you would also need to specify the path
to the Chrome binary with `--binary`. For example, to run Chrome Dev on Linux:
```
./wpt run --binary `which google-chrome-unstable` chrome
./wpt run --channel dev --binary `which google-chrome-unstable` chrome
```
Extra arguments to Chrome can be passed with `--binary-args`.
Note: when the channel is "dev", `wpt` will *automatically* enable all
[experimental web platform features][1]
(chrome://flags/#enable-experimental-web-platform-features) by passing
`--enable-experimental-web-platform-features` to Chrome.
To enable all [experimental web platform features](https://www.chromium.org/blink/runtime-enabled-features) (chrome://flags/#enable-experimental-web-platform-features):
```
./wpt run --binary-arg=--enable-experimental-web-platform-features chrome fullscreen/
```
To enable a specific [runtime enabled feature](http://dev.chromium.org/blink/runtime-enabled-features):
If you want to enable a specific [runtime enabled feature][1], use
`--binary-arg` to specify the flag(s) that you want to pass to Chrome:
```
./wpt run --binary-arg=--enable-blink-features=AsyncClipboard chrome clipboard-apis/
```
To bypass device selection and use mock media for tests using `getUserMedia`:
```
./wpt run --binary-arg=--use-fake-ui-for-media-stream --binary-arg=--use-fake-device-for-media-stream chrome mediacapture-streams/
```
Note: there's an [open issue for doing this using WebDriver](https://github.com/web-platform-tests/wpt/issues/7424).
Some of the above are most useful in combination, e.g., to run all tests in
Chrome Dev with experimental web platform features enabled:
```
./wpt run --binary `which google-chrome-unstable` --binary-arg=--enable-experimental-web-platform-features chrome
```
[1]: https://www.chromium.org/blink/runtime-enabled-features

View file

@ -0,0 +1,9 @@
async_test(function(t) {
let crossOriginFrame = document.createElement('iframe');
crossOriginFrame.src = 'https://{{hosts[alt][]}}/common/blank.html';
document.body.appendChild(crossOriginFrame);
crossOriginFrame.addEventListener('load', t.step_func_done(function() {
let crossOriginWindow = crossOriginFrame.contentWindow;
window.addEventListener('click', crossOriginWindow);
}));
}, "EventListener.addEventListener doesn't throw when a cross origin object is passed in.");

View file

@ -0,0 +1,11 @@
// META: global=window,worker
promise_test(async t => {
const response = await fetch("../../../xhr/resources/headers-basic.asis");
assert_equals(response.headers.get("foo-test"), "1, 2, 3");
}, "response.headers.get('foo-test')");
promise_test(async t => {
const response = await fetch("../../../xhr/resources/headers-www-authenticate.asis");
assert_equals(response.headers.get("www-authenticate"), "1, 2, 3, 4");
}, "response.headers.get('www-authenticate')");

View file

@ -0,0 +1,54 @@
// META: global=worker
// These tests verify that stream creation is not affected by changes to
// Object.prototype.
const creationCases = {
fetch: async () => fetch(location.href),
request: () => new Request(location.href, {method: 'POST', body: 'hi'}),
response: () => new Response('bye'),
consumeEmptyResponse: () => new Response().text(),
consumeNonEmptyResponse: () => new Response(new Uint8Array([64])).text(),
consumeEmptyRequest: () => new Request(location.href).text(),
consumeNonEmptyRequest: () => new Request(location.href,
{method: 'POST', body: 'yes'}).arrayBuffer(),
};
for (creationCase of Object.keys(creationCases)) {
for (accessorName of ['start', 'type', 'size', 'highWaterMark']) {
promise_test(async t => {
Object.defineProperty(Object.prototype, accessorName, {
get() { throw Error(`Object.prototype.${accessorName} was accessed`); },
configurable: true
});
t.add_cleanup(() => {
delete Object.prototype[accessorName];
return Promise.resolve();
});
await creationCases[creationCase]();
}, `throwing Object.prototype.${accessorName} accessor should not affect ` +
`stream creation by '${creationCase}'`);
promise_test(async t => {
// -1 is a convenient value which is invalid, and should cause the
// constructor to throw, for all four fields.
Object.prototype[accessorName] = -1;
t.add_cleanup(() => {
delete Object.prototype[accessorName];
return Promise.resolve();
});
await creationCases[creationCase]();
}, `Object.prototype.${accessorName} accessor returning invalid value ` +
`should not affect stream creation by '${creationCase}'`);
}
promise_test(async t => {
Object.prototype.start = controller => controller.error(new Error('start'));
t.add_cleanup(() => {
delete Object.prototype.start;
return Promise.resolve();
});
await creationCases[creationCase]();
}, `Object.prototype.start function which errors the stream should not ` +
`affect stream creation by '${creationCase}'`);
}

View file

@ -9,11 +9,12 @@ var t = async_test();
onload = t.step_func(() => {
var iframe = document.querySelector("iframe");
var promiseBeforeNav = iframe.contentWindow.Promise;
var documentBeforeNav = iframe.contentDocument;
iframe.onload = t.step_func(() => {
var p = documentBeforeNav.exitFullscreen();
assert_true(p instanceof Promise, 'exitFullscreen() returns promise');
assert_true(p instanceof promiseBeforeNav, 'exitFullscreen() returns promise');
// The promise should already be rejected, so its reject callback should be
// invoked before a second promise's callback.
p.catch(t.step_func_done());

View file

@ -0,0 +1,45 @@
<!doctype html>
<title>fieldset percentage block size</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
fieldset { block-size: 100px; margin: 20px; padding: 0; border: 10px solid; }
.rendered-legend { block-size: 80%; background: lime; padding: 0; }
.second-legend { block-size: 100%; background: yellow; padding: 0; }
fieldset > div { block-size: 100%; background: fuchsia; }
</style>
<div style="writing-mode: horizontal-tb">
<fieldset>
<legend class="rendered-legend">rendered legend</legend>
<legend class="second-legend">second legend</legend>
<div>div</div>
</fieldset>
</div>
<div style="writing-mode: vertical-lr">
<fieldset>
<legend class="rendered-legend">rendered legend</legend>
<legend class="second-legend">second legend</legend>
<div>div</div>
</fieldset>
</div>
<div style="writing-mode: vertical-rl">
<fieldset>
<legend class="rendered-legend">rendered legend</legend>
<legend class="second-legend">second legend</legend>
<div>div</div>
</fieldset>
</div>
<script>
for (const div of document.querySelectorAll('div[style]')) {
for (const el of div.firstElementChild.children) {
test(() => {
const expected = el.textContent === 'rendered legend' ? '80px' : '30px';
// 30px because: 100px - (max(0, legend-block-size - border-block-start))
assert_equals(getComputedStyle(el).blockSize, expected);
}, `${el.textContent} (${div.getAttribute('style')})`);
}
}
</script>

View file

@ -4,7 +4,7 @@
body { margin: 0; }
.fieldset { margin: 2em 1em 1em 1em; border: 1em solid green; }
.legend { position: absolute; margin-top: -1em; margin-left: 1em; background: white; height: 1em; }
.inner { margin: 2em 1em 1em 1em; height: 1em; }
.inner { margin: 3em 1em 1em 1em; height: 1em; }
</style>
<p>There should be no red.</p>
<div class=fieldset>

View file

@ -4,9 +4,9 @@
<style>
body { margin: 0; }
fieldset { margin: 1em; border: 1em solid green; padding: 0; background: white; }
legend { margin: 1em; height: 1em; padding: 0; }
legend { margin: 1em 1em 2em 1em; height: 1em; padding: 0; }
.inner { margin: 1em; height: 1em; }
.behind { position: absolute; left: 1em; right: 1em; margin-top: 1em; height: 6em; background: red; z-index: -1; }
.behind { position: absolute; left: 1em; right: 1em; margin-top: 1em; height: 7em; background: red; z-index: -1; }
</style>
<p>There should be no red.</p>
<div class=behind></div>

View file

@ -0,0 +1,34 @@
<!doctype html>
<title>Reference for rendered legend and CSS display rendering</title>
<style>
body { margin: 0; }
div { width: 600px; box-sizing: border-box; background: #ddd; border: 1px solid; }
.padding { padding-left: 5em; }
.margin { margin-left: 5em; }
.cell { display: inline-block; width: 50%; }
.ruby { display: block; }
</style>
<div><span class=cell>table</span><span class=cell>table</span></div>
<div class=padding>table-row-group</div>
<div class=padding>table-header-group</div>
<div class=padding>table-footer-group</div>
<div class=padding>table-row</div>
<div class=margin>table-cell</div>
<div class=padding>table-column-group</div>
<div class=padding>table-column</div>
<div>table-caption</div>
<div>flow</div>
<div>flow-root</div>
<div>run-in</div>
<div>inline</div>
<div>inline-block</div>
<div><span class=cell>inline-table</span><span class=cell>inline-table</span></div>
<div><span class=ruby>ruby</span><span class=ruby>ruby</span></div>
<div>ruby-base</div>
<div>ruby-text</div>
<div>ruby-base-container</div>
<div>ruby-text-container</div>
<div><span class=cell>grid</span><span class=cell>grid</span></div>
<div><span class=cell>inline-grid</span><span class=cell>inline-grid</span></div>
<div><span class=cell>flex</span><span class=cell>flex</span></div>
<div><span class=cell>inline-flex</span><span class=cell>inline-flex</span></div>

View file

@ -0,0 +1,119 @@
<!doctype html>
<title>rendered legend and CSS display rendering</title>
<link rel=match href=legend-display-rendering-ref.html>
<style>
body { margin: 0; }
fieldset { margin: 0; padding: 0; border: none; }
legend { width: 600px; box-sizing: border-box; padding: 0; background: #ddd; border: 1px solid; }
[style="display: table"] span,
[style="display: inline-table"] span { display: table-cell; }
[style="display: table-row-group"],
[style="display: table-header-group"],
[style="display: table-footer-group"],
[style="display: table-row"],
[style="display: table-column-group"],
[style="display: table-column"] { padding-left: 5em; /* would be ignored if not blockified */ }
[style="display: table-cell"] { margin-left: 5em; /* would be ignored if not blockified */ }
.rb { display: ruby-base; }
.rt { display: ruby-text; }
[style="display: grid"],
[style="display: inline-grid"] { grid-template-columns: auto auto; }
[style="display: flex"] span,
[style="display: inline-flex"] span { display: block; flex-grow: 1 }
</style>
<fieldset>
<legend style="display: table"><span>table</span><span>table</span></legend>
</fieldset>
<fieldset>
<legend style="display: table-row-group">table-row-group</legend>
</fieldset>
<fieldset>
<legend style="display: table-header-group">table-header-group</legend>
</fieldset>
<fieldset>
<legend style="display: table-footer-group">table-footer-group</legend>
</fieldset>
<fieldset>
<legend style="display: table-row">table-row</legend>
</fieldset>
<fieldset>
<legend style="display: table-cell">table-cell</legend>
</fieldset>
<fieldset>
<legend style="display: table-column-group">table-column-group</legend>
</fieldset>
<fieldset>
<legend style="display: table-column">table-column</legend>
</fieldset>
<fieldset>
<legend style="display: table-caption">table-caption</legend>
</fieldset>
<fieldset>
<legend style="display: flow">flow</legend>
</fieldset>
<fieldset>
<legend style="display: flow-root">flow-root</legend>
</fieldset>
<fieldset>
<legend style="display: run-in">run-in</legend>
</fieldset>
<fieldset>
<legend style="display: inline">inline</legend>
</fieldset>
<fieldset>
<legend style="display: inline-block">inline-block</legend>
</fieldset>
<fieldset>
<legend style="display: inline-table"><span>inline-table</span><span>inline-table</span></legend>
</fieldset>
<fieldset>
<legend style="display: ruby"><span class=rb>ruby</span><span class=rt>ruby</span></legend>
</fieldset>
<fieldset>
<legend style="display: ruby-base">ruby-base</legend>
</fieldset>
<fieldset>
<legend style="display: ruby-text">ruby-text</legend>
</fieldset>
<fieldset>
<legend style="display: ruby-base-container">ruby-base-container</legend>
</fieldset>
<fieldset>
<legend style="display: ruby-text-container">ruby-text-container</legend>
</fieldset>
<fieldset>
<legend style="display: grid"><span>grid</span><span>grid</span></legend>
</fieldset>
<fieldset>
<legend style="display: inline-grid"><span>inline-grid</span><span>inline-grid</span></legend>
</fieldset>
<fieldset>
<legend style="display: flex"><span>flex</span><span>flex</span></legend>
</fieldset>
<fieldset>
<legend style="display: inline-flex"><span>inline-flex</span><span>inline-flex</span></legend>
</fieldset>

View file

@ -1,6 +1,6 @@
<!doctype html>
<title>legend and dipslay: list-item</title>
<link rel=match href=fieldset-list-item-ref.html>
<link rel=match href=legend-list-item-ref.html>
<style>
fieldset { margin: 0; padding: 0; border: none; }
legend { margin: 0 40px; padding: 0; display: list-item; }

View file

@ -0,0 +1,50 @@
<!doctype html>
<title>legend and margin (inline direction)</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
fieldset { margin: 0 0 10px 0; padding: 20px; border: 10px solid; width: 500px; }
legend { height: 10px; width: 200px; padding: 0; }
#legend-center { margin-left: auto; margin-right: auto; }
#legend-right { margin-left: auto; }
#legend-10 { margin-left: 10px; }
</style>
<fieldset>
<legend id=legend-left>left</legend>
</fieldset>
<fieldset>
<legend id=legend-center>center</legend>
</fieldset>
<fieldset>
<legend id=legend-right>right</legend>
</fieldset>
<fieldset>
<legend id=legend-10>10px</legend>
</fieldset>
<script>
const legends = document.getElementsByTagName('legend');
const [legendLeft, legendCenter, legendRight, legend10] = legends;
const expectedLeft = 8 + 10 + 20;
const expectedCenter = expectedLeft + (500 / 2) - (200 / 2);
const expectedRight = expectedLeft + 500 - 200;
const expected10 = expectedLeft + 10;
test(() => {
assert_equals(legendLeft.offsetLeft, expectedLeft);
}, 'left');
test(() => {
assert_equals(legendCenter.offsetLeft, expectedCenter);
}, 'center');
test(() => {
assert_equals(legendRight.offsetLeft, expectedRight);
}, 'right');
test(() => {
assert_equals(legend10.offsetLeft, expected10);
}, '10px');
</script>

View file

@ -28,7 +28,7 @@
test(function() {
assert_true(document.getElementById("imgTestTag2").complete);
}, "img src empty and srset omitted");
}, "img src and srcset empty");
// test if set to true after img is completely available
var t = async_test("async src complete test");

View file

@ -10,7 +10,6 @@ partial interface ServiceWorkerRegistration {
[SecureContext, Exposed=(Window,Worker)]
interface PaymentManager {
[SameObject] readonly attribute PaymentInstruments instruments;
[Exposed=Window] static Promise<PermissionState> requestPermission();
attribute DOMString userHint;
};

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