mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Update web-platform-tests to revision 9a6026305062c90d84a567d81434010dde6c6c22
This commit is contained in:
WPT Sync Bot
parent
d77bf218fa
commit
906e45aab0
210 changed files with 6028 additions and 383 deletions
|
|
@ -0,0 +1,4 @@
|
|||
[2d.filter.value.html]
|
||||
[test if ctx.filter works correctly]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
[hit-test-floats-004.html]
|
||||
[hit-test-floats-003.html]
|
||||
[Miss float below something else]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -17,3 +17,6 @@
|
|||
[test the top of layer]
|
||||
expected: FAIL
|
||||
|
||||
[test some point of the element: top left corner]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -2,3 +2,6 @@
|
|||
[elementsFromPoint on the root document for points in iframe elements]
|
||||
expected: FAIL
|
||||
|
||||
[elementsFromPoint on inner documents]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
[customized-built-in-constructor-exceptions.html]
|
||||
expected: CRASH
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
[ParentNode-replaceChildren.html]
|
||||
[DocumentFragment.replaceChildren() with null as an argument, on a parent having a child.]
|
||||
expected: FAIL
|
||||
|
||||
[DocumentFragment.replaceChildren() with only text as an argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[Element.replaceChildren() with null as an argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[Element.replaceChildren() without any argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[If node is a host-including inclusive ancestor of parent, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
[If node is an Element and parent is a document with another element, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
[DocumentFragment.replaceChildren() with null as an argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[DocumentFragment.replaceChildren() with one element and text as argument, on a parent having a child.]
|
||||
expected: FAIL
|
||||
|
||||
[Element.replaceChildren() with null as an argument, on a parent having a child.]
|
||||
expected: FAIL
|
||||
|
||||
[DocumentFragment.replaceChildren() with only one element as an argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[Element.replaceChildren() should move nodes in the right order]
|
||||
expected: FAIL
|
||||
|
||||
[If node is a Text node and parent is a document, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
[If node is a DocumentFragment with an element and parent is a document with another element, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
[DocumentFragment.replaceChildren() with undefined as an argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[If node is a doctype and parent is not a document, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
[If node is a doctype and parent is a document with another doctype, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
[If node is a DocumentFragment with multiple elements and parent is a document, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
[Element.replaceChildren() with undefined as an argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[Element.replaceChildren() with only one element as an argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[Element.replaceChildren() with one element and text as argument, on a parent having a child.]
|
||||
expected: FAIL
|
||||
|
||||
[DocumentFragment.replaceChildren() should move nodes in the right order]
|
||||
expected: FAIL
|
||||
|
||||
[If node is a doctype and parent is a document with an element, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
[Element.replaceChildren() with only text as an argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[DocumentFragment.replaceChildren() without any argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[If node is not a DocumentFragment, DocumentType, Element, Text, ProcessingInstruction, or Comment node, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -315,18 +315,21 @@
|
|||
[<iframe>: combined response Content-Type: text/html;" \\" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/plain */*]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html */*;charset=gbk]
|
||||
[<iframe>: combined response Content-Type: text/html;" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;" \\" text/plain]
|
||||
[<iframe>: combined response Content-Type: */* text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
|
||||
[<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;x=" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -56,3 +56,9 @@
|
|||
[separate text/javascript;charset=windows-1252 error text/javascript]
|
||||
expected: FAIL
|
||||
|
||||
[separate text/javascript x/x]
|
||||
expected: FAIL
|
||||
|
||||
[separate text/javascript; charset=windows-1252 text/javascript]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,3 @@
|
|||
[X-Content-Type-Options%3A%20nosniff%0C]
|
||||
expected: FAIL
|
||||
|
||||
[X-Content-Type-Options%3A%20no%0D%0AX-Content-Type-Options%3A%20nosniff]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
[traverse_the_history_4.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -17,9 +17,6 @@
|
|||
[Set data URL frame location.protocol to data]
|
||||
expected: FAIL
|
||||
|
||||
[Set data URL frame location.protocol to file]
|
||||
expected: FAIL
|
||||
|
||||
[Set data URL frame location.protocol to http+x]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
[supported-elements.html]
|
||||
expected: TIMEOUT
|
||||
[Contenteditable element should support autofocus]
|
||||
expected: FAIL
|
||||
|
||||
[Host element with delegatesFocus including no focusable descendants should be skipped]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Element with tabindex should support autofocus]
|
||||
expected: FAIL
|
||||
|
||||
[Area element should support autofocus]
|
||||
expected: NOTRUN
|
||||
expected: FAIL
|
||||
|
||||
[Host element with delegatesFocus should support autofocus]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
[iframe_sandbox_popups_nonescaping-3.html]
|
||||
expected: CRASH
|
||||
[Check that popups from a sandboxed iframe do not escape the sandbox]
|
||||
expected: NOTRUN
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
[module-delayed.html]
|
||||
[async document.write in a module]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
[module-dynamic-import.html]
|
||||
expected: TIMEOUT
|
||||
[document.write in an imported module]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
[module-tla-delayed.html]
|
||||
expected: TIMEOUT
|
||||
[document.write in an imported module]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
[module-tla-immediate-promise.html]
|
||||
expected: TIMEOUT
|
||||
[document.write in an imported module]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[module-tla-import.html]
|
||||
[document.write in an imported module]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
[module-tla-promise.html]
|
||||
expected: TIMEOUT
|
||||
[document.write in an imported module]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
@ -4,5 +4,5 @@
|
|||
expected: TIMEOUT
|
||||
|
||||
[The entry settings object while executing the compiled callback via Web IDL's invoke must be that of the node document]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -92,3 +92,6 @@
|
|||
[X Rendered audio for channel 5 does not equal [0,0.0626220703125,0.125030517578125,0.18695068359375,0.24810791015625,0.308319091796875,0.3673095703125,0.42486572265625,0.480743408203125,0.53472900390625,0.58660888671875,0.636199951171875,0.68328857421875,0.727691650390625,0.76922607421875,0.8077392578125...\] with an element-wise tolerance of {"absoluteThreshold":0.000030517578125,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[1\]\t3.6732959747314453e-1\t6.2622070312500000e-2\t3.0470752716064453e-1\t4.8658168859649127e+0\t3.0517578125000000e-5\n\t[2\]\t6.8329977989196777e-1\t1.2503051757812500e-1\t5.5826926231384277e-1\t4.4650639949963384e+0\t3.0517578125000000e-5\n\t[3\]\t9.0373212099075317e-1\t1.8695068359375000e-1\t7.1678143739700317e-1\t3.8340669508039502e+0\t3.0517578125000000e-5\n\t[4\]\t9.9780619144439697e-1\t2.4810791015625000e-1\t7.4969828128814697e-1\t3.0216621502152523e+0\t3.0517578125000000e-5\n\t[5\]\t9.5236867666244507e-1\t3.0831909179687500e-1\t6.4404958486557007e-1\t2.0889059484187866e+0\t3.0517578125000000e-5\n\t...and 44050 more errors.\n\tMax AbsError of 1.9986916780471802e+0 at index of 42250.\n\t[42250\]\t9.9994289875030518e-1\t-9.9874877929687500e-1\t1.9986916780471802e+0\t2.0011956154322119e+0\t3.0517578125000000e-5\n\tMax RelError of Infinity at index of 14112.\n\t[14112\]\t-9.5105654001235962e-1\t0.0000000000000000e+0\t9.5105654001235962e-1\tInfinity\t3.0517578125000000e-5\n]
|
||||
expected: FAIL
|
||||
|
||||
[X Rendered audio for channel 5 does not equal [0,0.0626220703125,0.125030517578125,0.18695068359375,0.24810791015625,0.308319091796875,0.3673095703125,0.42486572265625,0.480743408203125,0.53472900390625,0.58660888671875,0.636199951171875,0.68328857421875,0.727691650390625,0.76922607421875,0.8077392578125...\] with an element-wise tolerance of {"absoluteThreshold":0.000030517578125,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[1\]\t3.6732959747314453e-1\t6.2622070312500000e-2\t3.0470752716064453e-1\t4.8658168859649127e+0\t3.0517578125000000e-5\n\t[2\]\t6.8329977989196777e-1\t1.2503051757812500e-1\t5.5826926231384277e-1\t4.4650639949963384e+0\t3.0517578125000000e-5\n\t[3\]\t9.0373212099075317e-1\t1.8695068359375000e-1\t7.1678143739700317e-1\t3.8340669508039502e+0\t3.0517578125000000e-5\n\t[4\]\t9.9780619144439697e-1\t2.4810791015625000e-1\t7.4969828128814697e-1\t3.0216621502152523e+0\t3.0517578125000000e-5\n\t[5\]\t9.5236867666244507e-1\t3.0831909179687500e-1\t6.4404958486557007e-1\t2.0889059484187866e+0\t3.0517578125000000e-5\n\t...and 42283 more errors.\n\tMax AbsError of 1.9962286949157715e+0 at index of 36587.\n\t[36587\]\t9.9879217147827148e-1\t-9.9743652343750000e-1\t1.9962286949157715e+0\t2.0013591321441684e+0\t3.0517578125000000e-5\n\tMax RelError of Infinity at index of 15876.\n\t[15876\]\t5.8778524398803711e-1\t0.0000000000000000e+0\t5.8778524398803711e-1\tInfinity\t3.0517578125000000e-5\n]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
[018.html]
|
||||
expected: TIMEOUT
|
||||
[origin of the script that invoked the method, javascript:]
|
||||
expected: TIMEOUT
|
||||
|
||||
4
tests/wpt/metadata/2dcontext/2d.filter.value.html.ini
Normal file
4
tests/wpt/metadata/2dcontext/2d.filter.value.html.ini
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
[2d.filter.value.html]
|
||||
[test if ctx.filter works correctly]
|
||||
expected: FAIL
|
||||
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,4 +1,4 @@
|
|||
[hit-test-floats-004.html]
|
||||
[hit-test-floats-003.html]
|
||||
[Miss float below something else]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -21,3 +21,6 @@
|
|||
[test the top of layer]
|
||||
expected: FAIL
|
||||
|
||||
[test some point of the element: top left corner]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -2,3 +2,6 @@
|
|||
[elementsFromPoint on the root document for points in iframe elements]
|
||||
expected: FAIL
|
||||
|
||||
[elementsFromPoint on inner documents]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
[customized-built-in-constructor-exceptions.html]
|
||||
expected: CRASH
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
[ParentNode-replaceChildren.html]
|
||||
[DocumentFragment.replaceChildren() with null as an argument, on a parent having a child.]
|
||||
expected: FAIL
|
||||
|
||||
[DocumentFragment.replaceChildren() with only text as an argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[Element.replaceChildren() with null as an argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[Element.replaceChildren() without any argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[If node is a host-including inclusive ancestor of parent, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
[If node is an Element and parent is a document with another element, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
[DocumentFragment.replaceChildren() with null as an argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[DocumentFragment.replaceChildren() with one element and text as argument, on a parent having a child.]
|
||||
expected: FAIL
|
||||
|
||||
[Element.replaceChildren() with null as an argument, on a parent having a child.]
|
||||
expected: FAIL
|
||||
|
||||
[DocumentFragment.replaceChildren() with only one element as an argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[Element.replaceChildren() should move nodes in the right order]
|
||||
expected: FAIL
|
||||
|
||||
[If node is a Text node and parent is a document, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
[If node is a DocumentFragment with an element and parent is a document with another element, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
[DocumentFragment.replaceChildren() with undefined as an argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[If node is a doctype and parent is not a document, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
[If node is a doctype and parent is a document with another doctype, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
[If node is a DocumentFragment with multiple elements and parent is a document, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
[Element.replaceChildren() with undefined as an argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[Element.replaceChildren() with only one element as an argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[Element.replaceChildren() with one element and text as argument, on a parent having a child.]
|
||||
expected: FAIL
|
||||
|
||||
[DocumentFragment.replaceChildren() should move nodes in the right order]
|
||||
expected: FAIL
|
||||
|
||||
[If node is a doctype and parent is a document with an element, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
[Element.replaceChildren() with only text as an argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[DocumentFragment.replaceChildren() without any argument, on a parent having no child.]
|
||||
expected: FAIL
|
||||
|
||||
[If node is not a DocumentFragment, DocumentType, Element, Text, ProcessingInstruction, or Comment node, then throw a HierarchyRequestError DOMException.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -315,18 +315,21 @@
|
|||
[<iframe>: combined response Content-Type: text/html;" \\" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/plain */*]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html */*;charset=gbk]
|
||||
[<iframe>: combined response Content-Type: text/html;" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;" \\" text/plain]
|
||||
[<iframe>: combined response Content-Type: */* text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
|
||||
[<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html;x=" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -56,3 +56,9 @@
|
|||
[separate text/javascript;charset=windows-1252 error text/javascript]
|
||||
expected: FAIL
|
||||
|
||||
[separate text/javascript x/x]
|
||||
expected: FAIL
|
||||
|
||||
[separate text/javascript; charset=windows-1252 text/javascript]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,3 @@
|
|||
[X-Content-Type-Options%3A%20nosniff%2C%2C%40%23%24%23%25%25%26%5E%26%5E*()()11!]
|
||||
expected: FAIL
|
||||
|
||||
[X-Content-Type-Options%3A%20no%0D%0AX-Content-Type-Options%3A%20nosniff]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
[traverse_the_history_4.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -24,9 +24,6 @@
|
|||
[Set data URL frame location.protocol to data]
|
||||
expected: FAIL
|
||||
|
||||
[Set data URL frame location.protocol to file]
|
||||
expected: FAIL
|
||||
|
||||
[Set data URL frame location.protocol to http+x]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
[supported-elements.html]
|
||||
expected: TIMEOUT
|
||||
[Contenteditable element should support autofocus]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -7,10 +6,10 @@
|
|||
expected: FAIL
|
||||
|
||||
[Host element with delegatesFocus including no focusable descendants should be skipped]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Area element should support autofocus]
|
||||
expected: NOTRUN
|
||||
expected: FAIL
|
||||
|
||||
[Host element with delegatesFocus should support autofocus]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
[iframe_sandbox_popups_nonescaping-3.html]
|
||||
type: testharness
|
||||
expected: CRASH
|
||||
[Check that popups from a sandboxed iframe do not escape the sandbox]
|
||||
expected: NOTRUN
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
[module-delayed.html]
|
||||
[async document.write in a module]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
[module-dynamic-import.html]
|
||||
expected: TIMEOUT
|
||||
[document.write in an imported module]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
[module-tla-delayed.html]
|
||||
expected: TIMEOUT
|
||||
[document.write in an imported module]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
[module-tla-immediate-promise.html]
|
||||
expected: TIMEOUT
|
||||
[document.write in an imported module]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[module-tla-import.html]
|
||||
[document.write in an imported module]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
[module-tla-promise.html]
|
||||
expected: TIMEOUT
|
||||
[document.write in an imported module]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
@ -5,5 +5,5 @@
|
|||
expected: TIMEOUT
|
||||
|
||||
[The entry settings object while executing the compiled callback via Web IDL's invoke must be that of the node document]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -161,3 +161,6 @@
|
|||
[X Rendered audio for channel 5 does not equal [0,0.0626220703125,0.125030517578125,0.18695068359375,0.24810791015625,0.308319091796875,0.3673095703125,0.42486572265625,0.480743408203125,0.53472900390625,0.58660888671875,0.636199951171875,0.68328857421875,0.727691650390625,0.76922607421875,0.8077392578125...\] with an element-wise tolerance of {"absoluteThreshold":0.000030517578125,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[1\]\t3.6732959747314453e-1\t6.2622070312500000e-2\t3.0470752716064453e-1\t4.8658168859649127e+0\t3.0517578125000000e-5\n\t[2\]\t6.8329977989196777e-1\t1.2503051757812500e-1\t5.5826926231384277e-1\t4.4650639949963384e+0\t3.0517578125000000e-5\n\t[3\]\t9.0373212099075317e-1\t1.8695068359375000e-1\t7.1678143739700317e-1\t3.8340669508039502e+0\t3.0517578125000000e-5\n\t[4\]\t9.9780619144439697e-1\t2.4810791015625000e-1\t7.4969828128814697e-1\t3.0216621502152523e+0\t3.0517578125000000e-5\n\t[5\]\t9.5236867666244507e-1\t3.0831909179687500e-1\t6.4404958486557007e-1\t2.0889059484187866e+0\t3.0517578125000000e-5\n\t...and 44050 more errors.\n\tMax AbsError of 1.9986916780471802e+0 at index of 42250.\n\t[42250\]\t9.9994289875030518e-1\t-9.9874877929687500e-1\t1.9986916780471802e+0\t2.0011956154322119e+0\t3.0517578125000000e-5\n\tMax RelError of Infinity at index of 14112.\n\t[14112\]\t-9.5105654001235962e-1\t0.0000000000000000e+0\t9.5105654001235962e-1\tInfinity\t3.0517578125000000e-5\n]
|
||||
expected: FAIL
|
||||
|
||||
[X Rendered audio for channel 5 does not equal [0,0.0626220703125,0.125030517578125,0.18695068359375,0.24810791015625,0.308319091796875,0.3673095703125,0.42486572265625,0.480743408203125,0.53472900390625,0.58660888671875,0.636199951171875,0.68328857421875,0.727691650390625,0.76922607421875,0.8077392578125...\] with an element-wise tolerance of {"absoluteThreshold":0.000030517578125,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[1\]\t3.6732959747314453e-1\t6.2622070312500000e-2\t3.0470752716064453e-1\t4.8658168859649127e+0\t3.0517578125000000e-5\n\t[2\]\t6.8329977989196777e-1\t1.2503051757812500e-1\t5.5826926231384277e-1\t4.4650639949963384e+0\t3.0517578125000000e-5\n\t[3\]\t9.0373212099075317e-1\t1.8695068359375000e-1\t7.1678143739700317e-1\t3.8340669508039502e+0\t3.0517578125000000e-5\n\t[4\]\t9.9780619144439697e-1\t2.4810791015625000e-1\t7.4969828128814697e-1\t3.0216621502152523e+0\t3.0517578125000000e-5\n\t[5\]\t9.5236867666244507e-1\t3.0831909179687500e-1\t6.4404958486557007e-1\t2.0889059484187866e+0\t3.0517578125000000e-5\n\t...and 42283 more errors.\n\tMax AbsError of 1.9962286949157715e+0 at index of 36587.\n\t[36587\]\t9.9879217147827148e-1\t-9.9743652343750000e-1\t1.9962286949157715e+0\t2.0013591321441684e+0\t3.0517578125000000e-5\n\tMax RelError of Infinity at index of 15876.\n\t[15876\]\t5.8778524398803711e-1\t0.0000000000000000e+0\t5.8778524398803711e-1\tInfinity\t3.0517578125000000e-5\n]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
5
tests/wpt/metadata/webmessaging/with-ports/018.html.ini
Normal file
5
tests/wpt/metadata/webmessaging/with-ports/018.html.ini
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
[018.html]
|
||||
expected: TIMEOUT
|
||||
[origin of the script that invoked the method, javascript:]
|
||||
expected: TIMEOUT
|
||||
|
||||
56
tests/wpt/web-platform-tests/2dcontext/2d.filter.value.html
Normal file
56
tests/wpt/web-platform-tests/2dcontext/2d.filter.value.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by /2dcontext/tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.filter.value</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/2dcontext/resources/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/2dcontext/resources/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.filter.value</h1>
|
||||
<p class="desc">test if ctx.filter works correctly</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("test if ctx.filter works correctly");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
_assert(ctx.filter == 'none', "ctx.filter == 'none'");
|
||||
ctx.filter = 'blur(5px)';
|
||||
_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
|
||||
ctx.save();
|
||||
ctx.filter = 'none';
|
||||
_assert(ctx.filter == 'none', "ctx.filter == 'none'");
|
||||
ctx.restore();
|
||||
_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
|
||||
|
||||
ctx.filter = 'blur(10)';
|
||||
_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
|
||||
ctx.filter = 'blur 10px';
|
||||
_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
|
||||
|
||||
ctx.filter = 'inherit';
|
||||
_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
|
||||
ctx.filter = 'initial';
|
||||
_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
|
||||
ctx.filter = 'unset';
|
||||
_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
|
||||
|
||||
ctx.filter = '';
|
||||
_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
|
||||
ctx.filter = null;
|
||||
_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
|
||||
ctx.filter = undefined;
|
||||
_assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
|
||||
|
||||
ctx.filter = 'blur( 5px)';
|
||||
assert_equals(ctx.filter, 'blur( 5px)');
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 205 B |
|
|
@ -10328,3 +10328,41 @@
|
|||
var rect = canvas.getBoundingClientRect();
|
||||
@assert Math.round(rect.top) === -8;
|
||||
@assert Math.round(rect.left) === 200;
|
||||
|
||||
- name: 2d.filter.value
|
||||
desc: test if ctx.filter works correctly
|
||||
testing:
|
||||
- 2d.filter.value
|
||||
code: |
|
||||
@assert ctx.filter == 'none';
|
||||
ctx.filter = 'blur(5px)';
|
||||
@assert ctx.filter == 'blur(5px)';
|
||||
ctx.save();
|
||||
ctx.filter = 'none';
|
||||
@assert ctx.filter == 'none';
|
||||
ctx.restore();
|
||||
@assert ctx.filter == 'blur(5px)';
|
||||
|
||||
ctx.filter = 'blur(10)';
|
||||
@assert ctx.filter == 'blur(5px)';
|
||||
ctx.filter = 'blur 10px';
|
||||
@assert ctx.filter == 'blur(5px)';
|
||||
|
||||
ctx.filter = 'inherit';
|
||||
@assert ctx.filter == 'blur(5px)';
|
||||
ctx.filter = 'initial';
|
||||
@assert ctx.filter == 'blur(5px)';
|
||||
ctx.filter = 'unset';
|
||||
@assert ctx.filter == 'blur(5px)';
|
||||
|
||||
ctx.filter = '';
|
||||
@assert ctx.filter == 'blur(5px)';
|
||||
ctx.filter = null;
|
||||
@assert ctx.filter == 'blur(5px)';
|
||||
ctx.filter = undefined;
|
||||
@assert ctx.filter == 'blur(5px)';
|
||||
|
||||
ctx.filter = 'blur( 5px)';
|
||||
assert_equals(ctx.filter, 'blur( 5px)');
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -50,4 +50,4 @@ indexeddb_test(
|
|||
});
|
||||
});
|
||||
},
|
||||
"Blobs stay alive after their records are deleted.");
|
||||
"Blobs stay alive after their records are deleted.");
|
||||
|
|
|
|||
|
|
@ -38,4 +38,4 @@ indexeddb_test(
|
|||
});
|
||||
});
|
||||
},
|
||||
"Blobs can be read back before their records are committed.");
|
||||
"Blobs can be read back before their records are committed.");
|
||||
|
|
|
|||
|
|
@ -85,4 +85,4 @@ promise_test(async testCase => {
|
|||
|
||||
database.close();
|
||||
}, 'IDBIndex.openKeyCursor() iterates over an index not covering the ' +
|
||||
'autoincrement key');
|
||||
'autoincrement key');
|
||||
|
|
|
|||
|
|
@ -35,4 +35,4 @@ promise_test(async testCase => {
|
|||
}
|
||||
|
||||
database.close();
|
||||
}, 'IDBObjectStore.openKeyCursor() iterates over an autoincrement store');
|
||||
}, 'IDBObjectStore.openKeyCursor() iterates over an autoincrement store');
|
||||
|
|
|
|||
|
|
@ -46,4 +46,4 @@ promise_test(async testCase => {
|
|||
}
|
||||
|
||||
database.close();
|
||||
}, 'IDBObjectStore.get() for an autoincrement store');
|
||||
}, 'IDBObjectStore.get() for an autoincrement store');
|
||||
|
|
|
|||
|
|
@ -69,12 +69,12 @@
|
|||
"returned_csp_1": "style-src 'unsafe-inline'",
|
||||
"returned_csp_2": null,
|
||||
"expected": IframeLoad.EXPECT_BLOCK },
|
||||
{ "name": "Returned csp whitelists a nonce.",
|
||||
{ "name": "Returned csp allows a nonce.",
|
||||
"required_csp": "style-src http://example1.com/foo/ 'self' 'unsafe-inline'",
|
||||
"returned_csp_1": "style-src 'unsafe-inline' 'nonce-abc'",
|
||||
"returned_csp_2": "style-src 'nonce-abc'",
|
||||
"expected": IframeLoad.EXPECT_BLOCK },
|
||||
{ "name": "Returned csp whitelists a hash.",
|
||||
{ "name": "Returned csp allows a hash.",
|
||||
"required_csp": "style-src http://example1.com/foo/ 'self' 'unsafe-inline'",
|
||||
"returned_csp_1": "style-src 'unsafe-inline' 'sha256-abc123'",
|
||||
"returned_csp_2": "style-src 'sha256-abc123'",
|
||||
|
|
|
|||
|
|
@ -49,11 +49,11 @@
|
|||
'./simpleSourcedScript.js',
|
||||
'sha256-L7/UQ9VWpyG7C9RDEC4ctS5hI3Zcw+ta+haPGlByG9c= sha256-xyz',
|
||||
false ],
|
||||
[ 'crossorigin no integrity but whitelisted host',
|
||||
[ 'crossorigin no integrity but allowed host',
|
||||
crossorigin_base + '/content-security-policy/script-src/crossoriginScript.js',
|
||||
'',
|
||||
true ],
|
||||
[ 'crossorigin mismatched integrity but whitelisted host',
|
||||
[ 'crossorigin mismatched integrity but allowed host',
|
||||
crossorigin_base + '/content-security-policy/script-src/crossoriginScript.js',
|
||||
'sha256-kKJ5c48yxzaaSBupJSCmY50hkD8xbVgZgLHLtmnkeAo=',
|
||||
true ],
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<title>Whitelists are discarded with `strict-dynamic` in the script-src directive.</title>
|
||||
<title>Source expressions are discarded with `strict-dynamic` in the script-src directive.</title>
|
||||
<script src='/resources/testharness.js' nonce='dummy'></script>
|
||||
<script src='/resources/testharnessreport.js' nonce='dummy'></script>
|
||||
|
||||
|
|
@ -10,22 +10,22 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Whitelists are discarded with `strict-dynamic` in the script-src directive.</h1>
|
||||
<h1>Source expressions are discarded with `strict-dynamic` in the script-src directive.</h1>
|
||||
<div id='log'></div>
|
||||
|
||||
<script nonce='dummy'>
|
||||
async_test(function(t) {
|
||||
window.addEventListener('message', t.step_func(function(e) {
|
||||
if (e.data === 'whitelistedScript') {
|
||||
assert_unreached('Whitelisted script without a correct nonce is not allowed with `strict-dynamic`.');
|
||||
if (e.data === 'allowedScript') {
|
||||
assert_unreached('Allowed scripts without a correct nonce are not permitted with `strict-dynamic`.');
|
||||
}
|
||||
}));
|
||||
window.addEventListener('securitypolicyviolation', t.step_func_done(function(e) {
|
||||
assert_equals(e.effectiveDirective, 'script-src-elem');
|
||||
}));
|
||||
}, 'Whitelisted script without a correct nonce is not allowed with `strict-dynamic`.');
|
||||
}, 'Allowed scripts without a correct nonce are not permitted with `strict-dynamic`.');
|
||||
</script>
|
||||
<script id='whitelistedScript' src='simpleSourcedScript.js'></script>
|
||||
<script id='allowedScript' src='simpleSourcedScript.js'></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<title>Whitelists in a separate policy are honored with `strict-dynamic` in the script-src directive.</title>
|
||||
<title>Source expressions in a separate policy are honored with `strict-dynamic` in the script-src directive.</title>
|
||||
<script src='/resources/testharness.js' nonce='dummy'></script>
|
||||
<script src='/resources/testharnessreport.js' nonce='dummy'></script>
|
||||
|
||||
|
|
@ -13,35 +13,35 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Whitelists in a separate policy are honored with `strict-dynamic` in the script-src directive.</h1>
|
||||
<h1>Source expressions in a separate policy are honored with `strict-dynamic` in the script-src directive.</h1>
|
||||
<div id='log'></div>
|
||||
|
||||
<script nonce='dummy'>
|
||||
async_test(function(t) {
|
||||
window.addEventListener('message', t.step_func(function(e) {
|
||||
if (e.data === 'whitelisted-appendChild') {
|
||||
if (e.data === 'allowed-appendChild') {
|
||||
t.done();
|
||||
}
|
||||
}));
|
||||
window.addEventListener('securitypolicyviolation', t.step_func(function(violation) {
|
||||
if (violation.blockedURI.split('?')[1] !== 'whitelisted-appendChild') {
|
||||
if (violation.blockedURI.split('?')[1] !== 'allowed-appendChild') {
|
||||
return;
|
||||
}
|
||||
assert_unreached('Script injected via `appendChild` is allowed with `strict-dynamic` + a nonce+whitelist double policy.');
|
||||
assert_unreached('Script injected via `appendChild` is permitted with `strict-dynamic` + a nonce+allowed double policy.');
|
||||
}));
|
||||
|
||||
var e = document.createElement('script');
|
||||
e.id = 'whitelisted-appendChild';
|
||||
e.id = 'allowed-appendChild';
|
||||
e.src = 'simpleSourcedScript.js?' + e.id;
|
||||
e.onerror = t.unreached_func('Error should not be triggered.');
|
||||
document.body.appendChild(e);
|
||||
}, 'Script injected via `appendChild` is allowed with `strict-dynamic` + a nonce+whitelist double policy.');
|
||||
}, 'Script injected via `appendChild` is permitted with `strict-dynamic` + a nonce+allowed double policy.');
|
||||
</script>
|
||||
|
||||
<script nonce='dummy'>
|
||||
async_test(function(t) {
|
||||
window.addEventListener('securitypolicyviolation', t.step_func(function(violation) {
|
||||
if (violation.blockedURI.split('?')[1] !== 'nonWhitelisted-appendChild') {
|
||||
if (violation.blockedURI.split('?')[1] !== 'nonAllowed-appendChild') {
|
||||
return;
|
||||
}
|
||||
assert_equals(violation.effectiveDirective, 'script-src-elem');
|
||||
|
|
@ -50,11 +50,11 @@
|
|||
}));
|
||||
|
||||
var e = document.createElement('script');
|
||||
e.id = 'nonWhitelisted-appendChild';
|
||||
e.id = 'nonAllowed-appendChild';
|
||||
e.src = '{{location[scheme]}}://{{domains[www2]}}:{{ports[http][0]}}/nonexisting.js?' + e.id;
|
||||
e.onload = t.unreached_func('OnLoad should not be triggered.');
|
||||
document.body.appendChild(e);
|
||||
}, 'Non-whitelisted script injected via `appendChild` is not allowed with `strict-dynamic` + a nonce+whitelist double policy.');
|
||||
}, 'Non-allowed script injected via `appendChild` is not permitted with `strict-dynamic` + a nonce+allowed double policy.');
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<title>`strict-dynamic` does not drop whitelists in `img-src`.</title>
|
||||
<title>`strict-dynamic` does not drop allowed source expressions in `img-src`.</title>
|
||||
<script src='/resources/testharness.js' nonce='dummy'></script>
|
||||
<script src='/resources/testharnessreport.js' nonce='dummy'></script>
|
||||
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>`strict-dynamic` does not drop whitelists in `img-src`.</h1>
|
||||
<h1>`strict-dynamic` does not drop allowed source expressions in `img-src`.</h1>
|
||||
<div id='log'></div>
|
||||
|
||||
<script nonce='dummy'>
|
||||
|
|
@ -20,12 +20,12 @@
|
|||
|
||||
async_test(function(t) {
|
||||
var e = document.createElement('img');
|
||||
e.id = 'whitelistedImage';
|
||||
e.id = 'allowedImage';
|
||||
e.src = '/content-security-policy/support/pass.png';
|
||||
e.onerror = t.unreached_func('Error should not be triggered.');
|
||||
e.onload = t.step_func_done();
|
||||
document.body.appendChild(e);
|
||||
}, '`strict-dynamic` does not drop whitelists in `img-src`.');
|
||||
}, '`strict-dynamic` does not drop allowed source expressions in `img-src`.');
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
});
|
||||
|
||||
</script>
|
||||
<p>Style correctly whitelisted via a 'nonce-*' expression in 'style-src' should be applied to the page.</p>
|
||||
<p>Style correctly allowed via a 'nonce-*' expression in 'style-src' should be applied to the page.</p>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src="../support/testharness-helper.js"></script>
|
||||
<!-- Ideally we would use "script-src 'none'" alone but we have to whitelist the actual script that spawns the workers, hence the nonce.-->
|
||||
<!-- Ideally we would use "script-src 'none'" alone but we have to allow the actual script that spawns the workers, hence the nonce.-->
|
||||
<meta http-equiv="Content-Security-Policy" content="child-src 'self'; script-src 'none' 'nonce-foo'; default-src 'none'; ">
|
||||
<script src="../support/dedicated-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin dedicated worker allowed by child-src 'self'."></script>
|
||||
<script src="../support/dedicated-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin dedicated worker allowed by child-src 'self'."></script>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src="../support/testharness-helper.js"></script>
|
||||
<!-- Ideally we would use "script-src 'none'" alone but we have to whitelist the actual script that spawns the workers, hence the nonce.-->
|
||||
<!-- Ideally we would use "script-src 'none'" alone but we have to allow the actual script that spawns the workers, hence the nonce.-->
|
||||
<meta http-equiv="Content-Security-Policy" content="worker-src 'self'; child-src 'none'; script-src 'none' 'nonce-foo'; default-src 'none'; ">
|
||||
<script src="../support/dedicated-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin dedicated worker allowed by worker-src 'self'."></script>
|
||||
<script src="../support/dedicated-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin dedicated worker allowed by worker-src 'self'."></script>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src="../support/testharness-helper.js"></script>
|
||||
<!-- Ideally we would use "script-src 'none'" alone but we have to whitelist the actual script that spawns the workers, hence the nonce.-->
|
||||
<!-- Ideally we would use "script-src 'none'" alone but we have to allow the actual script that spawns the workers, hence the nonce.-->
|
||||
<meta http-equiv="Content-Security-Policy" content="child-src 'self'; script-src 'none' 'nonce-foo'; default-src 'none'; ">
|
||||
<script src="../support/service-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin service worker allowed by child-src 'self'."></script>
|
||||
<script src="../support/service-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin service worker allowed by child-src 'self'."></script>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src="../support/testharness-helper.js"></script>
|
||||
<!-- Ideally we would use "script-src 'none'" alone but we have to whitelist the actual script that spawns the workers, hence the nonce.-->
|
||||
<!-- Ideally we would use "script-src 'none'" alone but we have to allow the actual script that spawns the workers, hence the nonce.-->
|
||||
<meta http-equiv="Content-Security-Policy" content="worker-src 'self'; child-src 'none'; script-src 'none' 'nonce-foo'; default-src 'none'; ">
|
||||
<script src="../support/service-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin service worker allowed by worker-src 'self'."></script>
|
||||
<script src="../support/service-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin service worker allowed by worker-src 'self'."></script>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src="../support/testharness-helper.js"></script>
|
||||
<!-- Ideally we would use "script-src 'none'" alone but we have to whitelist the actual script that spawns the workers, hence the nonce.-->
|
||||
<!-- Ideally we would use "script-src 'none'" alone but we have to allow the actual script that spawns the workers, hence the nonce.-->
|
||||
<meta http-equiv="Content-Security-Policy" content="child-src 'self'; script-src 'none' 'nonce-foo'; default-src 'none'; ">
|
||||
<script src="../support/shared-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin shared worker allowed by child-src 'self'."></script>
|
||||
<script src="../support/shared-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin shared worker allowed by child-src 'self'."></script>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src="../support/testharness-helper.js"></script>
|
||||
<!-- Ideally we would use "script-src 'none'" alone but we have to whitelist the actual script that spawns the workers, hence the nonce.-->
|
||||
<!-- Ideally we would use "script-src 'none'" alone but we have to allow the actual script that spawns the workers, hence the nonce.-->
|
||||
<meta http-equiv="Content-Security-Policy" content="worker-src 'self'; child-src 'none'; script-src 'none' 'nonce-foo'; default-src 'none'; ">
|
||||
<script src="../support/shared-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin shared worker allowed by worker-src 'self'."></script>
|
||||
<script src="../support/shared-worker-helper.js" nonce="foo" id="foo" data-desc-fallback="Same-origin shared worker allowed by worker-src 'self'."></script>
|
||||
|
|
|
|||
|
|
@ -19,4 +19,4 @@ promise_test(async t => {
|
|||
await cookieStore.delete({ name: 'cookie-name' });
|
||||
const cookie = await cookieStore.get('cookie-name');
|
||||
assert_equals(cookie, null);
|
||||
}, 'cookieStore.delete(options) can delete an insecure cookie');
|
||||
}, 'cookieStore.delete(options) can delete an insecure cookie');
|
||||
|
|
|
|||
|
|
@ -11,4 +11,4 @@ promise_test(async testCase => {
|
|||
await cookieStore.delete('cookie-name');
|
||||
const cookie = await cookieStore.get();
|
||||
assert_equals(cookie, null);
|
||||
}, 'cookieStore.get returns null for a cookie deleted by cookieStore.delete');
|
||||
}, 'cookieStore.get returns null for a cookie deleted by cookieStore.delete');
|
||||
|
|
|
|||
|
|
@ -156,6 +156,19 @@ promise_test(async testCase => {
|
|||
assert_equals(cookie, null);
|
||||
}, 'cookieStore.set with name and value in options and expires in the past');
|
||||
|
||||
promise_test(async testCase => {
|
||||
const currentUrl = new URL(self.location.href);
|
||||
const currentDomain = currentUrl.hostname;
|
||||
|
||||
await promise_rejects_js(testCase, TypeError, cookieStore.set(
|
||||
'cookie-name', 'cookie-value', { domain: `.${currentDomain}` }));
|
||||
}, 'cookieStore.set domain starts with "."');
|
||||
|
||||
promise_test(async testCase => {
|
||||
await promise_rejects_js(testCase, TypeError, cookieStore.set(
|
||||
'cookie-name', 'cookie-value', { domain: 'example.com' }));
|
||||
}, 'cookieStore.set with domain that is not equal current host');
|
||||
|
||||
promise_test(async testCase => {
|
||||
const currentUrl = new URL(self.location.href);
|
||||
const currentDomain = currentUrl.hostname;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<!-- Quirks mode needed -->
|
||||
<title>CSS Flexbox: fixed positioned video in absolute positioned on quirks mode</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing">
|
||||
<link rel="help" href="https://crbug.com/841276">
|
||||
<meta name="assert" content="This test ensures that a video works with fixed position in absolute position on quirks mode.">
|
||||
<div style="position:absolute;">
|
||||
<div>
|
||||
<!-- Video element may work with shadow DOM using flex for media controls.
|
||||
This is mostly useful for browsers that use flex inside of video.-->
|
||||
<video style="position:fixed;"></video>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
display: inline-block;
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.area { display: inline-block; }
|
||||
.area:nth-child(1) { width: 60px; }
|
||||
.area:nth-child(2) { width: 60px; }
|
||||
.area:nth-child(3) { width: 75px; }
|
||||
.area:nth-child(4) { width: 100px; }
|
||||
.verticalLR.area, .verticalRL.area { width: auto; }
|
||||
.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
|
||||
.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
|
||||
.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
|
||||
.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
|
||||
.block { height: 125px; }
|
||||
.block.verticalLR, .block.verticalRL {
|
||||
width: 125px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items.</p>
|
||||
<div class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block verticalRL"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-001-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.grid { grid: 125px / 60px 60px 75px 100px; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items.</p>
|
||||
<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 175px;
|
||||
height: 300px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block1 > :nth-child(1) { font-size:24px; }
|
||||
.block1 > :nth-child(2) { font-size:32px; }
|
||||
.block2 > :nth-child(1) { font-size:48px; }
|
||||
.block2 > :nth-child(2) { font-size:64px; }
|
||||
.item {
|
||||
display: inline-block;
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.area { display: inline-block; }
|
||||
.block1 > .area:nth-child(1) { height: 60px; }
|
||||
.block1 > .area:nth-child(2) { height: 60px; }
|
||||
.block2 > .area:nth-child(1) { height: 75px; }
|
||||
.block2 > .area:nth-child(2) { height: 100px; }
|
||||
.block1 { float: left; }
|
||||
.block2 { float: left; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
|
||||
<div class="block verticalLR"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
|
||||
<div class="block verticalLR"><div class="block1"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-002-b-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'justify-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the column-like baseline." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 175px;
|
||||
height: 300px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.column { grid-auto-flow: row; }
|
||||
.grid { grid: 60px 60px 75px 100px / 125px; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
|
||||
<div class="block grid contentStart itemsBaseline"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
|
||||
<div class="block grid contentStart itemsBaseline"><div class="item verticalLR extraLeftPadding">É</div><div class="item verticalLR extraRightPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 175px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block1 > :nth-child(1) { font-size:24px; }
|
||||
.block1 > :nth-child(2) { font-size:32px; }
|
||||
.block2 > :nth-child(1) { font-size:48px; }
|
||||
.block2 > :nth-child(2) { font-size:64px; }
|
||||
.item {
|
||||
display: inline-block;
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.area { display: inline-block; }
|
||||
.block1 > .area:nth-child(1) { height: 60px; }
|
||||
.block1 > .area:nth-child(2) { height: 60px; }
|
||||
.block2 > .area:nth-child(1) { height: 75px; }
|
||||
.block2 > .area:nth-child(2) { height: 100px; }
|
||||
.block1 { float: left; }
|
||||
.block2 { float: left; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items, but opposite block-flow direction.</p>
|
||||
<div class="block verticalLR"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
|
||||
<div class="block verticalLR"><div class="block1"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
|
||||
<div class="block verticalRL"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
|
||||
<div class="block verticalRL"><div class="block1"><div class="area"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-002-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'align-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the row-like baseline." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.grid { grid: 175px / 60px 60px 75px 100px; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items, but opposite block-flow direction.</p>
|
||||
<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
|
||||
<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.area:nth-child(1) { width: 70px; }
|
||||
.area:nth-child(2) { width: 80px; }
|
||||
.area:nth-child(3) { width: 100px; }
|
||||
.area:nth-child(4) { width: 125px; }
|
||||
.area { display: inline-block; }
|
||||
.block.verticalLR > .area { float: left; }
|
||||
.verticalLR > .area, .verticalRL > .area { width: auto; }
|
||||
.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 70px; }
|
||||
.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 80px; }
|
||||
.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
|
||||
.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
|
||||
.block {
|
||||
width: 375px;
|
||||
height: 100px;
|
||||
}
|
||||
.block.verticalLR, .block.verticalRL {
|
||||
width: 125px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>1x4 with orthogonal items.</p>
|
||||
<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area verticalLR"><div class="item extraBottomPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item ">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
<div class="block verticalRL"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
<div class="block verticalRL"><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-003-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.grid { grid: 100px / 70px 80px 100px 125px; }
|
||||
.block.verticalLR, .block.verticalRL {
|
||||
width: 125px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>1x4 with orthogonal items.</p>
|
||||
<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
|
||||
<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item verticalLR extraBottomPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB extraLeftPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
|
||||
<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
display: inline-block;
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.area.verticalLR > .item { margin: 10px 6px 0px 12px; }
|
||||
.area.horizontalTB > .item { margin: 10px 6px 4px 0px; }
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.area { display: inline-block; }
|
||||
.area:nth-child(1) { width: 60px; }
|
||||
.area:nth-child(2) { width: 75px; }
|
||||
.area:nth-child(3) { width: 75px; }
|
||||
.area:nth-child(4) { width: 125px; }
|
||||
.verticalLR > .area, .verticalRL > .area { width: auto; }
|
||||
.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
|
||||
.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 75px; }
|
||||
.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
|
||||
.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
|
||||
.block { height: 125px; }
|
||||
.block.verticalLR, .block.verticalRL {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel and orthogonal items.</p>
|
||||
<div class="block"><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area verticalLR"><div class="item extraTopPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR top"><div class="item">É</div></div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
<div class="block verticalRL"><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
<div class="block verticalRL"><div class="area"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-004-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all the items along the baseline-axis using the row-like baseline." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.grid { grid: 125px / 60px 75px 75px 125px; }
|
||||
.grid.verticalLR, .grid.verticalRL { grid-template-rows: 150px; }
|
||||
</style>
|
||||
|
||||
|
||||
<p>1x4 with parallel and orthogonal items.</p>
|
||||
<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
|
||||
<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item extraBottomPadding">É</div><div class="item verticalLR extraTopPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraRightPadding">É</div><div class="item horizontalTB extraLeftPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
display: inline-block;
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.area { display: inline-block; }
|
||||
.area:nth-child(1) { width: 60px; }
|
||||
.area:nth-child(2) { width: 60px; }
|
||||
.area:nth-child(3) { width: 75px; }
|
||||
.area:nth-child(4) { width: 100px; }
|
||||
.verticalLR.area, .verticalRL.area { width: auto; }
|
||||
.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
|
||||
.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
|
||||
.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
|
||||
.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
|
||||
.block { height: 140px; }
|
||||
.block.verticalLR, .block.verticalRL {
|
||||
width: 140px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items.</p>
|
||||
<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div style="direction: rtl;" class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div style="direction: rtl;" class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-005-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that no item shares any row-like Baseline Context. All items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.grid { grid: 60px 60px 75px 100px / 140px; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items.</p>
|
||||
<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
|
||||
<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item verticalLR extraLeftPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
|
||||
<div class="block grid contentStart verticalLR justifyItemsBaseline alignItemsStart"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid contentStart verticalLR justifyItemsBaseline alignItemsStart"><div class="item horizontalTB extraBottomPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block grid contentStart verticalRL justifyItemsBaseline alignItemsStart"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid contentStart verticalRL justifyItemsBaseline alignItemsStart"><div class="item horizontalTB extraBottomPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.area { display: inline-block; }
|
||||
.block.verticalLR > .area { float: left; }
|
||||
.area:nth-child(1) { width: 65px; }
|
||||
.area:nth-child(2) { width: 75px; }
|
||||
.area:nth-child(3) { width: 100px; }
|
||||
.area:nth-child(4) { width: 125px; }
|
||||
.verticalLR > .area, .verticalRL > .area { width: auto; }
|
||||
.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 65px; }
|
||||
.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 75px; }
|
||||
.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
|
||||
.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
|
||||
.block { height: 100px; }
|
||||
.block.verticalLR, .block.verticalRL {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel items.</p>
|
||||
<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area verticalLR"><div class="item extraTopPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
|
||||
<div class="block directionRTL"><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div></div>
|
||||
<div class="block directionRTL"><div class="area verticalRL"><div class="item extraBottomPadding">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div></div>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-006-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.grid { grid: 65px 75px 100px 125px / 100px; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel items.</p>
|
||||
<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
display: inline-block;
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.area.verticalLR > .item, .area.verticalRL > .item { margin: 10px 6px 0px 12px; }
|
||||
.area.horizontalTB > .item { margin: 10px 6px 4px 0px; }
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.area { display: inline-block; }
|
||||
.area:nth-child(1) { width: 65px; }
|
||||
.area:nth-child(2) { width: 60px; }
|
||||
.area:nth-child(3) { width: 100px; }
|
||||
.area:nth-child(4) { width: 100px; }
|
||||
.verticalLR > .area, .verticalRL > .area { width: auto; }
|
||||
.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 65px; }
|
||||
.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
|
||||
.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
|
||||
.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
|
||||
.block { height: 125px; }
|
||||
.block.verticalLR, .block.verticalRL {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel and orthogonal items.</p>
|
||||
<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block"><div class="area verticalLR"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item extraTopPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block directionRTL"><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
<div class="block directionRTL"><div class="area verticalRL"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item extraTopPadding">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-007-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.grid { grid: 65px 60px 100px 100px / 150px; }
|
||||
.grid.verticalLR, .grid.verticalRL { grid-template-columns: 125px; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel and orthogonal items.</p>
|
||||
<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
|
||||
<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item extraLeftPadding">É</div><div class="item verticalLR extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item verticalLR">É</div></div>
|
||||
<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item horizontalTB extraTopPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
|
||||
<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item horizontalTB extraTopPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.item { display: inline-block; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items.</p>
|
||||
<div class="block"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div class="item">
|
||||
<div class="block"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-horiz-001-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.row { grid-auto-flow: column; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel items.</p>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item extraBottomPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.top { vertical-align: top; }
|
||||
.item { display: inline-block; }
|
||||
.item.verticalLR, .item.verticalRL { margin: 10px 6px 4px 12px; }
|
||||
.item.horizontalTB { margin: 10px 6px 4px 0px; }
|
||||
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel and orthogonal items.</p>
|
||||
<div class="block"><div class="item">É</div><div class="item verticalLR top">É</div><div class="item">É</div><div class="item verticalLR top">É</div></div>
|
||||
<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalLR extraTopPadding top">É</div><div class="item">É</div><div class="item verticalLR top">É</div></div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block"><div class="item">É</div><div class="item verticalRL top">É</div><div class="item">É</div><div class="item verticalRL top">É</div></div>
|
||||
<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalRL extraTopPadding top">É</div><div class="item">É</div><div class="item verticalRL top">É</div></div>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-horiz-002-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.row { grid-auto-flow: column; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with parallel and orthogonal items.</p>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item extraBottomPadding">É</div>
|
||||
<div class="item verticalLR extraTopPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
|
||||
<br clear="all">
|
||||
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item extraBottomPadding">É</div>
|
||||
<div class="item verticalRL extraTopPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 375px;
|
||||
height: 100px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.top { vertical-align: top; }
|
||||
.item { display: inline-block; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with orthogonal items.</p>
|
||||
<div class="block"><div class="item verticalLR top">É</div><div class="item verticalLR top">É</div><div class="item verticalLR top">É</div><div class="item verticalLR top">É</div></div>
|
||||
<div class="block" ><div class="item verticalLR extraTopPadding top">É</div><div class="item verticalLR top">É</div><div class="item verticalLR extraBottomPadding top">É</div><div class="item verticalLR top">É</div></div>
|
||||
<div class="block"><div class="item verticalRL top">É</div><div class="item verticalRL top">É</div><div class="item verticalRL top">É</div><div class="item verticalRL top">É</div></div>
|
||||
<div class="block" ><div class="item verticalRL extraTopPadding top">É</div><div class="item verticalRL top">É</div><div class="item verticalRL extraBottomPadding top">É</div><div class="item verticalRL top">É</div></div>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-horiz-003-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 375px;
|
||||
height: 100px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraTopPadding { padding-top: 30px; }
|
||||
.extraBottomPadding { padding-bottom: 30px; }
|
||||
.row { grid-auto-flow: column; }
|
||||
</style>
|
||||
|
||||
<p>1x4 with orthogonal items.</p>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item verticalLR extraTopPadding">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR extraBottomPadding">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
<div class="block grid row contentStart itemsBaseline">
|
||||
<div class="item verticalRL extraTopPadding">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL extraBottomPadding">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 150px;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.item { display: inline; }
|
||||
.left { vertical-align: bottom; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel items.</p>
|
||||
<div class="block verticalLR"><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div></div>
|
||||
<div class="block verticalLR"><div class="item horizontalTB extraRightPadding left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB extraLeftPadding left">É</div><div class="item horizontalTB left">É</div></div>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-horiz-004-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. All the items are orthogonal to the column-axis, so they don't participate in the column-like Baseline Context; since no items shares row-like Baseline context, neither 'justify-self' or 'align-self' should apply." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 150px;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.column { grid-auto-flow: row; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel items.</p>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item extraRightPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item extraLeftPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
height: 350px;
|
||||
position: relative;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.inline { display: inline-block; }
|
||||
.item { display: inline-block; }
|
||||
.bottom { vertical-align: bottom; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel and orthogonal items.</p>
|
||||
<div class="block verticalLR"><div class="item horizontalTB bottom">É</div><div class="item">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
|
||||
<div class="block verticalLR"><div class="item horizontalTB bottom extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
|
||||
<div class="block verticalRL"><div class="item horizontalTB bottom">É</div><div class="item">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
|
||||
<div class="block verticalRL"><div class="item horizontalTB bottom extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-horiz-005-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.column { grid-auto-flow: row }
|
||||
</style>
|
||||
|
||||
<p>4x1 with parallel and orthogonal items.</p>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item extraRightPadding">É</div>
|
||||
<div class="item verticalLR extraLeftPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item extraRightPadding">É</div>
|
||||
<div class="item verticalRL extraLeftPadding">É</div>
|
||||
<div class="item">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.item { display: inline-block; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items.</p>
|
||||
<div class="block verticalLR"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block verticalLR"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block verticalRL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
<div class="block verticalRL"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div></div>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
|
||||
<link rel="match" href="grid-self-baseline-horiz-006-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
height: 350px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block > :nth-child(1) { font-size:24px; }
|
||||
.block > :nth-child(2) { font-size:32px; }
|
||||
.block > :nth-child(3) { font-size:48px; }
|
||||
.block > :nth-child(4) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.column { grid-auto-flow: row }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items.</p>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item verticalLR extraLeftPadding">É</div>
|
||||
<div class="item verticalLR extraRightPadding ">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
<div class="item verticalLR">É</div>
|
||||
</div>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
<div class="block grid column contentStart itemsBaseline">
|
||||
<div class="item verticalRL extraLeftPadding">É</div>
|
||||
<div class="item verticalRL extraRightPadding ">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
<div class="item verticalRL">É</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
.block {
|
||||
background: grey;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-orientation: sideways;
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.block1 > :nth-child(1) { font-size:24px; }
|
||||
.block1 > :nth-child(2) { font-size:32px; }
|
||||
.block2 > :nth-child(1) { font-size:48px; }
|
||||
.block2 > :nth-child(2) { font-size:64px; }
|
||||
.item {
|
||||
border-width: 2px 5px 3px 4px;
|
||||
border-style: solid;
|
||||
padding: 6px 3px 7px 8px;
|
||||
margin: 10px 6px 4px 12px;
|
||||
}
|
||||
.extraLeftPadding { padding-left: 30px; }
|
||||
.extraRightPadding { padding-right: 30px; }
|
||||
.item { display: inline-block; }
|
||||
.block1, .block2 { float: left; }
|
||||
</style>
|
||||
|
||||
<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
|
||||
<div class="block verticalLR"><div class="block1"><div class="item">É</div><div class="item">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div></div>
|
||||
<div class="block verticalLR"><div class="block1"><div class="item extraRightPadding">É</div><div class="item extraLeftPadding">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div>
|
||||
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