mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update web-platform-tests to revision e9f2d000237d43f74136cfd40e5a3454f5b54b70
This commit is contained in:
parent
8bc8981ae5
commit
57465056e7
127 changed files with 18346 additions and 155 deletions
|
@ -14,6 +14,9 @@
|
|||
[Revoke blob URL after creating Request, will fetch]
|
||||
expected: FAIL
|
||||
|
||||
[Revoke blob URL after calling fetch, fetch should succeed]
|
||||
expected: FAIL
|
||||
|
||||
|
||||
[url-with-fetch.any.html]
|
||||
[Untitled]
|
||||
|
@ -34,3 +37,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,4 @@
|
|||
[relpos-percentage-left-in-scrollable.html]
|
||||
[relpos-percentage-left-in-scrollable]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[relpos-percentage-top-in-scrollable.html]
|
||||
[relpos-percentage-top-in-scrollable]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[mix-blend-mode-animation.html]
|
||||
expected: FAIL
|
|
@ -1,5 +1,5 @@
|
|||
[elementsFromPoint-iframes.html]
|
||||
expected: CRASH
|
||||
expected: TIMEOUT
|
||||
[elementsFromPoint on the root document for points in iframe elements]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,2 +0,0 @@
|
|||
[contenttype_txt.html]
|
||||
expected: CRASH
|
|
@ -312,27 +312,12 @@
|
|||
[<iframe>: separate response Content-Type: */* text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/plain */*]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: */* text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html;" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html */*]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html */*;charset=gbk]
|
||||
[<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -53,6 +53,9 @@
|
|||
[combined text/javascript ]
|
||||
expected: FAIL
|
||||
|
||||
[separate text/javascript ]
|
||||
[separate text/javascript;charset=windows-1252 error text/javascript]
|
||||
expected: FAIL
|
||||
|
||||
[separate text/javascript x/x]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -11,9 +11,3 @@
|
|||
[X-Content-Type-Options%3A%20nosniff%0C]
|
||||
expected: FAIL
|
||||
|
||||
[X-Content-Type-Options%3A%20'NosniFF']
|
||||
expected: FAIL
|
||||
|
||||
[Content-Type-Options%3A%20nosniff]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,4 +0,0 @@
|
|||
[traverse_the_history_5.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
@ -11913,3 +11913,687 @@
|
|||
[style.media: setAttribute() to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to false]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to null]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to true]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to "autofocus"]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to "autofocus"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to 7]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to null]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to ""]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL get with DOM attribute unset]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to true]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to false]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to ""]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL get with DOM attribute unset]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to ""]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to false]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to "autofocus"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to true]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to ""]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL get with DOM attribute unset]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to null]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to false]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to 7]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to false]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to ""]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to 7]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: typeof IDL attribute]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to ""]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to true]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to ""]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to 7]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to "autofocus"]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to "autofocus"]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to false]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to false]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to "autofocus"]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: typeof IDL attribute]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to ""]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to null]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to 7]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to null]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to true]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to null]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to 7]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to false]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL get with DOM attribute unset]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to 7]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to 7]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to 7]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to 7]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to ""]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL get with DOM attribute unset]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to null]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to null]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to true]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to false]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: typeof IDL attribute]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL get with DOM attribute unset]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to ""]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to 7]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to false]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: setAttribute() to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to null]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to null]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to null]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to ""]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: IDL set to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: setAttribute() to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: IDL set to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: typeof IDL attribute]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to false]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: IDL set to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[style.autofocus: setAttribute() to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to ""]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: IDL set to null]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[title.autofocus: setAttribute() to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to 7]
|
||||
expected: FAIL
|
||||
|
||||
[base.autofocus: IDL set to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: typeof IDL attribute]
|
||||
expected: FAIL
|
||||
|
||||
[head.autofocus: setAttribute() to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: IDL set to false]
|
||||
expected: FAIL
|
||||
|
||||
[meta.autofocus: typeof IDL attribute]
|
||||
expected: FAIL
|
||||
|
||||
[link.autofocus: setAttribute() to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -17382,3 +17382,573 @@
|
|||
[frame.src: IDL set to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to ""]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to "autofocus"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to true]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to null]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to 7]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to null]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to "autofocus"]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to false]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to ""]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to 7]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to 7]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to true]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to null]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to ""]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to ""]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL get with DOM attribute unset]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to false]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to ""]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to null]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to null]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to ""]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to null]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to 7]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to ""]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to true]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: typeof IDL attribute]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to 7]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to false]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL get with DOM attribute unset]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to false]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL get with DOM attribute unset]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to false]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to "autofocus"]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to ".5"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to ""]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to true]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to " foo "]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to "autofocus"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: typeof IDL attribute]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to false]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to ""]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: typeof IDL attribute]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to 7]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to null]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to false]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL get with DOM attribute unset]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: typeof IDL attribute]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to null]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to ""]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to 7]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to 7]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL get with DOM attribute unset]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to false]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: typeof IDL attribute]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to true]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to NaN]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to false]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to 7]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: IDL set to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to object "[object Object\]"]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to "autofocus"]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: IDL set to 1.5]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: setAttribute() to Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to false]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[frameset.autofocus: IDL set to -Infinity]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to "5%"]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: IDL set to object "test-valueOf"]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: setAttribute() to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[frame.autofocus: IDL set to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[dir.autofocus: setAttribute() to null]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to null]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to "+100"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to object "test-toString"]
|
||||
expected: FAIL
|
||||
|
||||
[marquee.autofocus: setAttribute() to "\\0"]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to undefined]
|
||||
expected: FAIL
|
||||
|
||||
[font.autofocus: setAttribute() to 7]
|
||||
expected: FAIL
|
||||
|
||||
|
|
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
@ -1,7 +0,0 @@
|
|||
[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
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[script-onerror-insertion-point-2.html]
|
||||
expected: TIMEOUT
|
|
@ -1,5 +1,5 @@
|
|||
[ignore-opens-during-unload.window.html]
|
||||
expected: CRASH
|
||||
expected: TIMEOUT
|
||||
[ignore-opens-during-unload]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
[realtimeanalyser-fft-scaling.html]
|
||||
expected: TIMEOUT
|
||||
[X 2048-point FFT peak position is not equal to 64. Got 0.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
[Create-Secure-extensions-empty.any.html]
|
||||
expected: TIMEOUT
|
||||
[W3C WebSocket API - Create Secure WebSocket - wsocket.extensions should be set to '' after connection is established - Connection should be opened]
|
||||
expected: FAIL
|
||||
|
||||
|
@ -9,12 +8,8 @@
|
|||
[Create Secure WebSocket - wsocket.extensions should be set to '' after connection is established - Connection should be opened]
|
||||
expected: FAIL
|
||||
|
||||
[Create Secure WebSocket - wsocket.extensions should be set to '' after connection is established - Connection should be closed]
|
||||
expected: NOTRUN
|
||||
|
||||
|
||||
[Create-Secure-extensions-empty.any.worker.html]
|
||||
expected: TIMEOUT
|
||||
[W3C WebSocket API - Create Secure WebSocket - wsocket.extensions should be set to '' after connection is established - Connection should be opened]
|
||||
expected: FAIL
|
||||
|
||||
|
@ -24,6 +19,3 @@
|
|||
[Create Secure WebSocket - wsocket.extensions should be set to '' after connection is established - Connection should be opened]
|
||||
expected: FAIL
|
||||
|
||||
[Create Secure WebSocket - wsocket.extensions should be set to '' after connection is established - Connection should be closed]
|
||||
expected: NOTRUN
|
||||
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
[Worker-constructor.html]
|
||||
expected: ERROR
|
|
@ -0,0 +1,2 @@
|
|||
[transition_calc_implicit.html]
|
||||
expected: TIMEOUT
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#propdef-left">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#relative-positioning">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=908083">
|
||||
<p>There should be no red, and no scrollbar.</p>
|
||||
<div id="container" style="overflow:auto; width:500px; background:red;">
|
||||
<div style="padding-right:90%; background:yellow;">
|
||||
<div style="position:relative; left:900%; width:50px; height:50px; background:cyan;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
container.scrollLeft = 123456;
|
||||
test(()=> {
|
||||
assert_equals(container.scrollLeft, 0);
|
||||
}, "Left percentage resolved correctly for overflow contribution");
|
||||
</script>
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#propdef-top">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#relative-positioning">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=908083">
|
||||
<p>There should be a green square below.</p>
|
||||
<div style="position:relative; width:200px; height:200px;">
|
||||
<div id="container" style="overflow:hidden; position:absolute; top:0; left:0; bottom:0; right:0;">
|
||||
<div style="position:relative; top:100%; width:100px; height:100px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
container.scrollTop = 123456;
|
||||
test(()=> {
|
||||
assert_equals(container.scrollTop, 100);
|
||||
}, "Top percentage resolved correctly for overflow contribution");
|
||||
</script>
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: baseline align a display:block item with a display:grid item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
|
||||
place-content: start;
|
||||
place-items: baseline start;
|
||||
border: 1px solid;
|
||||
text-decoration: underline blue;
|
||||
}
|
||||
|
||||
.inner-grid {
|
||||
background: lightgrey;
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
min-width: 10px;
|
||||
min-height: 0;
|
||||
border: 0 solid lightblue;
|
||||
border-top-width: 10px;
|
||||
border-bottom-width: 40px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
x, z {
|
||||
display: block;
|
||||
min-width: 40px;
|
||||
min-height: 10px;
|
||||
font-size: 10em;
|
||||
background: silver;
|
||||
}
|
||||
z {
|
||||
width: 40px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x> A</x><z></z>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="align-items:last baseline">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<z></z><x> A</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: baseline align a display:block item with a display:grid item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-self-alignment-baseline-with-grid-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
|
||||
place-content: start;
|
||||
place-items: baseline start;
|
||||
border: 1px solid;
|
||||
text-decoration: underline blue;
|
||||
}
|
||||
|
||||
.inner-grid {
|
||||
display: grid;
|
||||
grid: auto auto / auto;
|
||||
background: lightgrey;
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
min-width: 10px;
|
||||
min-height: 0;
|
||||
border: 0 solid lightblue;
|
||||
border-top-width: 10px;
|
||||
border-bottom-width: 40px;
|
||||
place-content: inherit;
|
||||
place-items: inherit;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width: 40px;
|
||||
min-height: 10px;
|
||||
font-size: 10em;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x> A</x><x style="grid-row:2"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="align-items:last baseline">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x></x><x style="grid-row:2"> A</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: baseline align a display:block item with a display:grid item with spanned item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-self-alignment-baseline-with-grid-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
|
||||
place-content: start;
|
||||
place-items: baseline start;
|
||||
border: 1px solid;
|
||||
text-decoration: underline blue;
|
||||
}
|
||||
|
||||
.inner-grid {
|
||||
display: grid;
|
||||
grid: auto auto / auto;
|
||||
background: lightgrey;
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
min-width: 10px;
|
||||
min-height: 0;
|
||||
border: 0 solid lightblue;
|
||||
border-top-width: 10px;
|
||||
border-bottom-width: 40px;
|
||||
place-content: inherit;
|
||||
place-items: inherit;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width: 40px;
|
||||
min-height: 10px;
|
||||
font-size: 10em;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x style="grid-row:1/span 3"> A</x><x style="grid-column:1"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="align-items:last baseline">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x></x><x style="grid-row:2/span 3"> A</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: baseline align a display:block item with a display:grid spanned item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-self-alignment-baseline-with-grid-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
|
||||
place-content: start;
|
||||
place-items: baseline start;
|
||||
border: 1px solid;
|
||||
text-decoration: underline blue;
|
||||
}
|
||||
|
||||
.inner-grid {
|
||||
display: grid;
|
||||
grid: auto auto / auto;
|
||||
background: lightgrey;
|
||||
grid-column: 2;
|
||||
grid-row: 2 / span 2;
|
||||
min-width: 10px;
|
||||
min-height: 0;
|
||||
border: 0 solid lightblue;
|
||||
border-top-width: 10px;
|
||||
border-bottom-width: 40px;
|
||||
place-content: inherit;
|
||||
place-items: inherit;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width: 40px;
|
||||
min-height: 10px;
|
||||
font-size: 10em;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<y style="grid-area:2/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x> A</x><x style="grid-row:2"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="align-items:last baseline">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x></x><x style="grid-row:2"> A</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: baseline align a display:block item with a display:grid spanned item with spanned item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-self-alignment-baseline-with-grid-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
|
||||
place-content: start;
|
||||
place-items: baseline start;
|
||||
border: 1px solid;
|
||||
text-decoration: underline blue;
|
||||
}
|
||||
|
||||
.inner-grid {
|
||||
display: grid;
|
||||
grid: auto auto / auto;
|
||||
background: lightgrey;
|
||||
grid-column: 2;
|
||||
grid-row: 2 / span 2;
|
||||
min-width: 10px;
|
||||
min-height: 0;
|
||||
border: 0 solid lightblue;
|
||||
border-top-width: 10px;
|
||||
border-bottom-width: 40px;
|
||||
place-content: inherit;
|
||||
place-items: inherit;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width: 40px;
|
||||
min-height: 10px;
|
||||
font-size: 10em;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<y style="grid-area:2/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x style="grid-row:1/span 3"> A</x><x style="grid-row:4"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="align-items:last baseline">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x></x><x style="grid-row:2/span 3"> A</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: grid-aligned abs.pos. inside subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto / repeat(10, 30px) 100px;
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
width: 500px;
|
||||
position: relative;
|
||||
padding: 4px 3px 1px 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: 0 / repeat(10, 30px) 100px;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 8;
|
||||
min-width:0;
|
||||
min-height:0;
|
||||
}
|
||||
|
||||
i {
|
||||
grid-row: 1;
|
||||
counter-increment: i;
|
||||
background: pink;
|
||||
}
|
||||
i::before { content: counter(i, decimal); }
|
||||
|
||||
x {
|
||||
position: absolute;
|
||||
top:0; bottom:0; left:0; right:0;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:3/5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:3/-1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:auto/3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:auto/1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:3/5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:3/-1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:auto/3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:auto/1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: grid-aligned abs.pos. inside subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="abs-pos-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(10, 30px);
|
||||
grid-template-areas: ". . . . . . . . . . .";
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
width: 500px;
|
||||
grid-auto-columns: 100px;
|
||||
grid-auto-rows: 100px;
|
||||
position: relative;
|
||||
padding: 4px 3px 1px 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: auto / subgrid;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 8;
|
||||
grid-row: 2 / span 2;
|
||||
min-width:0;
|
||||
min-height:0;
|
||||
}
|
||||
|
||||
i {
|
||||
grid-row: 1;
|
||||
counter-increment: i;
|
||||
background: pink;
|
||||
}
|
||||
i::before { content: counter(i, decimal); }
|
||||
|
||||
x {
|
||||
position: absolute;
|
||||
top:0; bottom:0; left:0; right:0;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:3/5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:3/-1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:auto/3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:auto/1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:3/5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:3/-1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:auto/3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:auto/1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: grid-aligned abs.pos. inside rel.pos. subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(10, 30px) 100px;
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
width: 500px;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: auto / 27px repeat(7, 30px);
|
||||
grid-column: 2 / span 8;
|
||||
grid-row: 2 / span 2;
|
||||
padding: 4px 0 1px 0;
|
||||
border: 3px solid black;
|
||||
min-height: 1em;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
i {
|
||||
grid-row: 1;
|
||||
counter-increment: i;
|
||||
background: pink;
|
||||
}
|
||||
i::before { content: counter(i, decimal); }
|
||||
|
||||
x {
|
||||
position: absolute;
|
||||
top:0; bottom:0; left:0; right:0;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:3/5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:3; right:33px">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:auto/3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:auto/1; right:-10px">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:3/5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:3/-1; left:13px">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:auto/3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:auto/1; left:-33px">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,131 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: grid-aligned abs.pos. inside rel.pos. subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="abs-pos-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(10, 30px);
|
||||
grid-template-areas: ". . . . . . . . . . .";
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
width: 500px;
|
||||
grid-auto-columns: 100px;
|
||||
grid-auto-rows: 100px;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: auto / subgrid;
|
||||
grid-column: 2 / span 8;
|
||||
grid-row: 2 / span 2;
|
||||
padding: 4px 33px 1px 10px;
|
||||
border: 3px solid black;
|
||||
min-width: 0;
|
||||
min-height: 1em;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
i {
|
||||
grid-row: 1;
|
||||
counter-increment: i;
|
||||
background: pink;
|
||||
}
|
||||
i::before { content: counter(i, decimal); }
|
||||
|
||||
x {
|
||||
position: absolute;
|
||||
top:0; bottom:0; left:0; right:0;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:3/5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:3/-1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:auto/3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:auto/1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:3/5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:3/-1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:auto/3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:auto/1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: baseline-aligned subgrid item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
|
||||
place-content: start;
|
||||
place-items: baseline start;
|
||||
border: 1px solid;
|
||||
text-decoration: underline blue;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 4;
|
||||
grid-row: 3 / span 2;
|
||||
min-width: 10px;
|
||||
min-height: 0;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
x, z {
|
||||
display: block;
|
||||
min-width: 20px;
|
||||
min-height: 10px;
|
||||
font-size: 8em;
|
||||
background: silver;
|
||||
}
|
||||
z {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="subgrid">
|
||||
<z></z><x> A</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="align-items: last baseline">
|
||||
<y style="grid-area:4/1">A </y>
|
||||
<div class="subgrid">
|
||||
<z></z><x> A</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: baseline-aligned subgrid item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="baseline-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
|
||||
place-content: start;
|
||||
place-items: baseline start;
|
||||
border: 1px solid;
|
||||
text-decoration: underline blue;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / auto;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 4;
|
||||
grid-row: 3 / span 2;
|
||||
min-width: 10px;
|
||||
min-height: 0;
|
||||
background: yellow;
|
||||
place-content: inherit;
|
||||
place-items: inherit;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width: 20px;
|
||||
min-height: 10px;
|
||||
font-size: 8em;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<y style="grid-area:4/1">A </y>
|
||||
<div class="subgrid">
|
||||
<x style="grid-row:2"> A</x><x></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="align-items: last baseline">
|
||||
<y style="grid-area:4/1">A </y>
|
||||
<div class="subgrid">
|
||||
<x></x><x style="grid-row:2"> A</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrid with definite grid-gap in both axes</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: inline-grid;
|
||||
gap: 20px 10px;
|
||||
grid-template-columns: repeat(4,auto);
|
||||
grid-template-rows: repeat(3,auto);
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box .box {
|
||||
background-color: #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-area: 1 / 1 / 2 / 3;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-area: 1/4;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-column: 1;
|
||||
grid-row: 2 / 4;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.d {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
row-gap: 100px;
|
||||
column-gap: 10px;
|
||||
grid: repeat(2,auto) / repeat(3,auto);
|
||||
}
|
||||
|
||||
.e {
|
||||
grid-area: 1/2; visibility:hidden; margin-left:15px;
|
||||
}
|
||||
.f {
|
||||
grid-area: 1/3; visibility:hidden; margin-left:10px;
|
||||
}
|
||||
.g {
|
||||
grid-area: 1/4; visibility:hidden; margin-left:15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="box a">A</div><div class="box e">E</div><div class="box f">F</div><div class="box g">G</div>
|
||||
<div class="box b">B</div>
|
||||
<div class="box c">C</div>
|
||||
<div class="box d">
|
||||
<div class="box">E</div>
|
||||
<div class="box">F</div>
|
||||
<div class="box">G</div>
|
||||
<div class="box h">H</div>
|
||||
<div class="box i">I</div>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrid with definite grid-gap in both axes</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="grid-gap-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: inline-grid;
|
||||
gap: 20px;
|
||||
grid-template-columns: repeat(4,auto);
|
||||
grid-template-rows: repeat(3,auto);
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box .box {
|
||||
background-color: #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-column: 4;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-column: 1;
|
||||
grid-row: 2 / 4;
|
||||
}
|
||||
|
||||
.d {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
row-gap: 100px;
|
||||
column-gap: 10px;
|
||||
grid: subgrid / subgrid;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="box a">A</div>
|
||||
<div class="box b">B</div>
|
||||
<div class="box c">C</div>
|
||||
<div class="box d">
|
||||
<div class="box e">E</div>
|
||||
<div class="box f">F</div>
|
||||
<div class="box g">G</div>
|
||||
<div class="box h">H</div>
|
||||
<div class="box i">I</div>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrid with border-bottom</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(5, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / auto;
|
||||
gap: 10px 20px;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 2 / span 5;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.subgrid > * { background: lightgrey; }
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:0px;
|
||||
}
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: magenta; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: grey; }
|
||||
|
||||
e {
|
||||
border: 0 solid lightblue;
|
||||
border-bottom-width: 40px;
|
||||
margin: -5px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid">
|
||||
<c>c</c>
|
||||
<d>d</d>
|
||||
<e></e>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrid with border-bottom</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-gap-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(5, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / auto;
|
||||
gap: 10px 20px;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 2 / span 5;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: 0 solid lightblue;
|
||||
border-bottom-width: 40px;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.subgrid > * { background: lightgrey; }
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:0px;
|
||||
}
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: magenta; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: grey; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid">
|
||||
<c>c</c>
|
||||
<d>d</d>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrid with border-bottom and percentage gap</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 0 15px 15px 0 0 40px / repeat(5, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / auto auto;
|
||||
gap: 3px 8px;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 2 / span 5;
|
||||
background: grey;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.subgrid > * { background: lightgrey; }
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:0px;
|
||||
}
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: magenta; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: grey; }
|
||||
|
||||
e { display:block; width: 20px; height:15px; background:black; }
|
||||
|
||||
f {
|
||||
grid-area: 4/2/span 1/span 5;
|
||||
background: lightblue!important;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1; height:0"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<f></f>
|
||||
<div class="subgrid">
|
||||
<c><e></e></c>
|
||||
<d><e></e></d>
|
||||
<c><e></e></c>
|
||||
<d><e></e></d>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrid with border-bottom and percentage gap</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="grid-gap-003-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(5, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / auto auto;
|
||||
gap: 20% 20%;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 2 / span 5;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: 0 solid lightblue;
|
||||
border-bottom-width: 40px;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.subgrid > * { background: lightgrey; }
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:0px;
|
||||
}
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: magenta; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: grey; }
|
||||
|
||||
e { display:block; width: 20px; height:15px; background:black; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid">
|
||||
<c><e></e></c>
|
||||
<d><e></e></d>
|
||||
<c><e></e></c>
|
||||
<d><e></e></d>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: nested subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:100px auto/100px auto;
|
||||
gap:20px;
|
||||
border:3px solid;
|
||||
background:yellow;
|
||||
}
|
||||
span { background:cyan; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div style="display:grid; grid: 100px 1em / 100px 1em; gap:60px; grid-area:span 2/span 2">
|
||||
<div style="display:grid; grid: 60px 1em / 100px; gap:100px; grid-row:span 2">
|
||||
<span>a</span><span>b</span>
|
||||
</div>
|
||||
<span style="grid-area:2/2">c</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: nested subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-gap-004-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:100px auto/100px auto;
|
||||
gap:20px;
|
||||
border:3px solid;
|
||||
background:yellow;
|
||||
}
|
||||
span { background:cyan; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div style="display:grid; grid:subgrid/subgrid; gap:100px; grid-area:span 2/span 2">
|
||||
<div style="display:grid; grid:subgrid/100px; gap:100px; grid-row:span 2">
|
||||
<span>a</span><span>b</span>
|
||||
</div>
|
||||
<span style="grid-area:2/2">c</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: nested subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
span { background:cyan; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="display:inline-grid; grid:100px/100px 0px; gap:100px; border:1px solid;">
|
||||
<div style="display:grid; grid:100px/140px calc(40px); gap:20px; grid-column:span 2">
|
||||
<span>a</span><span>b</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: nested subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-gap-005-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
span { background:cyan; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="display:inline-grid; grid:100px/100px 0px; gap:100px; border:1px solid;">
|
||||
<div style="display:grid; grid:100px/subgrid; gap:20px; grid-column:span 2">
|
||||
<span>a</span><span>b</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: nested subgrid, justify-content:space-around, overflowing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
body { margin:200px; }
|
||||
span { background:cyan; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="display:inline-grid; grid:100px/100px 10px 10px; gap:100px; border:1px solid; justify-content:center; width:50px">
|
||||
<div style="display:grid; grid:100px/140px 50px; gap:20px; grid-column:span 2">
|
||||
<span>a</span><span>b</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: nested subgrid, justify-content:space-around, overflowing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-gap-006-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
body { margin:200px; }
|
||||
span { background:cyan; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="display:inline-grid; grid:100px/100px 10px 10px; gap:100px; border:1px solid; justify-content:space-around; width:50px">
|
||||
<div style="display:grid; grid:100px/subgrid; gap:20px; grid-column:span 2">
|
||||
<span>a</span><span>b</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: nested ortogonal writing-mode subgrids</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:60px auto/100px auto;
|
||||
gap:100px 60px;
|
||||
border:3px solid;
|
||||
background:pink;
|
||||
}
|
||||
span { background:grey; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<span style="grid-area:1/1; background:lightgrey; width:60px; height:160px"></span>
|
||||
<span style="grid-area:1/1">a</span>
|
||||
<span style="grid-row:2; background:cyan">b</span>
|
||||
<span style="grid-area:2/2" class="vrl">ccc</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: nested ortogonal writing-mode subgrids</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-gap-007-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:100px auto/100px auto;
|
||||
gap:20px;
|
||||
border:3px solid;
|
||||
background:yellow;
|
||||
}
|
||||
span { background:cyan; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="vrl" style="display:grid; grid:subgrid/subgrid; gap:100px; grid-area:span 2/span 2; background:pink">
|
||||
<div class="hl" style="display:grid; grid:subgrid/100px; gap:100px; grid-column:span 2; background:lightgrey">
|
||||
<span>a</span><span>b</span>
|
||||
</div>
|
||||
<span style="grid-area:1/2">ccc</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: nested orthogonal writing-mode subgrids with percentage column-gap</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:100px 375px/300px;
|
||||
border:3px solid;
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background:lightgrey;
|
||||
row-gap: 25px;
|
||||
}
|
||||
span {
|
||||
grid-row:2;
|
||||
background:cyan;
|
||||
width:50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<span>ccc</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: nested orthogonal writing-mode subgrids with percentage column-gap</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-gap-008-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:100px auto/200px auto;
|
||||
border:3px solid;
|
||||
background:grey;
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
}
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: 50px / subgrid;
|
||||
column-gap: 10%;
|
||||
grid-area: span 2/span 2;
|
||||
justify-content:end;
|
||||
background:lightgrey;
|
||||
}
|
||||
span { background:cyan; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid vlr">
|
||||
<span class="hl">ccc</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: nested orthogonal writing-mode subgrids with percentage row-gap</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:400px/300px;
|
||||
border:3px solid;
|
||||
background:lightgrey;
|
||||
width:300px;
|
||||
height:400px;
|
||||
}
|
||||
span {
|
||||
margin-top:350px;
|
||||
margin-right:115px;
|
||||
background:cyan;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<span>cc</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: nested orthogonal writing-mode subgrids with percentage row-gap</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-gap-009-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:100px auto/200px auto;
|
||||
border:3px solid;
|
||||
background:grey;
|
||||
width:300px;
|
||||
height:400px;
|
||||
}
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / 50px;
|
||||
row-gap: 10%;
|
||||
grid-area: span 2/span 2;
|
||||
background:lightgrey;
|
||||
}
|
||||
span { background:cyan; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid vlr">
|
||||
<span class="hl">cc</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrid grid-gap:20px</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
grid-template-columns: 150px 100px 150px 100px;
|
||||
grid-template-rows: repeat(3,auto);
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box .box {
|
||||
background-color: #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-column: 4 ;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-column: 1;
|
||||
grid-row: 2 / 4;
|
||||
}
|
||||
|
||||
.box .f { background-color: purple; }
|
||||
.box .i { background-color: blue; }
|
||||
.box .e { background-color: yellow; }
|
||||
.a { background-color: grey; }
|
||||
.c { background-color: black; }
|
||||
.b { background-color: black; }
|
||||
|
||||
.d {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid: auto / 70px 130px 70px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="box a">A</div>
|
||||
<div class="box b">B</div>
|
||||
<div class="box c">C</div>
|
||||
<div class="box d">
|
||||
<div class="box e">E</div>
|
||||
<div class="box f">F</div>
|
||||
<div class="box g">G</div>
|
||||
<div class="box h">H</div>
|
||||
<div class="box i">I</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrid grid-gap:20px</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="grid-gap-larger-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
grid-template-columns: 150px 100px 150px 100px;
|
||||
grid-template-rows: repeat(3,auto);
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box .box {
|
||||
background-color: #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-column: 4 ;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-column: 1;
|
||||
grid-row: 2 / 4;
|
||||
}
|
||||
|
||||
.box .f { background-color: purple; }
|
||||
.box .i { background-color: blue; }
|
||||
.box .e { background-color: yellow; }
|
||||
.a { background-color: grey; }
|
||||
.c { background-color: black; }
|
||||
.b { background-color: black; }
|
||||
|
||||
.d {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid: subgrid / subgrid;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="box a">A</div>
|
||||
<div class="box b">B</div>
|
||||
<div class="box c">C</div>
|
||||
<div class="box d">
|
||||
<div class="box e">E</div>
|
||||
<div class="box f">F</div>
|
||||
<div class="box g">G</div>
|
||||
<div class="box h">H</div>
|
||||
<div class="box i">I</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrid with larger gap than parent grid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:100px auto/100px;
|
||||
gap:20px;
|
||||
border:3px solid;
|
||||
background:yellow;
|
||||
}
|
||||
span { background:lightgrey; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<span style="height:60px">a</span><span style="margin-top:40px">b</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrid with larger gap than parent grid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="grid-gap-larger-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:100px auto/100px;
|
||||
gap:20px;
|
||||
border:3px solid;
|
||||
background:yellow;
|
||||
}
|
||||
span { background:lightgrey; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div style="display:grid; grid:subgrid/100px; gap:100px; grid-row:span 2">
|
||||
<span>a</span><span>b</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrid grid-gap:normal</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 150px 100px 150px 100px;
|
||||
grid-template-rows: repeat(3,minmax(100px,auto));
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box .box {
|
||||
background-color: #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-column: 4 ;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-column: 1;
|
||||
grid-row: 2 / 4;
|
||||
}
|
||||
|
||||
.d {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 80px 150px 80px;
|
||||
grid-template-rows: 80px 80px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="box a">A</div>
|
||||
<div class="box b">B</div>
|
||||
<div class="box c">C</div>
|
||||
<div class="box d">
|
||||
<div class="box e">E</div>
|
||||
<div class="box f">F</div>
|
||||
<div class="box g">G</div>
|
||||
<div class="box h">H</div>
|
||||
<div class="box i">I</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrid grid-gap:normal</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="grid-gap-normal-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 150px 100px 150px 100px;
|
||||
grid-template-rows: repeat(3,minmax(100px,auto));
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box .box {
|
||||
background-color: #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-column: 4 ;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-column: 1;
|
||||
grid-row: 2 / 4;
|
||||
}
|
||||
|
||||
.d {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
grid-template-rows: subgrid;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="box a">A</div>
|
||||
<div class="box b">B</div>
|
||||
<div class="box c">C</div>
|
||||
<div class="box d">
|
||||
<div class="box e">E</div>
|
||||
<div class="box f">F</div>
|
||||
<div class="box g">G</div>
|
||||
<div class="box h">H</div>
|
||||
<div class="box i">I</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrid grid-gap:0px</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid-template-columns: 170px 100px 190px 100px;
|
||||
grid-template-rows: repeat(3,auto);
|
||||
gap: 0;
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box .box {
|
||||
background-color: #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-column: 1 / 3;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-column: 4 ;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-column: 1;
|
||||
grid-row: 2 / 4;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.box .f { background-color: purple; }
|
||||
.box .i { background-color: blue; }
|
||||
.box .e { background-color: yellow; }
|
||||
|
||||
.d {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
gap: 0;
|
||||
grid-template-columns: 90px 170px 90px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="box a">A</div>
|
||||
<div class="box b">B</div>
|
||||
<div class="box c">C</div>
|
||||
<div class="box d">
|
||||
<div class="box e">E</div>
|
||||
<div class="box f">F</div>
|
||||
<div class="box g">G</div>
|
||||
<div class="box h">H</div>
|
||||
<div class="box i">I</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrid grid-gap:0px</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="grid-gap-smaller-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid-template-columns: 150px 100px 150px 100px;
|
||||
grid-template-rows: repeat(3,auto);
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box .box {
|
||||
background-color: #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-column: 4 ;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-column: 1;
|
||||
grid-row: 2 / 4;
|
||||
}
|
||||
|
||||
.box .f { background-color: purple; }
|
||||
.box .i { background-color: blue; }
|
||||
.box .e { background-color: yellow; }
|
||||
|
||||
.d {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
gap: 0;
|
||||
grid: subgrid / subgrid;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="box a">A</div>
|
||||
<div class="box b">B</div>
|
||||
<div class="box c">C</div>
|
||||
<div class="box d">
|
||||
<div class="box e">E</div>
|
||||
<div class="box f">F</div>
|
||||
<div class="box g">G</div>
|
||||
<div class="box h">H</div>
|
||||
<div class="box i">I</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrid item percentage height</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style type="text/css">
|
||||
|
||||
.wrapper {
|
||||
padding: 2px;
|
||||
padding-top: 5px;
|
||||
border: 1px solid;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto auto / auto;
|
||||
grid-row-gap: 60px;
|
||||
height: 300px;
|
||||
background: lightgrey;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / auto;
|
||||
grid-row: span 2;
|
||||
grid-row-gap: 40px;
|
||||
padding: 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.item {
|
||||
align-self: start;
|
||||
width: 100px;
|
||||
background: grey;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.hidden { visibility: hidden; }
|
||||
.a1 { grid-area: 1/1; }
|
||||
.a2 { grid-area: 2/1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid">
|
||||
<div class="item hidden a1" style="height:25px"></div><div class="item a1" style="margin-top:5px; margin-bottom:-10px; align-self:stretch"></div>
|
||||
<div class="item hidden a2" style="height:120px"></div><div class="item a2" style="margin-top:-10px; height:100px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrid item percentage height</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="item-percentage-height-001-ref.html">
|
||||
<style type="text/css">
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto auto / auto;
|
||||
grid-row-gap: 60px;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
padding-top: 5px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / auto;
|
||||
grid-row: span 2;
|
||||
grid-row-gap: 40px;
|
||||
background: lightgrey;
|
||||
padding: 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.item {
|
||||
align-self: start;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="height:100px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrid item using line names from outer grid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto / [a] 50px 50px [a] 50px 50px [a];
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: 50px / subgrid;
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
x { background: grey; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid">
|
||||
<x style="grid-column: 1 / 3"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrid item using line names from outer grid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="line-names-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto / [a] 50px 50px [a] 50px 50px [a];
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: 50px / subgrid;
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
x { background: grey; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid">
|
||||
<x style="grid-column: span a / a -1"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrid item using line names from outer grid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="line-names-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto / repeat(10, 10px) repeat(10, [a] 10px) [a];
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: 50px / subgrid;
|
||||
grid-column: span 10;
|
||||
}
|
||||
|
||||
x { background: grey; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid">
|
||||
<x style="grid-column: span a / a 8"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: nested subgrid item using line names from outer grid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="line-names-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto / [a] 50px 50px [a] 50px 50px [a];
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: 50px / subgrid;
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
x { background: grey; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid">
|
||||
<div class="subgrid" style="grid-column: span 3">
|
||||
<x style="grid-column: span a / a -1"></x>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrid item using mix of outer/inner line names</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto / [a] 50px 50px 50px 50px [b] 50px 50px [a b];
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid [x] [b] [] [] [b];
|
||||
grid-auto-rows: 10px;
|
||||
grid-column: 2 / span 4;
|
||||
}
|
||||
|
||||
x { background: grey; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid">
|
||||
<x style="grid-row:1; grid-column: 2 / 4"></x>
|
||||
<x style="grid-row:2; grid-column: 2 / 5"></x>
|
||||
<x style="grid-row:3; grid-column: 2 / 4"></x>
|
||||
<x style="grid-row:4; grid-column: 2 / 4"></x>
|
||||
<x style="grid-row:5; grid-column: 2 / 5"></x>
|
||||
<x style="grid-row:6; grid-column: 2 / 4"></x>
|
||||
<x style="grid-row:7; grid-column: 1 / 4"></x>
|
||||
<x style="grid-row:8; grid-column: 2 / 4"></x>
|
||||
<x style="grid-row:9; grid-column: 2 / 3"></x>
|
||||
<x style="grid-row:10; grid-column: 2 / 3"></x>
|
||||
<x style="grid-row:11; grid-column: 2 / 5"></x>
|
||||
<x style="grid-row:12; grid-column: 2 / 4"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrid item using mix of outer/inner line names</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="line-names-004-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto / [a] 50px 50px 50px 50px [b] 50px 50px [a b];
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid [x] [b] [] [] [b];
|
||||
grid-auto-rows: 10px;
|
||||
grid-column: 2 / span 4;
|
||||
}
|
||||
|
||||
x { background: grey; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid">
|
||||
<x style="grid-row:1; grid-column: b / b 2"></x>
|
||||
<x style="grid-row:2; grid-column: b / b -1"></x>
|
||||
<x style="grid-row:3; grid-column: b / b -2"></x>
|
||||
<x style="grid-row:4; grid-column: b / span b"></x>
|
||||
<x style="grid-row:5; grid-column: b / span b 2"></x>
|
||||
<x style="grid-row:6; grid-column: span b / b 2"></x>
|
||||
<x style="grid-row:7; grid-column: span b 2 / b 2"></x>
|
||||
<x style="grid-row:8; grid-column: b -2 / b"></x>
|
||||
<x style="grid-row:9; grid-column: b -3 / b"></x>
|
||||
<x style="grid-row:10; grid-column: b / b"></x>
|
||||
<x style="grid-row:11; grid-column: b / b 10"></x>
|
||||
<x style="grid-row:12; grid-column: span b / b -2"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,153 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrid line name resolution</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: [a] repeat(1, [b] auto [c]) [d] repeat(3, [b] auto [c]) [d] /
|
||||
[a] 30px [b] 30px [c] 30px [] 30px [e-start] 30px [] 30px [x] 30px [h] 30px [i] 30px [j] 30px [k];
|
||||
grid-template-areas: ". . . e . . . . . . .";
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
width: 500px;
|
||||
grid-auto-columns: 100px;
|
||||
grid-auto-rows: 100px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: auto / subgrid;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 8;
|
||||
grid-row: 2 / span 2;
|
||||
min-width:0;
|
||||
min-height:0;
|
||||
}
|
||||
|
||||
.subgrid2 {
|
||||
display: grid;
|
||||
grid: auto / subgrid [] [] [] [b];
|
||||
grid-column: span 10;
|
||||
}
|
||||
|
||||
.subgrid#s1 {
|
||||
grid-template-areas: ". e e . . . .";
|
||||
}
|
||||
|
||||
i {
|
||||
grid-row: 1;
|
||||
counter-increment: i;
|
||||
}
|
||||
i::before { content: counter(i, decimal); }
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:20px;
|
||||
background:silver;
|
||||
}
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid" id="s1">
|
||||
<x style="grid-column:10 / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid hr">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hl" id="s2">
|
||||
<x style="grid-column: 10 / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr" id="s2">
|
||||
<x style="grid-column: 10 / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-column:1 / 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-column:10 / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-column: 1 / -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-row:2; grid-column: 1 / -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-column: span 4 / 11">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px; grid: auto / repeat(20, [a] 50px) [a] ">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2" style="grid-row:2">
|
||||
<x style="grid-column: 10 / 11">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid: auto / repeat(10, 50px) repeat(10, [a] 50px) [a]">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid; grid-column: span 10; grid-row:2">
|
||||
<x style="grid-column: 1 / 11">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style='display:grid; grid-template-areas: "a a a a a a a a a a"'>
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
|
||||
<x style="grid-column: 1 / 6">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style='display:grid; grid-template-areas: ". . . . . . a a a a"'>
|
||||
<div style='display:grid; grid-template-areas: ". . . . . . . a a a"; grid-template-columns:subgrid; grid-column:span 10;'>
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
|
||||
<x style="grid-column: 2 / 6">x</x>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,155 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrid line name resolution</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="line-names-005-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: [a] repeat(1, [b] auto [c]) [d] repeat(3, [b] auto [c]) [d] /
|
||||
[a] 30px [b] 30px [c] 30px [] 30px [e-start] 30px [] 30px [x] 30px [h] 30px [i] 30px [j] 30px [k];
|
||||
grid-template-areas: ". . . e . . . . . . .";
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
width: 500px;
|
||||
grid-auto-columns: 100px;
|
||||
grid-auto-rows: 100px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: auto / subgrid;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 8;
|
||||
grid-row: 2 / span 2;
|
||||
min-width:0;
|
||||
min-height:0;
|
||||
}
|
||||
|
||||
.subgrid2 {
|
||||
display: grid;
|
||||
grid: auto / subgrid [] [] [] [b];
|
||||
grid-column: span 10;
|
||||
}
|
||||
|
||||
.subgrid#s1 {
|
||||
grid-template-areas: ". e e . . . .";
|
||||
}
|
||||
|
||||
i {
|
||||
grid-row: 1;
|
||||
counter-increment: i;
|
||||
}
|
||||
i::before { content: counter(i, decimal); }
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:20px;
|
||||
background:silver;
|
||||
}
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid" id="s1">
|
||||
<x style="grid-column:foo / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid hr">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hl" id="s2">
|
||||
<x style="grid-column: x 6 / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr" id="s2">
|
||||
<x style="grid-column: x 6 / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-column:1 / b">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-column:foo / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-column: span bar / foo 3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-row:2; grid-column: span bar / foo 3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-column:span 4 / foo">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px; grid: auto / repeat(20, [a] 50px) [a] ">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2" style="grid-row:2">
|
||||
<x style="grid-column:foo / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid: auto / repeat(10, 50px) repeat(10, [a] 50px) [a]">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid; grid-column: span 10; grid-row:2">
|
||||
<x style="grid-column: span a / a 8">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style='display:grid; grid-template-areas: "a a a a a a a a a a"'>
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
|
||||
<x style="grid-column: a">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style='display:grid; grid-template-areas: ". . . . . . a a a a"'>
|
||||
<div style='display:grid; grid-template-areas: ". . . . . . . a a a"; grid-template-columns:subgrid; grid-column:span 10;'>
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
|
||||
<x style="grid-column: a">x</x>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrid line name resolution</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
div > div { background: grey; grid-column: 2 / span 2; }
|
||||
|
||||
i {
|
||||
grid-row: 1;
|
||||
counter-increment: i;
|
||||
}
|
||||
i::before { content: counter(i, decimal); }
|
||||
|
||||
x { background: silver; }
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';">
|
||||
<x style="grid-column: 2 / 3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [a];">
|
||||
<x style="grid-column: 1 / 2">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2">
|
||||
<x style="grid-column: 1 / 2">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: 2 / 3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: 3 / 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6">
|
||||
<x style="grid-column: 2 / 3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';">
|
||||
<x style="grid-column: 2 / 3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [a];">
|
||||
<x style="grid-column: 1 / 2">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2">
|
||||
<x style="grid-column: 1 / 2">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: 2 / 3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: 3 / 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6">
|
||||
<x style="grid-column: 2 / 3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,117 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrid line name resolution</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="line-names-006-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
div > div { background: grey; grid-column: 2 / span 2; }
|
||||
|
||||
i {
|
||||
grid-row: 1;
|
||||
counter-increment: i;
|
||||
}
|
||||
i::before { content: counter(i, decimal); }
|
||||
|
||||
x { background: silver; }
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';">
|
||||
<x style="grid-column: a-end -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [a];">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6">
|
||||
<x style="grid-column: a">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';">
|
||||
<x style="grid-column: a-end -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [a];">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6">
|
||||
<x style="grid-column: a">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,134 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: line name resolution for grid-aligned abs.pos. inside subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: 0.2em / repeat(10,30px);
|
||||
grid-auto-rows: 2em;
|
||||
border: 1px solid;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
div > div {
|
||||
padding: 4px 0 1px 0;
|
||||
border: 3px solid black;
|
||||
background: grey;
|
||||
margin-left: 30px;
|
||||
width: 54px;
|
||||
}
|
||||
|
||||
n {
|
||||
grid-row: 1;
|
||||
counter-increment: n;
|
||||
}
|
||||
n::before { content: counter(n, decimal); }
|
||||
|
||||
x {
|
||||
position: absolute;
|
||||
left:0; right:0;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div>
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div>
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="margin-left:0">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="width:84px">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="width:84px">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="width:174px">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="margin-left:0">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="width:84px">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="width:84px">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="width:174px">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,137 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: line name resolution for grid-aligned abs.pos. inside subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="line-names-007-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: 0.2em / repeat(10,30px);
|
||||
grid-auto-rows: 2em;
|
||||
border: 1px solid;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
div > div {
|
||||
display: grid;
|
||||
grid-column: 2 / span 2;
|
||||
grid: auto / subgrid;
|
||||
padding: 4px 33px 1px 10px;
|
||||
border: 3px solid black;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
n {
|
||||
grid-row: 1;
|
||||
counter-increment: n;
|
||||
}
|
||||
n::before { content: counter(n, decimal); }
|
||||
|
||||
x {
|
||||
position: absolute;
|
||||
left:0; right:0;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-areas: '. a a a a';">
|
||||
<x style="grid-column: a-end -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [a];">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [a]; grid-column:1/span 2">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [a] [a] [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [] [a] [a]; grid-column-end:span 6">
|
||||
<x style="grid-column: a">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-areas: '. a a a a';">
|
||||
<x style="grid-column: a-end -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [a];">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [a]; grid-column:1/span 2">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [a] [a] [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [] [a] [a]; grid-column-end:span 6">
|
||||
<x style="grid-column: a">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,162 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: line name resolution for grid-aligned abs.pos. inside subgrid CB</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 0.2em 1.4em / repeat(10,30px);
|
||||
border: 1px solid;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
div > div {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-column: 2 / span 2;
|
||||
grid: auto / subgrid;
|
||||
padding: 4px 0 1px 10px;
|
||||
border: 1px solid black;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
n {
|
||||
grid-row: 1;
|
||||
counter-increment: n;
|
||||
}
|
||||
n::before { content: counter(n, decimal); }
|
||||
|
||||
x {
|
||||
position: absolute;
|
||||
left:0; right:0;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div>
|
||||
<x style="grid-column: -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div>
|
||||
<x style="grid-column: 2">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-column-end:span 5">
|
||||
<x style="grid-column: 2">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-column:2/span 5">
|
||||
<x style="grid-column: 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-column-end:span 6">
|
||||
<x style="grid-column: 2 / 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-column-end:span 3">
|
||||
<x style="grid-column: -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-column:2/span 6">
|
||||
<x style="grid-column: 3 / 5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-column:2/span 6">
|
||||
<x style="grid-column: 3 / 5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr">
|
||||
<x style="grid-column: 3 / auto">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr">
|
||||
<x style="grid-column: 2 / auto">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-column-end:span 5">
|
||||
<x style="grid-column: 2 / auto">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-column:2/span 5">
|
||||
<x style="grid-column: 6 / auto">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-column-end:span 6">
|
||||
<x style="grid-column: 2 / 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-column-end:span 3">
|
||||
<x style="grid-column: 4 / auto">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-column:2/span 6">
|
||||
<x style="grid-column: 5 / 7">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-column:2/span 6">
|
||||
<x style="grid-column: 5 / 7">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,164 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: line name resolution for grid-aligned abs.pos. inside subgrid CB</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="line-names-008-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 0.2em 1.4em / repeat(10,30px);
|
||||
border: 1px solid;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
div > div {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-column: 2 / span 2;
|
||||
grid: auto / subgrid;
|
||||
padding: 4px 0 1px 10px;
|
||||
border: 1px solid black;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
n {
|
||||
grid-row: 1;
|
||||
counter-increment: n;
|
||||
}
|
||||
n::before { content: counter(n, decimal); }
|
||||
|
||||
x {
|
||||
position: absolute;
|
||||
left:0; right:0;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-areas: '. a a a a';">
|
||||
<x style="grid-column: a-end -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [][a][];">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [][a][]; grid-column-end:span 5">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(5,[a]30px) repeat(5,30px)">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [a]; grid-column:2/span 5">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px)">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 6">
|
||||
<x style="grid-column: a 2 / a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
|
||||
<x style="grid-column: a/span a">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
|
||||
<x style="grid-column: a/a 2">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-areas: '. a a a a';">
|
||||
<x style="grid-column: a-end -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [][a][];">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [][a][]; grid-column-end:span 5">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(5,[a]30px) repeat(5,30px)">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [a]; grid-column:2/span 5">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px)">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 6">
|
||||
<x style="grid-column: a 2 / a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
|
||||
<x style="grid-column: a/span a">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
|
||||
<x style="grid-column: a/a 2">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrids with different writing-mode than parent</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(5, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: auto / auto;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 2 / span 5;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: 0 solid lightblue;
|
||||
border-bottom-width: 40px;
|
||||
}
|
||||
|
||||
.vlr {
|
||||
writing-mode: vertical-lr;
|
||||
grid: auto / auto;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 3 / span 5;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:0px;
|
||||
}
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: grey; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: black; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; }
|
||||
.vr { writing-mode: vertical-rl; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="text-indent:10px">
|
||||
A B
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vr">
|
||||
<div class="subgrid hr">A B</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:3; height:50px; background:black"></x>
|
||||
<x style="grid-row:4; height:50px; background:pink"></x>
|
||||
<x style="grid-row:5; height:40px; background:black"></x>
|
||||
<div class="subgrid vlr">
|
||||
<div class="subgrid hl">
|
||||
<x style="grid-row:2 / span 2; height: 100px">A B C D E F</x>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrids with different writing-mode than parent</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="orthogonal-writing-mode-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(5, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / auto;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 2 / span 5;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: 0 solid lightblue;
|
||||
border-bottom-width: 40px;
|
||||
}
|
||||
|
||||
.vlr {
|
||||
writing-mode: vertical-lr;
|
||||
grid: auto / subgrid;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 3 / span 5;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:0px;
|
||||
}
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: grey; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: black; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; }
|
||||
.vr { writing-mode: vertical-rl; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="text-indent:10px">
|
||||
A B
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vr">
|
||||
<div class="subgrid hr">A B</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr">
|
||||
<div class="subgrid hl">
|
||||
<x style="grid-row:2 / span 2; height: 100px">A B C D E F</x>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrids with different writing-mode than parent</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 Ahem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(5, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: auto / auto;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 2 / span 5;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: 0 solid lightblue;
|
||||
border-bottom-width: 40px;
|
||||
background: yellow;
|
||||
padding: 1px 3px 5px 7px;
|
||||
margin: 3px 11px 7px 5px;
|
||||
}
|
||||
|
||||
.vlr {
|
||||
writing-mode: vertical-lr;
|
||||
grid: auto / auto;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 3 / span 5;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:0px;
|
||||
}
|
||||
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: grey; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: black; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; }
|
||||
.vr { writing-mode: vertical-rl; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid vrl">
|
||||
<x style="grid-column:1; height:0px"></x><x style="grid-column:2; height:16px"></x><x style="grid-column:3; height:30px"></x><x style="grid-column:4; height:52px"></x>
|
||||
<div class="subgrid hl">
|
||||
<x style="grid-column:span 12">A _B</x>
|
||||
<x style="width:100px; height:30px"></x>
|
||||
<x style="background:yellow">C D_</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1; height:0px"></x><x style="grid-row:2; height:0px"></x><x style="grid-row:3; height:52px"></x><x style="grid-row:4; height:30px"></x>
|
||||
<div class="subgrid vlr" style="grid: auto / repeat(5, auto);">
|
||||
<x>A _B</x>
|
||||
<x style="width:100px; height:30px"></x>
|
||||
<x>C D_</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1; height:0px"></x><x style="grid-row:2; height:0px"></x><x style="grid-row:3; height:4px"></x>
|
||||
<div class="subgrid vlr"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrids with different writing-mode than parent</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="orthogonal-writing-mode-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 Ahem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(5, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / auto;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 2 / span 5;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: 0 solid lightblue;
|
||||
border-bottom-width: 40px;
|
||||
background: yellow;
|
||||
padding: 1px 3px 5px 7px;
|
||||
margin: 3px 11px 7px 5px;
|
||||
}
|
||||
|
||||
.vlr {
|
||||
writing-mode: vertical-lr;
|
||||
grid: auto / subgrid;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 3 / span 5;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:0px;
|
||||
}
|
||||
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: grey; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: black; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; }
|
||||
.vr { writing-mode: vertical-rl; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid vrl">
|
||||
<x style="grid-column:1"></x><x style="grid-column:2"></x><x style="grid-column:3"></x><x style="grid-column:4"></x><x style="grid-column:5"></x><x style="grid-column:6"></x>
|
||||
<div class="subgrid hl">
|
||||
<x style="grid-column:span 12">A _B</x>
|
||||
<x style="width:100px; height:30px"></x>
|
||||
<x style="background:yellow">C D_</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr">
|
||||
<x>A _B</x>
|
||||
<x style="width:100px; height:30px"></x>
|
||||
<x>C D_</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrids with different writing-mode than parent</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 Ahem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 2px repeat(4, auto) / 10px repeat(50, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: repeat(50, auto) / repeat(4, auto);
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 3 / span 3;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: solid lightblue;
|
||||
border-width: 1px 5px 3px 7px;
|
||||
padding: 5px 7px 3px 1px;
|
||||
margin: 7px 3px 5px 1px;
|
||||
}
|
||||
|
||||
item { text-indent:10px; background: magenta; }
|
||||
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: grey; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: black; }
|
||||
x:nth-child(2n+5) { background: blue; }
|
||||
x:nth-child(2n+6) { background: cyan; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; }
|
||||
.vr { writing-mode: vertical-rl; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:11px"></x>
|
||||
<div class="subgrid vrl">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:13px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:23px"></x>
|
||||
<div class="subgrid vlr">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:11px"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
<item class="hl" style="grid-area:3/5/4/6">AB</item>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:40px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:11px"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item class="hl" style="height:27px">AB</item>
|
||||
</div>
|
||||
<item class="hl" style="grid-area:3/5/4/6; height:40px; width:10px"></item>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:40px"></x><x style="grid-row:5;height:11px"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item class="hl" style="height:12px">AB</item>
|
||||
</div>
|
||||
<item class="hl" style="grid-area:4/5/5/6; height:40px; width:10px"></item>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:40px"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item class="hl" style="height:12px">AB</item>
|
||||
</div>
|
||||
<item class="hl" style="grid-area:5/5/6/6; height:40px; width:10px"></item>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrids with different writing-mode than parent</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="orthogonal-writing-mode-003-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 Ahem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 2px repeat(4, auto) / 10px repeat(50, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / subgrid;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 3 / span 3;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: solid lightblue;
|
||||
border-width: 1px 5px 3px 7px;
|
||||
padding: 5px 7px 3px 1px;
|
||||
margin: 7px 3px 5px 1px;
|
||||
}
|
||||
|
||||
item { text-indent:10px; background: magenta; }
|
||||
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: grey; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: black; }
|
||||
x:nth-child(2n+5) { background: blue; }
|
||||
x:nth-child(2n+6) { background: cyan; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; }
|
||||
.vr { writing-mode: vertical-rl; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
<item class="hl" style="grid-area:3/5/4/6">AB</item>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
<item class="hl" style="grid-area:3/5/4/6; height:40px; width:10px"></item>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
<item class="hl" style="grid-area:4/5/5/6; height:40px; width:10px"></item>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
<item class="hl" style="grid-area:5/5/6/6; height:40px; width:10px"></item>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,128 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrids with different writing-mode than parent</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 2px repeat(4, auto) / 10px repeat(50, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(50, auto);;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 3 / span 3;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: solid lightblue;
|
||||
border-width: 1px 5px 3px 7px;
|
||||
padding: 5px 7px 3px 1px;
|
||||
margin: 7px 3px 5px 1px;
|
||||
}
|
||||
|
||||
item { background: magenta; }
|
||||
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: grey; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: black; }
|
||||
x:nth-child(2n+5) { background: blue; }
|
||||
x:nth-child(2n+6) { background: cyan; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; }
|
||||
.vr { writing-mode: vertical-rl; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:13px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x> <div class="subgrid vlr" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item><item>C</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:11px"></x>
|
||||
<div class="subgrid vrl" style="grid-column:5/8">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x>
|
||||
<div class="subgrid vrl" style="grid-column:5/8">
|
||||
<item>X</item><item>É</item><item>C</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:13px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
<div class="subgrid vlr" style="grid-column:5/8">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:11px"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
<div class="subgrid vrl" style="grid-column:5/8">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:20px"></x><x style="grid-row:5;height:21px"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5; grid-template-columns:10px 20px">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
<div class="subgrid vrl" style="grid-column:5/8; grid-template-columns:10px 20px">
|
||||
<item>X</item><item>ÉÉ</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:43px"></x><x style="grid-row:4;height:20px"></x><x style="grid-row:5;height:21px"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5; grid-template-columns:10px 20px">
|
||||
<item>X</item><item class="">É</item>
|
||||
</div>
|
||||
<div class="subgrid vrl" style="grid-column:5/8; grid-template-columns:30px 20px">
|
||||
<item>X</item><item>ÉÉ</item>
|
||||
</div>
|
||||
<div class="subgrid vrl" style="grid-column:8/11; grid-template-columns:30px 20px">
|
||||
<item>XXX</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,131 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrids with different writing-mode than parent</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="orthogonal-writing-mode-004-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 2px repeat(4, auto) / 10px repeat(50, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / subgrid;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 3 / span 3;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: solid lightblue;
|
||||
border-width: 1px 5px 3px 7px;
|
||||
padding: 5px 7px 3px 1px;
|
||||
margin: 7px 3px 5px 1px;
|
||||
}
|
||||
|
||||
item { background: magenta; }
|
||||
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: grey; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: black; }
|
||||
x:nth-child(2n+5) { background: blue; }
|
||||
x:nth-child(2n+6) { background: cyan; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; }
|
||||
.vr { writing-mode: vertical-rl; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item><item>C</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="grid-column:5/8">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="grid-column:5/8">
|
||||
<item>X</item><item>É</item><item>C</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
<div class="subgrid vlr" style="grid-column:5/8">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
<div class="subgrid vrl" style="grid-column:5/8">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
<div class="subgrid vrl" style="grid-column:5/8">
|
||||
<item>X</item><item>ÉÉ</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
<div class="subgrid vrl" style="grid-column:5/8">
|
||||
<item>X</item><item>ÉÉ</item>
|
||||
</div>
|
||||
<div class="subgrid vrl" style="grid-column:8/11">
|
||||
<item>XXX</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrid item auto block-size</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
|
||||
body { width:600px; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-flow:dense;
|
||||
column-gap: 40px;
|
||||
row-gap: 0px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
grid-row: auto / span 3;
|
||||
grid-template-rows: repeat(3, auto);
|
||||
grid-template-columns: auto;
|
||||
display: grid;
|
||||
row-gap: 40px;
|
||||
}
|
||||
|
||||
|
||||
.card .inner, .card footer {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card .inner { background: grey; }
|
||||
|
||||
.card h2 {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
background-color: rgb(3,99,143);
|
||||
border-bottom: 4px solid rgb(24,154,153);
|
||||
}
|
||||
|
||||
.card footer {
|
||||
background-color: rgb(182,222,211);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
item {
|
||||
border: 1px solid;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.hidden { visibility: hidden; }
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<div class="card">
|
||||
<h2><span class="hidden">My title</span></h2>
|
||||
<div class="inner">
|
||||
<p>The contents.<span class="hidden"> I have a lot of content, more content than the other ones.</span></p>
|
||||
</div>
|
||||
<footer>Footer contents</footer>
|
||||
</div>
|
||||
|
||||
<div class="card hidden">
|
||||
<h2 style="grid-area:1/1"><span>My title</span></h2>
|
||||
<div class="inner" style="grid-area:2/1">
|
||||
<p>The contents. I have a lot of content, more content than the other ones.</p>
|
||||
</div>
|
||||
<footer style="grid-area:3/1">Footer contents</footer>
|
||||
|
||||
<item style="grid-area:1/1">1</item>
|
||||
<item style="grid-area:2/1">2</item>
|
||||
<item style="grid-area:3/1">3</item>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>My title</h2>
|
||||
<div class="inner">
|
||||
<p>The contents. I have a lot of content, more content than the other ones.</p>
|
||||
</div>
|
||||
<footer><span class="hidden">Footer contents</span></footer>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: subgrid item auto block-size</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<link rel="match" href="subgrid-item-block-size-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
|
||||
body { width:600px; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-flow:dense;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
grid-row: auto / span 3;
|
||||
grid-template-rows: subgrid;
|
||||
grid-template-columns: auto;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
|
||||
.card .inner, .card footer {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card .inner { background: grey; }
|
||||
|
||||
.card h2 {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
background-color: rgb(3,99,143);
|
||||
border-bottom: 4px solid rgb(24,154,153);
|
||||
}
|
||||
|
||||
.card footer {
|
||||
background-color: rgb(182,222,211);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
item {
|
||||
border: 1px solid;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<div class="card">
|
||||
<h2></h2>
|
||||
<div class="inner">
|
||||
<p>The contents.</p>
|
||||
</div>
|
||||
<footer>Footer contents</footer>
|
||||
</div>
|
||||
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
|
||||
<div class="card">
|
||||
<h2>My title</h2>
|
||||
<div class="inner">
|
||||
<p>The contents. I have a lot of content, more content than the other ones.</p>
|
||||
</div>
|
||||
<footer></footer>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -45,6 +45,13 @@ test_invalid_value("clip-path", "ellipse(-50px 60px at 70% 80%)");
|
|||
test_invalid_value("clip-path", "polygon(1%)");
|
||||
|
||||
test_invalid_value("clip-path", "unknown-box");
|
||||
|
||||
test_invalid_value("clip-path", 'path(abc, "m 20 0 h -100 z")');
|
||||
test_invalid_value("clip-path", 'path(nonzero)');
|
||||
test_invalid_value("clip-path", 'path(evenodd, "")');
|
||||
test_invalid_value("clip-path", 'path("m 20 0 h -100", nonzero)');
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -42,6 +42,14 @@ test_valid_value("clip-path", "polygon(1% 2%)");
|
|||
test_valid_value("clip-path", "polygon(nonzero, 1px 2px, 3em 4em)", "polygon(1px 2px, 3em 4em)");
|
||||
test_valid_value("clip-path", "polygon(evenodd, 1px 2px, 3em 4em, 5pt 6%)");
|
||||
|
||||
// New supported shape in [css-shapes-2]
|
||||
// https://drafts.csswg.org/css-shapes-2/#supported-basic-shapes
|
||||
test_valid_value("clip-path", 'path("m 20 0 h -100")');
|
||||
test_valid_value("clip-path", 'path(evenodd, "M 20 20 h 60 v 60 h -60 Z M 30 30 h 40 v 40 h -40 Z")');
|
||||
test_valid_value("clip-path",
|
||||
'path(nonzero, "M20,20h60 v60 h-60z M30,30 h40 v40 h-40z")',
|
||||
'path("M 20 20 h 60 v 60 h -60 Z M 30 30 h 40 v 40 h -40 Z")');
|
||||
|
||||
// <geometry-box>
|
||||
test_valid_value("clip-path", "border-box");
|
||||
test_valid_value("clip-path", "padding-box");
|
||||
|
@ -57,7 +65,7 @@ test_valid_value("clip-path", "circle(7% at 8% 9%) border-box");
|
|||
// <geometry-box> basic-shape>
|
||||
test_valid_value("clip-path", "border-box circle(7% at 8% 9%)");
|
||||
|
||||
// <clip-source>
|
||||
// <clip-source>
|
||||
test_valid_value("clip-path", "url(https://example.com/)", ["url(https://example.com/)", "url(\"https://example.com/\")"]);
|
||||
test_valid_value("clip-path", "url(\"https://example.com/\")", ["url(https://example.com/)", "url(\"https://example.com/\")"]);
|
||||
</script>
|
||||
|
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<title>'text-orientation: upright' forces text to strong LTR in vertical typographic modes</title>
|
||||
<link rel=help href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
|
||||
<link rel=match href="reference/direction-upright-001.html">
|
||||
<meta charset=utf-8>
|
||||
<style>
|
||||
body > div {
|
||||
border: solid silver;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
text-align: right;
|
||||
font: 20px/1 sans-serif;
|
||||
}
|
||||
span { text-orientation: upright; }
|
||||
hr { clear: both; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if both rows of boxes are identical (order, orientation, and arrangement of contents).
|
||||
|
||||
<!-- test -->
|
||||
|
||||
<div dir=rtl style="writing-mode: vertical-rl">
|
||||
א ב <span>ג ד</span> <span>ה ו</span> ז<br>
|
||||
١ ٢ <span>٣ ٤</span> <span>٥ ٦</span> ٧
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: vertical-lr">
|
||||
א ב <span>ג ד</span> <span>ה ו</span> ז<br>
|
||||
١ ٢ <span>٣ ٤</span> <span>٥ ٦</span> ٧
|
||||
</div>
|
||||
|
||||
<!-- control -->
|
||||
|
||||
<div dir=rtl>
|
||||
א ב <span>ג ד</span> <span>ה ו</span> ז<br>
|
||||
١ ٢ <span>٣ ٤</span> <span>٥ ٦</span> ٧
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: sideways-rl">
|
||||
א ב <span>ג ד</span> <span>ה ו</span> ז<br>
|
||||
١ ٢ <span>٣ ٤</span> <span>٥ ٦</span> ٧
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: sideways-lr">
|
||||
א ב <span>ג ד</span> <span>ה ו</span> ז<br>
|
||||
١ ٢ <span>٣ ٤</span> <span>٥ ٦</span> ٧
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- reference -->
|
||||
|
||||
<div style="writing-mode: vertical-rl">
|
||||
<bdo dir=ltr>
|
||||
ז <span>ג ד</span> <span>ה ו</span> ב א<br>
|
||||
٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
|
||||
</bdo>
|
||||
</div>
|
||||
<div style="writing-mode: vertical-lr">
|
||||
<bdo dir=ltr>
|
||||
ז <span>ג ד</span> <span>ה ו</span> ב א<br>
|
||||
٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
|
||||
</bdo>
|
||||
</div>
|
||||
|
||||
<div dir=rtl> א ב ג ד ה ו ז<br>
|
||||
١ ٢ ٣ ٤ ٥ ٦ ٧
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: sideways-rl">
|
||||
א ב ג ד ה ו ז<br>
|
||||
١ ٢ ٣ ٤ ٥ ٦ ٧
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: sideways-lr">
|
||||
א ב ג ד ה ו ז<br>
|
||||
١ ٢ ٣ ٤ ٥ ٦ ٧
|
||||
</div>
|
|
@ -0,0 +1,138 @@
|
|||
<!DOCTYPE html>
|
||||
<title>'text-orientation: upright' forces used 'direction' to LTR in vertical typographic modes</title>
|
||||
<link rel=help href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
|
||||
<link rel=help href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
|
||||
<link rel=help href="https://www.w3.org/TR/css-grid-1/#grid-auto-flow-property">
|
||||
<link rel=help href="https://www.w3.org/TR/css-ruby-1/#bidi">
|
||||
<link rel=match href="reference/direction-upright-002.html">
|
||||
|
||||
<style>
|
||||
body > div {
|
||||
border: solid silver;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
border-inline-start-color: orange;
|
||||
border-block-start-color: aqua;
|
||||
border-inline-end-color: lime;
|
||||
border-block-end-color: yellow;
|
||||
}
|
||||
colgroup:first-child { background: fuchsia; }
|
||||
col:last-child { background: purple; }
|
||||
.flex { display: flex; }
|
||||
.grid { grid-template-columns: auto auto }
|
||||
hr { clear: both }
|
||||
</style>
|
||||
|
||||
<p>Test passes if both rows of boxes are identical (coloring, order, orientation, and arrangement of contents).
|
||||
|
||||
<!-- test -->
|
||||
|
||||
<div dir=rtl style="writing-mode: vertical-rl; text-orientation: upright">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: vertical-lr; text-orientation: upright">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
|
||||
<!-- control -->
|
||||
|
||||
<div dir=rtl style="text-orientation: upright">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: sideways-rl; text-orientation: upright">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: sideways-lr; text-orientation: upright">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- reference -->
|
||||
|
||||
<div style="writing-mode: vertical-rl; text-orientation: upright">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
<div style="writing-mode: vertical-lr; text-orientation: upright">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
|
||||
<div dir=rtl>
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: sideways-rl">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: sideways-lr">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reftest Reference</title>
|
||||
<meta charset=utf-8>
|
||||
<style>
|
||||
body > div {
|
||||
border: solid silver;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
text-align: right;
|
||||
font: 20px/1 sans-serif;
|
||||
}
|
||||
span { text-orientation: upright; }
|
||||
hr { clear: both; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if both rows of boxes are identical (order, orientation, and arrangement of contents).
|
||||
|
||||
|
||||
<div style="writing-mode: vertical-rl">
|
||||
<bdo dir=ltr>
|
||||
ז <span>ג ד</span> <span>ה ו</span> ב א<br>
|
||||
٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
|
||||
</bdo>
|
||||
</div>
|
||||
<div style="writing-mode: vertical-lr">
|
||||
<bdo dir=ltr>
|
||||
ז <span>ג ד</span> <span>ה ו</span> ב א<br>
|
||||
٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
|
||||
</bdo>
|
||||
</div>
|
||||
|
||||
<div dir=rtl> א ב ג ד ה ו ז<br>
|
||||
١ ٢ ٣ ٤ ٥ ٦ ٧
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: sideways-rl">
|
||||
א ב ג ד ה ו ז<br>
|
||||
١ ٢ ٣ ٤ ٥ ٦ ٧
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: sideways-lr">
|
||||
א ב ג ד ה ו ז<br>
|
||||
١ ٢ ٣ ٤ ٥ ٦ ٧
|
||||
</div>
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
<div style="writing-mode: vertical-rl">
|
||||
<bdo dir=ltr>
|
||||
ז <span>ג ד</span> <span>ה ו</span> ב א<br>
|
||||
٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
|
||||
</bdo>
|
||||
</div>
|
||||
<div style="writing-mode: vertical-lr">
|
||||
<bdo dir=ltr>
|
||||
ז <span>ג ד</span> <span>ה ו</span> ב א<br>
|
||||
٧ <span>٣ ٤</span> <span>٥ ٦</span> ٢ ١
|
||||
</bdo>
|
||||
</div>
|
||||
|
||||
<div dir=rtl> א ב ג ד ה ו ז<br>
|
||||
١ ٢ ٣ ٤ ٥ ٦ ٧
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: sideways-rl">
|
||||
א ב ג ד ה ו ז<br>
|
||||
١ ٢ ٣ ٤ ٥ ٦ ٧
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: sideways-lr">
|
||||
א ב ג ד ה ו ז<br>
|
||||
١ ٢ ٣ ٤ ٥ ٦ ٧
|
||||
</div>
|
|
@ -0,0 +1,127 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reftest Reference</title>
|
||||
|
||||
<style>
|
||||
body > div {
|
||||
border: solid silver;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
border-inline-start-color: orange;
|
||||
border-block-start-color: aqua;
|
||||
border-inline-end-color: lime;
|
||||
border-block-end-color: yellow;
|
||||
}
|
||||
colgroup:first-child { background: fuchsia; }
|
||||
col:last-child { background: purple; }
|
||||
.flex { display: flex; }
|
||||
.grid { grid-template-columns: auto auto }
|
||||
hr { clear: both }
|
||||
</style>
|
||||
|
||||
<p>Test passes if both rows of boxes are identical (coloring, order, orientation, and arrangement of contents).
|
||||
|
||||
<div style="writing-mode: vertical-rl; text-orientation: upright">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
<div style="writing-mode: vertical-lr; text-orientation: upright">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
|
||||
<div dir=rtl>
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: sideways-rl">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: sideways-lr">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div style="writing-mode: vertical-rl; text-orientation: upright">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
<div style="writing-mode: vertical-lr; text-orientation: upright">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
|
||||
<div dir=rtl>
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: sideways-rl">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
||||
<div dir=rtl style="writing-mode: sideways-lr">
|
||||
<table>
|
||||
<colgroup></colgroup>
|
||||
<colgroup><col><col></colgroup>
|
||||
<tr><td>A<td>B<td>C
|
||||
</table>
|
||||
<div class=flex>A <span>B</span></div>
|
||||
<div class=grid>A <span>B</span></div>
|
||||
<div>A <ruby>B<rt>b</rt> C<rt>c</rt></ruby><ruby>D<rt>d</rt> E<rt>e</rt></ruby></div>
|
||||
</div>
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#extensions-to-the-htmlelement-interface">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
font: 20px/1 Ahem;
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
padding: 2px 10px;
|
||||
border-width: 3px 6px;
|
||||
border-style: solid;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.target { background: grey; }
|
||||
.hl { writing-mode:horizontal-tb; }
|
||||
.vlr { writing-mode:vertical-lr; }
|
||||
</style>
|
||||
<div id=tests>
|
||||
<div class="container hl">
|
||||
<span class="target">x</span>
|
||||
</div>
|
||||
<div class="container vlr">
|
||||
<span class="target">x</span>
|
||||
</div>
|
||||
<div class="container hl">
|
||||
<div class="target">x</div>
|
||||
</div>
|
||||
<div class="container vlr">
|
||||
<div class="target">x</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
setup({explicit_done: true});
|
||||
onload = () => {
|
||||
// Clone the above tests for the following 'display' types:
|
||||
let display = ['inline-block', 'grid', 'inline-grid', 'flex', 'inline-flex', 'flow-root' ];
|
||||
let tests = document.querySelector('#tests');
|
||||
display.forEach((display) => {
|
||||
let t = tests.cloneNode(true);
|
||||
[...t.children].forEach((child) => {
|
||||
child.setAttribute("style", "display:"+display);
|
||||
});
|
||||
document.body.appendChild(t);
|
||||
});
|
||||
// Check that all of them return an offset relative the padding edge.
|
||||
var i = 0;
|
||||
document.querySelectorAll('.target').forEach((target) => {
|
||||
test(() => {
|
||||
assert_equals(target.offsetLeft, 10, 'offsetLeft');
|
||||
assert_equals(target.offsetTop, 2, 'offsetTop');
|
||||
}, 'container: ' + i);
|
||||
i++;
|
||||
});
|
||||
done();
|
||||
};
|
||||
</script>
|
|
@ -27,7 +27,6 @@ var formElements = {
|
|||
accept: "string",
|
||||
alt: "string",
|
||||
autocomplete: {type: "string", customGetter: true},
|
||||
autofocus: "boolean",
|
||||
defaultChecked: {type: "boolean", domAttrName: "checked"},
|
||||
dirName: "string",
|
||||
disabled: "boolean",
|
||||
|
@ -65,7 +64,6 @@ var formElements = {
|
|||
useMap: "string",
|
||||
},
|
||||
button: {
|
||||
autofocus: "boolean",
|
||||
disabled: "boolean",
|
||||
// "formAction" has magic hard-coded in reflection.js
|
||||
formAction: "url",
|
||||
|
@ -79,7 +77,6 @@ var formElements = {
|
|||
},
|
||||
select: {
|
||||
autocomplete: {type: "string", customGetter: true},
|
||||
autofocus: "boolean",
|
||||
disabled: "boolean",
|
||||
multiple: "boolean",
|
||||
name: "string",
|
||||
|
@ -99,7 +96,6 @@ var formElements = {
|
|||
},
|
||||
textarea: {
|
||||
autocomplete: {type: "string", customGetter: true},
|
||||
autofocus: "boolean",
|
||||
cols: {type: "limited unsigned long with fallback", defaultVal: 20},
|
||||
dirName: "string",
|
||||
disabled: "boolean",
|
||||
|
|
|
@ -900,6 +900,7 @@ for (var element in elements) {
|
|||
ReflectionTests.reflects({type: "enum", keywords: ["ltr", "rtl", "auto"]}, "dir", element);
|
||||
ReflectionTests.reflects("string", "className", element, "class");
|
||||
ReflectionTests.reflects("tokenlist", "classList", element, "class");
|
||||
ReflectionTests.reflects("boolean", "autofocus", element);
|
||||
ReflectionTests.reflects("boolean", "hidden", element);
|
||||
ReflectionTests.reflects("string", "accessKey", element);
|
||||
// Don't try to test the defaultVal -- it should be either 0 or -1, but the
|
||||
|
|
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