mirror of
https://github.com/servo/servo.git
synced 2025-08-04 13:10:20 +01:00
Update web-platform-tests to revision cfada7e6cb379699fa94c7ed8fcb97082327e10c
This commit is contained in:
parent
87e7e3d429
commit
06b00da16b
179 changed files with 6103 additions and 1186 deletions
|
@ -34,3 +34,6 @@
|
|||
[Revoke blob URL after creating Request, will fetch]
|
||||
expected: FAIL
|
||||
|
||||
[Revoke blob URL after calling fetch, fetch should succeed]
|
||||
expected: FAIL
|
||||
|
||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -0,0 +1,2 @@
|
|||
[float-006.xht]
|
||||
expected: FAIL
|
|
@ -0,0 +1,4 @@
|
|||
[elementFromPoint-list-001.html]
|
||||
[<li>Outside 1</li>]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
[scrollIntoView-sideways-lr-writing-mode-and-rtl-direction.html]
|
||||
[scrollIntoView({"block":"center","inline":"center"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"end","inline":"start"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"start","inline":"center"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"center","inline":"start"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"start","inline":"start"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"end","inline":"center"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"end","inline":"end"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"start","inline":"end"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"center","inline":"end"})]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
[scrollIntoView-sideways-lr-writing-mode.html]
|
||||
[scrollIntoView({"block":"center","inline":"center"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"end","inline":"start"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"start","inline":"center"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"center","inline":"start"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"start","inline":"start"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"end","inline":"center"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"end","inline":"end"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"start","inline":"end"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"center","inline":"end"})]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
[scrollIntoView-sideways-rl-writing-mode-and-rtl-direction.html]
|
||||
[scrollIntoView({"block":"center","inline":"center"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"end","inline":"start"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"start","inline":"center"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"center","inline":"start"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"start","inline":"start"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"end","inline":"center"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"end","inline":"end"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"start","inline":"end"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"center","inline":"end"})]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
[scrollIntoView-sideways-rl-writing-mode.html]
|
||||
[scrollIntoView({"block":"center","inline":"center"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"end","inline":"start"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"start","inline":"center"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"center","inline":"start"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"start","inline":"start"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"end","inline":"center"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"end","inline":"end"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"start","inline":"end"})]
|
||||
expected: FAIL
|
||||
|
||||
[scrollIntoView({"block":"center","inline":"end"})]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[selectors-case-sensitive-001.html]
|
||||
[Test element names are case-insensitive only in ASCII range]
|
||||
expected: FAIL
|
||||
|
|
@ -312,24 +312,27 @@
|
|||
[<iframe>: separate response Content-Type: */* text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html;" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/plain */*]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html */*]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html;x=" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html */*]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;x=" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html;" \\" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;" \\" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -53,3 +53,6 @@
|
|||
[combined text/javascript ]
|
||||
expected: FAIL
|
||||
|
||||
[separate text/javascript;charset=windows-1252 text/javascript]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
[traverse_the_history_1.html]
|
||||
[Multiple history traversals from the same task]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[traverse_the_history_5.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[creating_browsing_context_test_01.html]
|
||||
[first argument: absolute url]
|
||||
expected: FAIL
|
||||
|
|
@ -1,24 +1,5 @@
|
|||
[open-features-negative-innerwidth-innerheight.html]
|
||||
type: testharness
|
||||
expected: TIMEOUT
|
||||
[HTML: window.open `features`: negative values for legacy `innerwidth`, `innerheight`]
|
||||
expected: FAIL
|
||||
|
||||
[features "innerheight=-404.5" should NOT set "height=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "innerwidth=-404.5" should NOT set "width=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "innerwidth=-404" should NOT set "width=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "innerheight=-404e1" should NOT set "height=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "innerheight=-404" should NOT set "height=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "innerwidth=-404e1" should NOT set "width=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
|
@ -1,24 +1,5 @@
|
|||
[open-features-negative-top-left.html]
|
||||
type: testharness
|
||||
expected: TIMEOUT
|
||||
[HTML: window.open `features`: negative values for `top`, `left`]
|
||||
expected: FAIL
|
||||
|
||||
[features "top=-204" should NOT set "top=204"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "top=-204.5" should NOT set "top=204"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "left=-204" should NOT set "left=204"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "top=-0" should NOT set "top=204"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "left=-204.5" should NOT set "left=204"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "left=-0" should NOT set "left=204"]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
|
@ -1,24 +1,5 @@
|
|||
[open-features-negative-width-height.html]
|
||||
type: testharness
|
||||
expected: TIMEOUT
|
||||
[HTML: window.open `features`: negative values for `width`, `height`]
|
||||
expected: FAIL
|
||||
|
||||
[features "height=-404" should NOT set "height=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "height=-404e1" should NOT set "height=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "height=-404.5" should NOT set "height=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "width=-404" should NOT set "width=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "width=-404e1" should NOT set "width=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "width=-404.5" should NOT set "width=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
|
@ -1,48 +1,32 @@
|
|||
[open-features-non-integer-height.html]
|
||||
type: testharness
|
||||
expected: TIMEOUT
|
||||
[HTML: window.open `features`: non-integer values for feature `height`]
|
||||
expected: FAIL
|
||||
|
||||
[features "height=405*3" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "height=405.32" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "height=405e1" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "height=405/5" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "height=405^4" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "height=405.5" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "height=405e-1" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "height=405 " should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "height=405LLl" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "height=/404" should NOT set "height=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[top=0,left=0,width=401,: absence of feature "height" should be treated same as "height=0"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[top=0,left=0: absence of feature "height" should be treated same as "height=0"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "height=_404" should NOT set "height=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "height=L404" should NOT set "height=404"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,42 +1,32 @@
|
|||
[open-features-non-integer-innerheight.html]
|
||||
type: testharness
|
||||
expected: TIMEOUT
|
||||
[HTML: window.open `features`: non-integer values for legacy feature `innerheight`]
|
||||
expected: FAIL
|
||||
|
||||
[features "innerheight=405e-1" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "innerheight=405LLl" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "innerheight=405^4" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "innerheight=405e1" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "innerheight=405 " should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "innerheight=405/5" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "innerheight=405.32" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "innerheight=405.5" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "innerheight=405*3" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "innerheight=_404" should NOT set "height=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "innerheight=L404" should NOT set "height=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "innerheight=/404" should NOT set "height=404"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,42 +1,32 @@
|
|||
[open-features-non-integer-innerwidth.html]
|
||||
type: testharness
|
||||
expected: TIMEOUT
|
||||
[HTML: window.open `features`: non-integer values for legacy feature `innerwidth`]
|
||||
expected: FAIL
|
||||
|
||||
[features "innerwidth=405e-1" should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "innerwidth=405*3" should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "innerwidth=405.5" should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "innerwidth=405e1" should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "innerwidth=405.32" should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "innerwidth=405 " should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "innerwidth=405LLl" should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "innerwidth=405/5" should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "innerwidth=405^4" should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "innerwidth=/404" should NOT set "width=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "innerwidth=_404" should NOT set "width=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "innerwidth=L404" should NOT set "width=404"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,42 +1,32 @@
|
|||
[open-features-non-integer-left.html]
|
||||
type: testharness
|
||||
expected: TIMEOUT
|
||||
[HTML: window.open `features`: non-integer values for feature `left`]
|
||||
expected: FAIL
|
||||
|
||||
[features "left=105e1" should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "left=105 " should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "left=105/5" should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "left=105e-1" should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "left=105^4" should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "left=105LLl" should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "left=105.32" should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "left=105*3" should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "left=105.5" should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "left=L104" should NOT set "left=104"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "left=/104" should NOT set "left=104"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "left=_104" should NOT set "left=104"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,42 +1,32 @@
|
|||
[open-features-non-integer-screenx.html]
|
||||
type: testharness
|
||||
expected: TIMEOUT
|
||||
[HTML: window.open `features`: non-integer values for legacy feature `screenx`]
|
||||
expected: FAIL
|
||||
|
||||
[features "screenx=105.5" should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "screenx=105e1" should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "screenx=105 " should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "screenx=105*3" should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "screenx=105e-1" should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "screenx=105^4" should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "screenx=105LLl" should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "screenx=105/5" should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "screenx=105.32" should set "left=105"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "screenx=_104" should NOT set "left=104"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "screenx=L104" should NOT set "left=104"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "screenx=/104" should NOT set "left=104"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,42 +1,32 @@
|
|||
[open-features-non-integer-screeny.html]
|
||||
type: testharness
|
||||
expected: TIMEOUT
|
||||
[HTML: window.open `features`: non-integer values for legacy feature `screeny`]
|
||||
expected: FAIL
|
||||
|
||||
[features "screeny=405^4" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "screeny=405e-1" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "screeny=405LLl" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "screeny=405e1" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "screeny=405 " should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "screeny=405/5" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "screeny=405*3" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "screeny=405.32" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "screeny=405.5" should set "height=405"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "screeny=_404" should NOT set "height=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "screeny=L404" should NOT set "height=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "screeny=/404" should NOT set "height=404"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,42 +1,32 @@
|
|||
[open-features-non-integer-top.html]
|
||||
type: testharness
|
||||
expected: TIMEOUT
|
||||
[HTML: window.open `features`: non-integer values for feature `top`]
|
||||
expected: FAIL
|
||||
|
||||
[features "top=105/5" should set "top=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "top=105*3" should set "top=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "top=105LLl" should set "top=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "top=105e-1" should set "top=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "top=105.32" should set "top=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "top=105e1" should set "top=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "top=105 " should set "top=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "top=105^4" should set "top=105"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "top=105.5" should set "top=105"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "top=/104" should NOT set "top=104"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "top=_104" should NOT set "top=104"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "top=L104" should NOT set "top=104"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,48 +1,32 @@
|
|||
[open-features-non-integer-width.html]
|
||||
type: testharness
|
||||
expected: TIMEOUT
|
||||
[HTML: window.open `features`: non-integer values for feature `width`]
|
||||
expected: FAIL
|
||||
|
||||
[features "width=405^4" should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "width=405.5" should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "width=405e1" should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "width=405 " should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "width=405.32" should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "width=405LLl" should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "width=405*3" should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "width=405e-1" should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[features "width=405/5" should set "width=405"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[top=0,left=0: absence of feature "width" should be treated same as "width=0"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "width=_404" should NOT set "width=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[top=0,left=0,height=401,: absence of feature "width" should be treated same as "width=0"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "width=/404" should NOT set "width=404"]
|
||||
expected: TIMEOUT
|
||||
|
||||
[features "width=L404" should NOT set "width=404"]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,11 +1,7 @@
|
|||
[form-submission-algorithm.html]
|
||||
expected: TIMEOUT
|
||||
[If form's firing submission events is true, then return; 'submit' event]
|
||||
expected: FAIL
|
||||
|
||||
[If form's firing submission events is true, then return; 'invalid' event]
|
||||
expected: FAIL
|
||||
|
||||
[Cannot navigate (after constructing the entry list)]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
[toggleEvent.html]
|
||||
[Calling open twice on 'details' fires only one toggle event]
|
||||
expected: FAIL
|
||||
|
||||
[Setting open=true to opened 'details' element should not fire a toggle event at the 'details' element]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[DOMContentLoaded-defer.html]
|
||||
[The end: DOMContentLoaded and defer scripts]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
[promise-rejection-events.html]
|
||||
expected: TIMEOUT
|
||||
[delayed handling: delaying handling rejected promise created from createImageBitmap will cause both events to fire]
|
||||
expected: FAIL
|
||||
|
||||
|
@ -9,6 +8,3 @@
|
|||
[no unhandledrejection/rejectionhandled: rejection handler attached synchronously to a promise created from createImageBitmap]
|
||||
expected: FAIL
|
||||
|
||||
[rejectionhandled is dispatched from a queued task, and not immediately]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
|
@ -11,3 +11,6 @@
|
|||
[The iframe should have one resource timing entry.]
|
||||
expected: FAIL
|
||||
|
||||
[responseEnd should not be 0 in timing-allow cross-origin request.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
[realtimeanalyser-fft-scaling.html]
|
||||
expected: TIMEOUT
|
||||
[X 2048-point FFT peak position is not equal to 64. Got 0.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -14,3 +14,15 @@
|
|||
[X 5: buffer.copyToChannel(x, 0, 16) incorrectly threw IndexSizeError: "The index is not in the allowed range.".]
|
||||
expected: FAIL
|
||||
|
||||
[X 4: buffer.copyToChannel(x, 0, -1) incorrectly threw IndexSizeError: "The index is not in the allowed range.".]
|
||||
expected: FAIL
|
||||
|
||||
[< [copyFrom-exceptions\] 2 out of 11 assertions were failed.]
|
||||
expected: FAIL
|
||||
|
||||
[< [copyTo-exceptions\] 2 out of 10 assertions were failed.]
|
||||
expected: FAIL
|
||||
|
||||
[X 5: buffer.copyFromChannel(x, 0, -1) incorrectly threw IndexSizeError: "The index is not in the allowed range.".]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -146,3 +146,9 @@
|
|||
[X SNR (NaN dB) is not greater than or equal to 65.737. Got NaN.]
|
||||
expected: FAIL
|
||||
|
||||
[X Stitched sine-wave buffers at sample rate 43800 does not equal [0,0.06264832615852356,0.12505052983760834,0.18696144223213196,0.24813786149024963,0.308339387178421,0.36732959747314453,0.4248766601085663,0.480754554271698,0.5347436666488647,0.5866320133209229,0.6362156271934509,0.6832997798919678,0.7276994585990906,0.7692402601242065,0.8077589869499207...\] with an element-wise tolerance of {"absoluteThreshold":0.0038986,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[30\]\t9.4836157560348511e-1\t9.5236867666244507e-1\t4.0071010589599609e-3\t4.2075103446311962e-3\t3.8985999999999999e-3\n\t[31\]\t9.2646563053131104e-1\t9.3139332532882690e-1\t4.9276947975158691e-3\t5.2906700783754857e-3\t3.8985999999999999e-3\n\t[32\]\t9.0087991952896118e-1\t9.0675884485244751e-1\t5.8789253234863281e-3\t6.4834496590358351e-3\t3.8985999999999999e-3\n\t[33\]\t8.7170630693435669e-1\t8.7856203317642212e-1\t6.8557262420654297e-3\t7.8033490899654511e-3\t3.8985999999999999e-3\n\t[34\]\t8.3906102180480957e-1\t8.4691369533538818e-1\t7.8526735305786133e-3\t9.2721059699818163e-3\t3.8985999999999999e-3\n\t...and 31037 more errors.\n\tMax AbsError of 1.0350983311555801e+21 at index of 39267.\n\t[39267\]\t-1.0350983311555801e+21\t-9.8276454210281372e-1\t1.0350983311555801e+21\t1.0532516048460481e+21\t3.8985999999999999e-3\n\tMax RelError of 2.1757020142640641e+21 at index of 20238.\n\t[20238\]\t-1.0350893239563253e+21\t-4.7574958205223083e-1\t1.0350893239563253e+21\t2.1757020142640641e+21\t3.8985999999999999e-3\n]
|
||||
expected: FAIL
|
||||
|
||||
[X SNR (-379.8758083905784 dB) is not greater than or equal to 65.737. Got -379.8758083905784.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
[xrBoundedReferenceSpace_updates.https.html]
|
||||
expected: ERROR
|
||||
expected: TIMEOUT
|
||||
['XRBoundedReferenceSpace updates properly when the changes are applied]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
|
@ -31,9 +31,16 @@ function wait_for_message(iframe) {
|
|||
const script =
|
||||
'<script>' +
|
||||
' window.onmessage = () => {' +
|
||||
' try { ' +
|
||||
' if (!indexedDB || !indexedDB.databases) {' +
|
||||
' window.parent.postMessage({result: "indexedDB.databases undefined"}, "*")' +
|
||||
' }' +
|
||||
' indexedDB.databases().then(' +
|
||||
' () => window.parent.postMessage({result: "no exception"}, "*"),' +
|
||||
' ex => window.parent.postMessage({result: ex.name}, "*"));' +
|
||||
' } catch(e) { ' +
|
||||
' window.parent.postMessage({result: e.name + " thrown, not rejected"}, "*")' +
|
||||
' }'+
|
||||
' };' +
|
||||
'<\/script>';
|
||||
|
||||
|
@ -50,6 +57,6 @@ promise_test(async t => {
|
|||
iframe.contentWindow.postMessage({}, '*');
|
||||
const message = await wait_for_message(iframe);
|
||||
assert_equals(message.result, 'SecurityError',
|
||||
'Exception should be SecurityError');
|
||||
'Promise should be rejected with SecurityError');
|
||||
}, 'IDBFactory.databases() in sandboxed iframe should reject');
|
||||
</script>
|
||||
|
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#float-width" title="10.3.5 Floating, non-replaced elements">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div style="width: 0px;">
|
||||
<div style="float: left; width: 100px; height: 50px; background: green;"></div>
|
||||
<div style="float: left; width: 100px; height: 50px; background: green;"></div>
|
||||
</div>
|
||||
|
|
@ -19,10 +19,15 @@
|
|||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("flex-basis", "1px");
|
||||
test_computed_value("flex-basis", "calc(10px + 0.5em)", "30px");
|
||||
test_computed_value("flex-basis", "calc(10px - 0.5em)", "0px");
|
||||
test_computed_value("flex-basis", "400%");
|
||||
test_computed_value("flex-basis", "auto");
|
||||
|
||||
test_computed_value("flex-basis", "calc(10px + 0.5em)", "30px");
|
||||
test_computed_value("flex-basis", "calc(10px - 0.5em)", "0px");
|
||||
test_computed_value("flex-basis", "calc(10%)", "10%");
|
||||
// https://github.com/w3c/csswg-drafts/issues/3482
|
||||
test_computed_value("flex-basis", "calc(0% + 10px)", "calc(0% + 10px)");
|
||||
test_computed_value("flex-basis", "calc(10% + 0px)", "10%");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<title>CSS test reference</title>
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<style>
|
||||
.ancestor {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: fixed;
|
||||
left: 100px;
|
||||
top: 0;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<div class="ancestor"></div>
|
|
@ -0,0 +1,30 @@
|
|||
<!doctype html>
|
||||
<title>CSS test: movement of fixed-position ancestor correctly moves fixed-position descendant depending on the static position</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position/#size-and-position-details">
|
||||
<link rel="match" href="hypothetical-dynamic-change-001-ref.html">
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<style>
|
||||
.ancestor, .child {
|
||||
position: fixed;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
/* NOTE: child remains auto-positioned */
|
||||
}
|
||||
.ancestor {
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<div class="ancestor">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
<script>
|
||||
onload = function() {
|
||||
let ancestor = document.querySelector(".ancestor");
|
||||
window.unused = ancestor.getBoundingClientRect();
|
||||
ancestor.style.left = "100px";
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,33 @@
|
|||
<!doctype html>
|
||||
<title>CSS test: movement of absolute-position ancestor correctly moves fixed-position descendant depending on the static position</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position/#size-and-position-details">
|
||||
<link rel="match" href="hypothetical-dynamic-change-001-ref.html">
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<style>
|
||||
.ancestor, .child {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
.child {
|
||||
position: fixed;
|
||||
/* NOTE: child remains auto-positioned */
|
||||
}
|
||||
.ancestor {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<div class="ancestor">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
<script>
|
||||
onload = function() {
|
||||
let ancestor = document.querySelector(".ancestor");
|
||||
window.unused = ancestor.getBoundingClientRect();
|
||||
ancestor.style.left = "100px";
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<title>CSS test: movement of relative-position ancestor correctly moves fixed-position descendant depending on the static position</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position/#size-and-position-details">
|
||||
<link rel="match" href="hypothetical-dynamic-change-001-ref.html">
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<style>
|
||||
body { margin: 0 }
|
||||
.ancestor, .child {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
.child {
|
||||
position: fixed;
|
||||
/* NOTE: child remains auto-positioned */
|
||||
}
|
||||
.ancestor {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<div class="ancestor">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
<script>
|
||||
onload = function() {
|
||||
let ancestor = document.querySelector(".ancestor");
|
||||
window.unused = ancestor.getBoundingClientRect();
|
||||
ancestor.style.left = "100px";
|
||||
}
|
||||
</script>
|
|
@ -142,3 +142,41 @@ test(function() {
|
|||
assert_equals(computedStyle.transitionProperty, 'water');
|
||||
}, "A var() cycle between a syntax:'*' property and an unregistered property is handled correctly.");
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#test5_parent {
|
||||
--registered-5-c:foo;
|
||||
--registered-5-d:bar;
|
||||
--registered-5-e:baz;
|
||||
color: green;
|
||||
}
|
||||
#test5 {
|
||||
--registered-5-a:var(--registered-5-b,hello);
|
||||
--registered-5-b:var(--registered-5-a,world);
|
||||
|
||||
--registered-5-c:var(--registered-5-a);
|
||||
--registered-5-d:var(--registered-5-b);
|
||||
--registered-5-e:var(--unknown);
|
||||
color: var(--registered-5-e);
|
||||
}
|
||||
</style>
|
||||
<div id=test5_parent>
|
||||
<div id=test5></div>
|
||||
</div>
|
||||
<script>
|
||||
test(function() {
|
||||
CSS.registerProperty({name: '--registered-5-a', syntax: '*', inherits: true});
|
||||
CSS.registerProperty({name: '--registered-5-b', syntax: '*', inherits: true});
|
||||
CSS.registerProperty({name: '--registered-5-c', syntax: '*', inherits: true});
|
||||
CSS.registerProperty({name: '--registered-5-d', syntax: '*', inherits: true});
|
||||
CSS.registerProperty({name: '--registered-5-e', syntax: '*', inherits: true});
|
||||
|
||||
let computedStyle = getComputedStyle(test5);
|
||||
assert_equals(computedStyle.getPropertyValue('--registered-5-a'), '');
|
||||
assert_equals(computedStyle.getPropertyValue('--registered-5-b'), '');
|
||||
assert_equals(computedStyle.getPropertyValue('--registered-5-c'), 'foo');
|
||||
assert_equals(computedStyle.getPropertyValue('--registered-5-d'), 'bar');
|
||||
assert_equals(computedStyle.getPropertyValue('--registered-5-e'), 'baz');
|
||||
assert_equals(computedStyle.getPropertyValue('color'), 'rgb(0, 128, 0)');
|
||||
}, "Invalid at computed-value time triggers 'unset' behavior");
|
||||
</script>
|
||||
|
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1568778">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/#suppression-triggers">
|
||||
<style>
|
||||
#hidden {
|
||||
display: none;
|
||||
background: red;
|
||||
}
|
||||
#spacer {
|
||||
height: calc(100vh + 200px); /* At least 200px of scroll range */
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>1
|
||||
<th>1
|
||||
<th>1
|
||||
<th>1
|
||||
</tr>
|
||||
</thead>
|
||||
<thead id="hidden">
|
||||
<tr>
|
||||
<th>1
|
||||
<th>1
|
||||
<th>1
|
||||
<th>1
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>0 <td>0 <td>0 <td>0 </tr>
|
||||
<tr><td>0 <td>0 <td>0 <td>0 </tr>
|
||||
<tr><td>0 <td>0 <td>0 <td>0 </tr>
|
||||
<tr><td>0 <td>0 <td>0 <td>0 </tr>
|
||||
<tr><td>0 <td>0 <td>0 <td>0 </tr>
|
||||
<tr><td>0 <td>0 <td>0 <td>0 </tr>
|
||||
<tr><td>0 <td>0 <td>0 <td>0 </tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="spacer"></div>
|
||||
<script>
|
||||
let isFirstEvent = true;
|
||||
const targetScrollPosition = 100;
|
||||
const hidden = document.querySelector("#hidden");
|
||||
const t = async_test("Scroll offset doesn't get stuck in infinite scroll events when an element goes back and forth to display: none while changing abspos style");
|
||||
window.onscroll = t.step_func(function() {
|
||||
hidden.style.display = "block";
|
||||
hidden.style.position = "absolute";
|
||||
hidden.style.visibility = "hidden";
|
||||
window.unused = hidden.offsetHeight;
|
||||
hidden.style.display = "";
|
||||
hidden.style.position = "";
|
||||
hidden.style.visibility = "";
|
||||
|
||||
assert_true(isFirstEvent, "Shouldn't get more than one scroll event");
|
||||
isFirstEvent = false;
|
||||
requestAnimationFrame(t.step_func(function() {
|
||||
requestAnimationFrame(t.step_func_done(function() {
|
||||
assert_equals(document.scrollingElement.scrollTop, targetScrollPosition);
|
||||
}));
|
||||
}));
|
||||
});
|
||||
|
||||
window.onload = t.step_func(function() {
|
||||
window.scrollTo(0, targetScrollPosition);
|
||||
});
|
||||
</script>
|
|
@ -0,0 +1,57 @@
|
|||
<!doctype html>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#get-a-value-from-a-stylepropertymap">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">
|
||||
<meta name="assert" content="Tests computed StylePropertyMap.get of auto minimum sizes." />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../resources/testhelper.js"></script>
|
||||
<div style="display: flex;">
|
||||
<div id="flex-inflow"></div>
|
||||
<div id="flex-absolute" style="position: absolute;"></div>
|
||||
</div>
|
||||
<div style="display: grid;">
|
||||
<div id="grid-inflow"></div>
|
||||
<div id="grid-absolute" style="position: absolute;"></div>
|
||||
</div>
|
||||
<div id="block-inflow"></div>
|
||||
<div id="block-absolute" style="position: absolute;"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(t => {
|
||||
const targetMap = document.getElementById('flex-inflow').computedStyleMap();
|
||||
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
|
||||
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
|
||||
}, 'An inflow flex-item computed StylePropertyMap.get reports the auto minimum size correctly.');
|
||||
|
||||
test(t => {
|
||||
const targetMap = document.getElementById('flex-absolute').computedStyleMap();
|
||||
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
|
||||
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
|
||||
}, 'An absolute flex-child computed StylePropertyMap.get reports the auto minimum size correctly.');
|
||||
|
||||
test(t => {
|
||||
const targetMap = document.getElementById('grid-inflow').computedStyleMap();
|
||||
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
|
||||
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
|
||||
}, 'An inflow grid-item computed StylePropertyMap.get reports the auto minimum size correctly.');
|
||||
|
||||
test(t => {
|
||||
const targetMap = document.getElementById('grid-absolute').computedStyleMap();
|
||||
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
|
||||
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
|
||||
}, 'An absolute grid-child computed StylePropertyMap.get reports the auto minimum size correctly.');
|
||||
|
||||
test(t => {
|
||||
const targetMap = document.getElementById('block-inflow').computedStyleMap();
|
||||
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
|
||||
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
|
||||
}, 'An inflow block computed StylePropertyMap.get reports the auto minimum size correctly.');
|
||||
|
||||
test(t => {
|
||||
const targetMap = document.getElementById('block-absolute').computedStyleMap();
|
||||
assert_style_value_equals(targetMap.get('min-width'), new CSSKeywordValue('auto'));
|
||||
assert_style_value_equals(targetMap.get('min-height'), new CSSKeywordValue('auto'));
|
||||
}, 'An absolute block computed StylePropertyMap.get reports the auto minimum size correctly.');
|
||||
|
||||
</script>
|
Binary file not shown.
After Width: | Height: | Size: 3.9 KiB |
|
@ -1,37 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
|
||||
<meta content="image" name="flags" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
img
|
||||
{
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img + img
|
||||
{
|
||||
padding-left: 1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div><img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is an orange square
|
||||
in the <strong>upper-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -1,51 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to body element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode" />
|
||||
<link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1102175" title="Bug 1102175: <body> with writing-mode: vertical-rl does not align children to the right " />
|
||||
<link rel="match" href="block-flow-direction-025-ref.xht" />
|
||||
|
||||
<meta name="flags" content="image" />
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element." />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
html
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled" /></p>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a blue square in the
|
||||
<strong>upper-right corner</strong> of the page.
|
||||
-->
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -1,49 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to body element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode" />
|
||||
<link rel="match" href="block-flow-direction-025-ref.xht" />
|
||||
|
||||
<meta name="flags" content="image" />
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element." />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
html
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled" /></p>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a blue square in the
|
||||
<strong>upper-right corner</strong> of the page.
|
||||
-->
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -1,48 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to body element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode" />
|
||||
<link rel="match" href="wm-propagation-body-003-ref.xht" />
|
||||
|
||||
<meta name="flags" content="image" />
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element." />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
img#orange-square
|
||||
{
|
||||
height: 100px;
|
||||
padding-right: 1em;
|
||||
vertical-align: top;
|
||||
width: 100px;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled" /><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled" /></div>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is an orange square
|
||||
in the <strong>upper-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -1,49 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to body element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode" />
|
||||
<link rel="match" href="wm-propagation-body-003-ref.xht" />
|
||||
|
||||
<meta name="flags" content="image" />
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element." />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: orange;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled" /></p>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is an orange square
|
||||
in the <strong>upper-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -1,50 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to body element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode" />
|
||||
<link rel="match" href="block-flow-direction-025-ref.xht" />
|
||||
|
||||
<meta name="flags" content="image" />
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element." />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled" /></p>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a blue square in the
|
||||
<strong>upper-right corner</strong> of the page.
|
||||
-->
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="block-flow-direction-025-ref.xht">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
body
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a blue square in the
|
||||
<strong>upper-right corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
img
|
||||
{
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img + img
|
||||
{
|
||||
padding-left: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div><img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is an orange square
|
||||
in the <strong>upper-left corner</strong> of the page.
|
||||
-->
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="wm-propagation-body-033-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html::before
|
||||
{
|
||||
background-color: orange;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100px;
|
||||
margin-left: 8px;
|
||||
margin-top: 8px;
|
||||
margin-right: 1em;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is an orange square
|
||||
in the <strong>upper-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="block-flow-direction-025-ref.xht">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
body
|
||||
{
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a blue square in the
|
||||
<strong>upper-right corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
bottom: 8px;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
img + img
|
||||
{
|
||||
padding-left: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div><img src="support/swatch-teal.png" width="100" height="100" alt="Image download support must be enabled"><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled"></div>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a teal square in
|
||||
the <strong>lower-left corner</strong> of the page.
|
||||
-->
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="wm-propagation-body-035-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
body
|
||||
{
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: teal;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a teal square in
|
||||
the <strong>lower-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1102175" title="Bug 1102175: <body> with writing-mode: vertical-rl does not align children to the right ">
|
||||
<link rel="match" href="block-flow-direction-025-ref.xht">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a blue square in the
|
||||
<strong>upper-right corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="wm-propagation-body-033-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
html::before
|
||||
{
|
||||
background-color: orange;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100px;
|
||||
margin-left: 8px;
|
||||
margin-top: 8px;
|
||||
margin-right: 1em;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is an orange square
|
||||
in the <strong>upper-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="block-flow-direction-025-ref.xht">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a blue square in the
|
||||
<strong>upper-right corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="wm-propagation-body-035-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: teal;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "horizontal-tb")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a teal square in
|
||||
the <strong>lower-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="wm-propagation-body-033-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
img#orange-square
|
||||
{
|
||||
height: 100px;
|
||||
padding-right: 1em;
|
||||
vertical-align: top;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-rl")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is an orange square
|
||||
in the <strong>upper-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="wm-propagation-body-033-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: orange;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-rl")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is an orange square
|
||||
in the <strong>upper-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img id="blue" src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled">
|
||||
|
||||
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a blue square in the
|
||||
<strong>upper-right corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<p style=margin-top:-8px>This text must be written sideways: vertically, with letters rotated 90 degrees.
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="wm-propagation-body-042-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation. Finally, in order to make sure that the principal writing mode is indeed 'sideways-rl', the test checks that a simple text is not affected by 'text-orientation: upright' since 'text-orientation: upright' should have no impact and no rendering effect on it.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
html::after
|
||||
{
|
||||
content: "This text must be written sideways: vertically, with letters rotated 90 degrees.";
|
||||
text-orientation: upright;
|
||||
/* 'text-orientation: upright' has no effect with 'sideways-rl', but does with 'vertical-rl' */
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-rl")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a blue square in the
|
||||
<strong>upper-right corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="wm-propagation-body-035-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: teal;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-rl")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a teal square in
|
||||
the <strong>lower-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
|
||||
img#orange-square
|
||||
{
|
||||
padding-right: 16px;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<p><img id="orange-square" src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is an orange square
|
||||
in the <strong>upper-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<div style=margin-left:-8px>This text must be written horizontally.</div>
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="wm-propagation-body-044-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation. Finally, in order to make sure that the principal writing mode is indeed 'horizontal-tb', the test checks that a generated text's inline axis is indeed horizontal and not vertical.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
html::after
|
||||
{
|
||||
content: "This text must be written horizontally.";
|
||||
display: block;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
img#orange-square
|
||||
{
|
||||
height: 100px;
|
||||
padding-right: 1em;
|
||||
vertical-align: top;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-lr")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<p><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></p>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is an orange square
|
||||
in the <strong>upper-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="block-flow-direction-025-ref.xht">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-lr")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a blue square in the
|
||||
<strong>upper-right corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="block-flow-direction-025-ref.xht">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-lr")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a blue square in the
|
||||
<strong>upper-right corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: sideways-lr;div
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
margin-left: 1em;
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img src="support/swatch-teal.png" width="100" height="100" alt="Image download support must be enabled">
|
||||
<p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled"></p>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a teal square in
|
||||
the <strong>lower-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<div>This text must be written sideways: vertically, with letters rotated 90 degrees.</div>
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="wm-propagation-body-047-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
html::after
|
||||
{
|
||||
content: "This text must be written sideways: vertically, with letters rotated 90 degrees.";
|
||||
text-orientation: upright; /* this has no effect with sideways-rl, but does with vertical-rl*/
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: teal;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
img
|
||||
{
|
||||
display: block;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "vertical-lr")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a teal square in
|
||||
the <strong>lower-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="wm-propagation-body-033-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
img#orange-square
|
||||
{
|
||||
height: 100px;
|
||||
padding-right: 1em;
|
||||
vertical-align: top;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-rl")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is an orange square
|
||||
in the <strong>upper-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
text-orientation: upright;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
img#blue
|
||||
{
|
||||
padding-left: 16px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<img id="blue" src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled">
|
||||
|
||||
<div><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled"></div>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a blue square in the
|
||||
<strong>upper-right corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<p>This text must be vertical, with letters upright.
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="wm-propagation-body-049-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation. Finally, in order to make sure that the principal writing mode is indeed 'vertical-rl', the test checks that a simple text is affected by 'text-orientation: upright' since 'text-orientation: upright' should have a rendering effect on it.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
html::after
|
||||
{
|
||||
content: "This text must be vertical, with letters upright.";
|
||||
text-orientation: upright;
|
||||
/* 'text-orientation: upright' has no effect with 'sideways-rl', but does with 'vertical-rl' */
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-rl")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a blue square in the
|
||||
<strong>upper-right corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="wm-propagation-body-033-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: orange;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-rl")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is an orange square
|
||||
in the <strong>upper-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-lr' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="wm-propagation-body-035-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: teal;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-rl")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/wm-propagation-body-035-exp-res.png" width="322" height="38" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a teal square in
|
||||
the <strong>lower-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: horizontal-tb' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="wm-propagation-body-033-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
img#orange-square
|
||||
{
|
||||
height: 100px;
|
||||
padding-right: 1em;
|
||||
vertical-align: top;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-lr")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div><img id="orange-square" src="support/swatch-orange.png" alt="Image download support must be enabled"><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled"></div>
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is an orange square
|
||||
in the <strong>upper-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: vertical-rl' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="block-flow-direction-025-ref.xht">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-lr")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a blue square in the
|
||||
<strong>upper-right corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
text-orientation: upright;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<img id="orange" src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled">
|
||||
|
||||
<p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is an orange square
|
||||
in the <strong>upper-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<div>This text must be vertical, with letters upright.</div>
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: vertical-lr' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="wm-propagation-body-054-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation. Finally, in order to make sure that the principal writing mode is indeed 'vertical-lr', the test checks that a simple text is affected by 'text-orientation: upright' since 'text-orientation: upright' should have a rendering effect on it.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
html::after
|
||||
{
|
||||
content: "This text must be vertical, with letters upright.";
|
||||
text-orientation: upright;
|
||||
/* 'text-orientation: upright' has no effect with 'sideways-lr', but does with 'vertical-lr' */
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: orange;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-lr")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/wm-propagation-body-003-exp-res.png" width="340" height="37" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is an orange square
|
||||
in the <strong>upper-left corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Writing Modes Test: 'writing-mode: sideways-rl' set to <body> element propagates to viewport</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#principal-flow" title="8. The Principal Writing Mode">
|
||||
<!--
|
||||
Issue 3066: [css-writing-modes] Does vertical writing mode of an HTML body
|
||||
element cause an orthogonal flow?
|
||||
https://github.com/w3c/csswg-drafts/issues/3066
|
||||
-->
|
||||
<link rel="match" href="block-flow-direction-025-ref.xht">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that when the root element has a <body> child element, then the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Also, a small script in this test verifies that the computed value of 'writing-mode' of the root element itself is not affected by such propagation.">
|
||||
|
||||
<!--
|
||||
Tests 032 to 035: html's writing-mode is not specified
|
||||
|
||||
Tests 036 to 039: html's writing-mode is specified as horizontal-tb
|
||||
|
||||
Tests 040 to 043: html's writing-mode is specified as vertical-rl
|
||||
|
||||
Tests 044 to 047: html's writing-mode is specified as vertical-lr
|
||||
|
||||
Tests 048 to 051: html's writing-mode is specified as sideways-rl
|
||||
|
||||
Tests 052 to 055: html's writing-mode is specified as sideways-lr
|
||||
-->
|
||||
|
||||
<style>
|
||||
html
|
||||
{
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
h1#second-test-condition
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function verifyComputedValueDocRoot()
|
||||
{
|
||||
if(getComputedStyle(document.documentElement)["writing-mode"] == "sideways-lr")
|
||||
{
|
||||
document.getElementById("second-test-condition").style.display = "none";
|
||||
};
|
||||
|
||||
/*
|
||||
If the computed value of 'writing-mode' of the root element
|
||||
itself is not affected by such propagation, then the big FAIL
|
||||
word will not be displayed.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="verifyComputedValueDocRoot();">
|
||||
|
||||
<div></div>
|
||||
|
||||
<p><img src="support/block-flow-direction-025-exp-res.png" width="359" height="36" alt="Image download support must be enabled">
|
||||
|
||||
<!--
|
||||
The image says:
|
||||
Test passes if there is a blue square in the
|
||||
<strong>upper-right corner</strong> of the page.
|
||||
-->
|
||||
|
||||
<h1 id="second-test-condition">FAIL</h1>
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Test elementFromPoint for list-item</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
ul.inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Outside 1</li>
|
||||
<li>Outside 2</li>
|
||||
<li>Outside 3</li>
|
||||
</ul>
|
||||
<ul class="inside">
|
||||
<li>Inside 1</li>
|
||||
<li>Inside 2</li>
|
||||
<li>Inside 3</li>
|
||||
</ul>
|
||||
<script>
|
||||
for (let li of document.getElementsByTagName('li')) {
|
||||
test(() => {
|
||||
let bounds = li.getBoundingClientRect();
|
||||
let target = document.elementFromPoint(bounds.x + 1, bounds.y + 1);
|
||||
assert_equals(target, li);
|
||||
}, `<li>${li.textContent}</li>`);
|
||||
}
|
||||
</script>
|
||||
</body>
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSSOM View - scrollIntoView considers sideways-lr writing mode and rtl direction</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#scroller {
|
||||
writing-mode: sideways-lr;
|
||||
direction: rtl;
|
||||
overflow: scroll;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#container{
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
}
|
||||
#target {
|
||||
background-color: #ff0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="scroller">
|
||||
<div id="container">
|
||||
<!-- ROW-1 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-2 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box" id="target"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-3 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// In sideways-lr mode and rtl direction, X corresponds to the block axis and is oriented rightward.
|
||||
// Y corresponds to the inline axis and is oriented downward.
|
||||
// So the beginning edges are the top and left edges and the ending edges are the bottom and right edges.
|
||||
|
||||
// This assumes that the horizontal scrollbar is on the bottom side and the vertical scrollbar is on the right side.
|
||||
|
||||
var target = document.getElementById("target");
|
||||
var scroller = document.getElementById("scroller");
|
||||
var scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
|
||||
|
||||
var scroller_width = scroller.offsetWidth;
|
||||
var scroller_height = scroller.offsetHeight;
|
||||
var box_width = target.offsetWidth;
|
||||
var box_height = target.offsetHeight;
|
||||
|
||||
var expectedX = {
|
||||
blockStart: box_width,
|
||||
blockCenter: (3*box_width - scroller_width)/2 + scrollbar_width/2,
|
||||
blockEnd: 2*box_width - scroller_width + scrollbar_width,
|
||||
};
|
||||
|
||||
var expectedY = {
|
||||
inlineStart: box_height,
|
||||
inlineCenter: (3*box_height - scroller_height)/2 + scrollbar_width/2,
|
||||
inlineEnd: 2*box_height - scroller_height + scrollbar_width,
|
||||
};
|
||||
|
||||
[
|
||||
[{block: "start", inline: "start"}, expectedX.blockStart, expectedY.inlineStart],
|
||||
[{block: "start", inline: "center"}, expectedX.blockStart, expectedY.inlineCenter],
|
||||
[{block: "start", inline: "end"}, expectedX.blockStart, expectedY.inlineEnd],
|
||||
[{block: "center", inline: "start"}, expectedX.blockCenter, expectedY.inlineStart],
|
||||
[{block: "center", inline: "center"}, expectedX.blockCenter, expectedY.inlineCenter],
|
||||
[{block: "center", inline: "end"}, expectedX.blockCenter, expectedY.inlineEnd],
|
||||
[{block: "end", inline: "start"}, expectedX.blockEnd, expectedY.inlineStart],
|
||||
[{block: "end", inline: "center"}, expectedX.blockEnd, expectedY.inlineCenter],
|
||||
[{block: "end", inline: "end"}, expectedX.blockEnd, expectedY.inlineEnd],
|
||||
].forEach(([input, expectedX, expectedY]) => {
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.scrollIntoView(input);
|
||||
assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
|
||||
assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
|
||||
}, `scrollIntoView(${JSON.stringify(input)})`);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,108 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSSOM View - scrollIntoView considers sideways-rl writing mode</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#scroller {
|
||||
writing-mode: sideways-lr;
|
||||
overflow: scroll;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#container{
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
}
|
||||
#target {
|
||||
background-color: #ff0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="scroller">
|
||||
<div id="container">
|
||||
<!-- ROW-1 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-2 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box" id="target"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-3 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// In sideways-lr mode, X corresponds to the block axis and is oriented rightward.
|
||||
// Y corresponds to the inline axis and is oriented upward.
|
||||
// So the beginning edges are the bottom and left edges and the ending edges are the top and right edges.
|
||||
|
||||
// According to the spec, y be min(0, max(y, element padding edge height - element scrolling area height)).
|
||||
// So y is nonpositive and decreases upward.
|
||||
|
||||
// This assumes that the horizontal scrollbar is on the bottom side and the vertical scrollbar is on the right side.
|
||||
|
||||
var target = document.getElementById("target");
|
||||
var scroller = document.getElementById("scroller");
|
||||
var scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
|
||||
|
||||
var scroller_width = scroller.offsetWidth;
|
||||
var scroller_height = scroller.offsetHeight;
|
||||
var box_width = target.offsetWidth;
|
||||
var box_height = target.offsetHeight;
|
||||
|
||||
var expectedX = {
|
||||
blockStart: box_width,
|
||||
blockCenter: (3*box_width - scroller_width)/2 + scrollbar_width/2,
|
||||
blockEnd: 2*box_width - scroller_width + scrollbar_width,
|
||||
};
|
||||
|
||||
var expectedY = {
|
||||
inlineStart: -box_height,
|
||||
inlineCenter: -((3*box_height - scroller_height)/2) - scrollbar_width/2,
|
||||
inlineEnd: -(2*box_height - scroller_height) - scrollbar_width,
|
||||
};
|
||||
|
||||
[
|
||||
[{block: "start", inline: "start"}, expectedX.blockStart, expectedY.inlineStart],
|
||||
[{block: "start", inline: "center"}, expectedX.blockStart, expectedY.inlineCenter],
|
||||
[{block: "start", inline: "end"}, expectedX.blockStart, expectedY.inlineEnd],
|
||||
[{block: "center", inline: "start"}, expectedX.blockCenter, expectedY.inlineStart],
|
||||
[{block: "center", inline: "center"}, expectedX.blockCenter, expectedY.inlineCenter],
|
||||
[{block: "center", inline: "end"}, expectedX.blockCenter, expectedY.inlineEnd],
|
||||
[{block: "end", inline: "start"}, expectedX.blockEnd, expectedY.inlineStart],
|
||||
[{block: "end", inline: "center"}, expectedX.blockEnd, expectedY.inlineCenter],
|
||||
[{block: "end", inline: "end"}, expectedX.blockEnd, expectedY.inlineEnd],
|
||||
].forEach(([input, expectedX, expectedY]) => {
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.scrollIntoView(input);
|
||||
assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
|
||||
assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
|
||||
}, `scrollIntoView(${JSON.stringify(input)})`);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSSOM View - scrollIntoView considers sideways-rl writing mode and rtl direction</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#scroller {
|
||||
writing-mode: sideways-rl;
|
||||
direction: rtl;
|
||||
overflow: scroll;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#container{
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
}
|
||||
#target {
|
||||
background-color: #ff0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="scroller">
|
||||
<div id="container">
|
||||
<!-- ROW-1 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-2 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box" id="target"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-3 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// In sideways-rl mode and rtl direction, X corresponds to the block axis and is oriented leftward.
|
||||
// Y corresponds to the inline axis and is oriented upward.
|
||||
// So the beginning edges are the bottom and right edges and the ending edges are the top and left edges.
|
||||
|
||||
// According to the spec, x be min(0, max(x, element padding edge width - element scrolling area width)).
|
||||
// So x is nonpositive and decreases leftward.
|
||||
// According to the spec, y be min(0, max(y, element padding edge height - element scrolling area height)).
|
||||
// So y is nonpositive and decreases upward.
|
||||
|
||||
// This assumes that the horizontal scrollbar is on the bottom side and the vertical scrollbar is on the left side.
|
||||
|
||||
var target = document.getElementById("target");
|
||||
var scroller = document.getElementById("scroller");
|
||||
var scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
|
||||
|
||||
var scroller_width = scroller.offsetWidth;
|
||||
var scroller_height = scroller.offsetHeight;
|
||||
var box_width = target.offsetWidth;
|
||||
var box_height = target.offsetHeight;
|
||||
|
||||
var expectedX = {
|
||||
blockStart: -box_width,
|
||||
blockCenter: -((3*box_width - scroller_width)/2) - scrollbar_width/2,
|
||||
blockEnd: -(2*box_width - scroller_width) - scrollbar_width,
|
||||
};
|
||||
|
||||
var expectedY = {
|
||||
inlineStart: -box_height,
|
||||
inlineCenter: -((3*box_height - scroller_height)/2) - scrollbar_width/2,
|
||||
inlineEnd: -(2*box_height - scroller_height) - scrollbar_width,
|
||||
};
|
||||
|
||||
[
|
||||
[{block: "start", inline: "start"}, expectedX.blockStart, expectedY.inlineStart],
|
||||
[{block: "start", inline: "center"}, expectedX.blockStart, expectedY.inlineCenter],
|
||||
[{block: "start", inline: "end"}, expectedX.blockStart, expectedY.inlineEnd],
|
||||
[{block: "center", inline: "start"}, expectedX.blockCenter, expectedY.inlineStart],
|
||||
[{block: "center", inline: "center"}, expectedX.blockCenter, expectedY.inlineCenter],
|
||||
[{block: "center", inline: "end"}, expectedX.blockCenter, expectedY.inlineEnd],
|
||||
[{block: "end", inline: "start"}, expectedX.blockEnd, expectedY.inlineStart],
|
||||
[{block: "end", inline: "center"}, expectedX.blockEnd, expectedY.inlineCenter],
|
||||
[{block: "end", inline: "end"}, expectedX.blockEnd, expectedY.inlineEnd],
|
||||
].forEach(([input, expectedX, expectedY]) => {
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.scrollIntoView(input);
|
||||
assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
|
||||
assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
|
||||
}, `scrollIntoView(${JSON.stringify(input)})`);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,108 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSSOM View - scrollIntoView considers sideways-rl writing mode</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#scroller {
|
||||
writing-mode: sideways-rl;
|
||||
overflow: scroll;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#container{
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
}
|
||||
#target {
|
||||
background-color: #ff0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="scroller">
|
||||
<div id="container">
|
||||
<!-- ROW-1 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-2 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box" id="target"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-3 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// In sideways-rl mode, X corresponds to the block axis and is oriented leftward.
|
||||
// Y corresponds to the inline axis and is oriented downward.
|
||||
// So the beginning edges are the top and right edges and the ending edges are the bottom and left edges.
|
||||
|
||||
// According to the spec, x be min(0, max(x, element padding edge width - element scrolling area width)).
|
||||
// So x is nonpositive and decreases leftward.
|
||||
|
||||
// This assumes that the horizontal scrollbar is on the bottom side and the vertical scrollbar is on the left side.
|
||||
|
||||
var target = document.getElementById("target");
|
||||
var scroller = document.getElementById("scroller");
|
||||
var scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
|
||||
|
||||
var scroller_width = scroller.offsetWidth;
|
||||
var scroller_height = scroller.offsetHeight;
|
||||
var box_width = target.offsetWidth;
|
||||
var box_height = target.offsetHeight;
|
||||
|
||||
var expectedX = {
|
||||
blockStart: -box_width,
|
||||
blockCenter: -((3*box_width - scroller_width)/2) - scrollbar_width/2,
|
||||
blockEnd: -(2*box_width - scroller_width) - scrollbar_width,
|
||||
};
|
||||
|
||||
var expectedY = {
|
||||
inlineStart: box_height,
|
||||
inlineCenter: ((3*box_height - scroller_height)/2) + (scrollbar_width/2),
|
||||
inlineEnd: ((2*box_height) - scroller_height) + scrollbar_width,
|
||||
};
|
||||
|
||||
[
|
||||
[{block: "start", inline: "start"}, expectedX.blockStart, expectedY.inlineStart],
|
||||
[{block: "start", inline: "center"}, expectedX.blockStart, expectedY.inlineCenter],
|
||||
[{block: "start", inline: "end"}, expectedX.blockStart, expectedY.inlineEnd],
|
||||
[{block: "center", inline: "start"}, expectedX.blockCenter, expectedY.inlineStart],
|
||||
[{block: "center", inline: "center"}, expectedX.blockCenter, expectedY.inlineCenter],
|
||||
[{block: "center", inline: "end"}, expectedX.blockCenter, expectedY.inlineEnd],
|
||||
[{block: "end", inline: "start"}, expectedX.blockEnd, expectedY.inlineStart],
|
||||
[{block: "end", inline: "center"}, expectedX.blockEnd, expectedY.inlineCenter],
|
||||
[{block: "end", inline: "end"}, expectedX.blockEnd, expectedY.inlineEnd],
|
||||
].forEach(([input, expectedX, expectedY]) => {
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.scrollIntoView(input);
|
||||
assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
|
||||
assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
|
||||
}, `scrollIntoView(${JSON.stringify(input)})`);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Motion Path: Default offset-anchor with transform-box: fill-box</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
|
||||
<link rel="match" href="offset-anchor-transform-box-fill-box-ref.html">
|
||||
<meta name="assert" content="Tests default offset-anchor together with a fill-box transform-box">
|
||||
<style>
|
||||
#target {
|
||||
transform-box: fill-box;
|
||||
transform-origin: 25% 25%;
|
||||
offset-path: path("M75,-25v100");
|
||||
offset-distance: 50%;
|
||||
}
|
||||
</style>
|
||||
<svg width="400" height="400">
|
||||
<rect width="100" height="100" fill="red"/>
|
||||
<rect id="target" x="150" y="100" width="100" height="100" fill="green"/>
|
||||
</svg>
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Test element names are case-insensitive only in ASCII range</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/selectors-4/#case-sensitive">
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<style>
|
||||
\212A {
|
||||
display: block;
|
||||
background: lime;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>You should see a green square below.</p>
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
// Insert from JavaScript to avoid parser doing something special.
|
||||
let test_element = document.createElement('\u212A');
|
||||
container.appendChild(test_element);
|
||||
let test_element_with_ns = document.createElementNS('https://dummy.ns', '\u212A');
|
||||
container.appendChild(test_element_with_ns);
|
||||
|
||||
test(() => {
|
||||
assert_equals(test_element.offsetHeight, 100);
|
||||
}, 'CSS selector should match for Unicode uppercase element');
|
||||
|
||||
test(() => {
|
||||
// Elements in different namespace cannot compute style or height.
|
||||
// Test the height of the container instead.
|
||||
assert_equals(container.offsetHeight, 200);
|
||||
}, 'Elements with namespace should work the same way');
|
||||
|
||||
test(() => {
|
||||
let e = document.querySelector('k');
|
||||
assert_equals(e, null);
|
||||
}, '`querySelector` should not use Unicode case-foldering');
|
||||
</script>
|
||||
</body>
|
|
@ -28,8 +28,6 @@
|
|||
var frameWin = document.getElementById("srcdoc-iframe").contentWindow;
|
||||
assert_equals(frameWin.location.href, "about:srcdoc");
|
||||
assert_equals(frameWin.scrollY, 0, "Should not have scrolled yet");
|
||||
frameWin.location.hash = "";
|
||||
assert_equals(frameWin.location.href, "about:srcdoc#", "Setting an empty hash should result in an empty fragment, not no fragment.");
|
||||
frameWin.location.hash = "test";
|
||||
assert_equals(frameWin.location.href, "about:srcdoc#test");
|
||||
assert_true(frameWin.scrollY > frameWin.innerHeight,
|
||||
|
|
|
@ -30,6 +30,11 @@
|
|||
<option style="display:none"></option>
|
||||
<option></option>
|
||||
</select>
|
||||
|
||||
<select id=minus-one>
|
||||
<option value=1>1</option>
|
||||
<option value=2>2</option>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
|
@ -38,6 +43,10 @@ function assertSelectedIndex(select, value) {
|
|||
assert_equals(select.options.selectedIndex, value);
|
||||
}
|
||||
|
||||
function assertSelectValue(select, value) {
|
||||
assert_equals(select.value, value);
|
||||
}
|
||||
|
||||
test(function () {
|
||||
var select = document.getElementById('empty');
|
||||
assertSelectedIndex(select, -1);
|
||||
|
@ -120,4 +129,15 @@ test(function () {
|
|||
select.options[1].selected = false;
|
||||
assertSelectedIndex(select, 0);
|
||||
}, "reset to display:none");
|
||||
|
||||
test(function() {
|
||||
var select = document.getElementById("minus-one");
|
||||
assertSelectedIndex(select, 0);
|
||||
|
||||
select.selectedIndex = -1;
|
||||
|
||||
assertSelectedIndex(select, -1);
|
||||
assertSelectValue(select, "");
|
||||
|
||||
}, "set selectedIndex=-1");
|
||||
</script>
|
||||
|
|
|
@ -17,7 +17,6 @@ enum SupportedType {
|
|||
};
|
||||
|
||||
[Constructor, Exposed=Window]
|
||||
|
||||
interface XMLSerializer {
|
||||
DOMString serializeToString(Node root);
|
||||
};
|
||||
|
|
|
@ -8,16 +8,6 @@ partial namespace CSS {
|
|||
[SameObject] readonly attribute Worklet animationWorklet;
|
||||
};
|
||||
|
||||
[Exposed=AnimationWorklet, Global=AnimationWorklet, Constructor (optional any options)]
|
||||
interface StatelessAnimator {
|
||||
};
|
||||
|
||||
[Exposed=AnimationWorklet, Global=AnimationWorklet,
|
||||
Constructor (optional any options, optional any state)]
|
||||
interface StatefulAnimator {
|
||||
any state();
|
||||
};
|
||||
|
||||
[ Global=(Worklet,AnimationWorklet), Exposed=AnimationWorklet ]
|
||||
interface AnimationWorkletGlobalScope : WorkletGlobalScope {
|
||||
void registerAnimator(DOMString name, AnimatorInstanceConstructor animatorCtor);
|
||||
|
|
|
@ -9,7 +9,6 @@ partial interface Navigator {
|
|||
|
||||
[NoInterfaceObject]
|
||||
interface Geolocation {
|
||||
|
||||
void getCurrentPosition(PositionCallback successCallback,
|
||||
optional PositionErrorCallback errorCallback,
|
||||
optional PositionOptions options);
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
// GENERATED CONTENT - DO NOT EDIT
|
||||
// Content was automatically extracted by Reffy into reffy-reports
|
||||
// (https://github.com/tidoust/reffy-reports)
|
||||
// Source: Media Capabilities (https://wicg.github.io/media-capabilities/)
|
||||
// Source: Media Capabilities (https://w3c.github.io/media-capabilities/)
|
||||
|
||||
dictionary MediaConfiguration {
|
||||
VideoConfiguration video;
|
||||
|
|
|
@ -0,0 +1,15 @@
|
|||
// GENERATED CONTENT - DO NOT EDIT
|
||||
// Content was automatically extracted by Reffy into reffy-reports
|
||||
// (https://github.com/tidoust/reffy-reports)
|
||||
// Source: Media Playback Quality (https://w3c.github.io/media-playback-quality/)
|
||||
|
||||
partial interface HTMLVideoElement {
|
||||
VideoPlaybackQuality getVideoPlaybackQuality();
|
||||
};
|
||||
|
||||
interface VideoPlaybackQuality {
|
||||
readonly attribute DOMHighResTimeStamp creationTime;
|
||||
readonly attribute unsigned long corruptedVideoFrames;
|
||||
readonly attribute unsigned long droppedVideoFrames;
|
||||
readonly attribute unsigned long totalVideoFrames;
|
||||
};
|
|
@ -133,11 +133,9 @@ enum VideoResizeModeEnum {
|
|||
"crop-and-scale"
|
||||
};
|
||||
|
||||
[Exposed=Window,
|
||||
Constructor(DOMString type, MediaStreamTrackEventInit eventInitDict)]
|
||||
[Exposed=Window, Constructor(DOMString type, MediaStreamTrackEventInit eventInitDict)]
|
||||
interface MediaStreamTrackEvent : Event {
|
||||
[SameObject]
|
||||
readonly attribute MediaStreamTrack track;
|
||||
[SameObject] readonly attribute MediaStreamTrack track;
|
||||
};
|
||||
|
||||
dictionary MediaStreamTrackEventInit : EventInit {
|
||||
|
@ -145,8 +143,7 @@ dictionary MediaStreamTrackEventInit : EventInit {
|
|||
};
|
||||
|
||||
partial interface Navigator {
|
||||
[SameObject, SecureContext]
|
||||
readonly attribute MediaDevices mediaDevices;
|
||||
[SameObject, SecureContext] readonly attribute MediaDevices mediaDevices;
|
||||
};
|
||||
|
||||
[Exposed=Window, SecureContext]
|
||||
|
@ -170,13 +167,15 @@ enum MediaDeviceKind {
|
|||
"videoinput"
|
||||
};
|
||||
|
||||
[Exposed=Window] interface InputDeviceInfo : MediaDeviceInfo {
|
||||
[Exposed=Window]
|
||||
interface InputDeviceInfo : MediaDeviceInfo {
|
||||
MediaTrackCapabilities getCapabilities();
|
||||
};
|
||||
|
||||
partial interface Navigator {
|
||||
[SecureContext]
|
||||
void getUserMedia(MediaStreamConstraints constraints, NavigatorUserMediaSuccessCallback successCallback, NavigatorUserMediaErrorCallback errorCallback);
|
||||
[SecureContext] void getUserMedia(MediaStreamConstraints constraints,
|
||||
NavigatorUserMediaSuccessCallback successCallback,
|
||||
NavigatorUserMediaErrorCallback errorCallback);
|
||||
};
|
||||
|
||||
partial interface MediaDevices {
|
||||
|
@ -231,16 +230,15 @@ typedef (double or ConstrainDoubleRange) ConstrainDouble;
|
|||
|
||||
typedef (boolean or ConstrainBooleanParameters) ConstrainBoolean;
|
||||
|
||||
typedef (DOMString or sequence<DOMString> or ConstrainDOMStringParameters) ConstrainDOMString;
|
||||
typedef (DOMString or
|
||||
sequence<DOMString> or
|
||||
ConstrainDOMStringParameters) ConstrainDOMString;
|
||||
|
||||
dictionary Capabilities {
|
||||
};
|
||||
dictionary Capabilities {};
|
||||
|
||||
dictionary Settings {
|
||||
};
|
||||
dictionary Settings {};
|
||||
|
||||
dictionary ConstraintSet {
|
||||
};
|
||||
dictionary ConstraintSet {};
|
||||
|
||||
dictionary Constraints : ConstraintSet {
|
||||
sequence<ConstraintSet> advanced;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
// GENERATED CONTENT - DO NOT EDIT
|
||||
// Content was automatically extracted by Reffy into reffy-reports
|
||||
// (https://github.com/tidoust/reffy-reports)
|
||||
// Source: Media Session Standard (https://wicg.github.io/mediasession/)
|
||||
// Source: Media Session Standard (https://w3c.github.io/mediasession/)
|
||||
|
||||
[Exposed=Window]
|
||||
partial interface Navigator {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
// (https://github.com/tidoust/reffy-reports)
|
||||
// Source: Payment Request API (https://w3c.github.io/payment-request/)
|
||||
|
||||
[Constructor(sequence<PaymentMethodData> methodData, PaymentDetailsInit details, optional PaymentOptions options),
|
||||
[Constructor(sequence<PaymentMethodData> methodData, PaymentDetailsInit details, optional PaymentOptions options = {}),
|
||||
SecureContext, Exposed=Window]
|
||||
interface PaymentRequest : EventTarget {
|
||||
[NewObject]
|
||||
|
@ -153,7 +153,7 @@ interface PaymentResponse : EventTarget {
|
|||
[NewObject]
|
||||
Promise<void> complete(optional PaymentComplete result = "unknown");
|
||||
[NewObject]
|
||||
Promise<void> retry(optional PaymentValidationErrors errorFields);
|
||||
Promise<void> retry(optional PaymentValidationErrors errorFields = {});
|
||||
|
||||
attribute EventHandler onpayerdetailchange;
|
||||
};
|
||||
|
@ -171,7 +171,7 @@ dictionary PayerErrors {
|
|||
DOMString phone;
|
||||
};
|
||||
|
||||
[Constructor(DOMString type, optional MerchantValidationEventInit eventInitDict),
|
||||
[Constructor(DOMString type, optional MerchantValidationEventInit eventInitDict = {}),
|
||||
SecureContext, Exposed=Window]
|
||||
interface MerchantValidationEvent : Event {
|
||||
readonly attribute DOMString methodName;
|
||||
|
@ -184,7 +184,7 @@ dictionary MerchantValidationEventInit : EventInit {
|
|||
USVString validationURL = "";
|
||||
};
|
||||
|
||||
[Constructor(DOMString type, optional PaymentMethodChangeEventInit eventInitDict), SecureContext, Exposed=Window]
|
||||
[Constructor(DOMString type, optional PaymentMethodChangeEventInit eventInitDict = {}), SecureContext, Exposed=Window]
|
||||
interface PaymentMethodChangeEvent : PaymentRequestUpdateEvent {
|
||||
readonly attribute DOMString methodName;
|
||||
readonly attribute object? methodDetails;
|
||||
|
@ -195,7 +195,7 @@ dictionary PaymentMethodChangeEventInit : PaymentRequestUpdateEventInit {
|
|||
object? methodDetails = null;
|
||||
};
|
||||
|
||||
[Constructor(DOMString type, optional PaymentRequestUpdateEventInit eventInitDict), SecureContext, Exposed=Window]
|
||||
[Constructor(DOMString type, optional PaymentRequestUpdateEventInit eventInitDict = {}), SecureContext, Exposed=Window]
|
||||
interface PaymentRequestUpdateEvent : Event {
|
||||
void updateWith(Promise<PaymentDetailsUpdate> detailsPromise);
|
||||
};
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue