-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[css-scroll-snap] Add tests for scroll-into-view operations (#8575)
- Loading branch information
Showing
17 changed files
with
732 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <title>Reference</title> | ||
| <link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> | ||
| <style type='text/css'> | ||
| .container { | ||
| border: solid blue 4px; | ||
| height: 4em; | ||
| overflow: auto; | ||
| font: 20px/1 sans-serif; | ||
| } | ||
| .container > div { | ||
| height: 1em; | ||
| margin: 1em 0; | ||
| background: green; | ||
| } | ||
| </style> | ||
|
|
||
| <div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> | ||
|
|
||
| <div class="container"> | ||
| <div></div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <title>#target and snap position with snapping off (y-axis)</title> | ||
| <link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> | ||
| <link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'> | ||
| <link rel='match' href='scroll-target-001-ref.html'> | ||
| <meta name="flags" content="may"> | ||
| <meta name='assert' | ||
| content="Test passes if scroll snapping is honored | ||
| on a scroll container with 'scroll-snap-type: none' | ||
| when navigating to an element with the target fragment ID."> | ||
|
|
||
| <style type='text/css'> | ||
| iframe { | ||
| border: solid blue 4px; | ||
| height: 80px; | ||
| width: calc(100% - 8px); | ||
| } | ||
| </style> | ||
|
|
||
| <div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> | ||
|
|
||
| <iframe class="container" src="support/scroll-target-align-001-iframe.html#target">This UA doesn't support iframes; please request a custom version of this test!</iframe> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <title>scrollIntoView() and snap position with snapping off (y-axis)</title> | ||
| <link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> | ||
| <link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'> | ||
| <link rel='match' href='scroll-target-001-ref.html'> | ||
| <meta name="flags" content="may"> | ||
| <meta name='assert' | ||
| content="Test passes if scroll snapping is honored | ||
| on a scroll container with 'scroll-snap-type: none' | ||
| when scrolling an element into view | ||
| explicitly by script."> | ||
|
|
||
| <style type='text/css'> | ||
| .container { | ||
| border: solid blue 4px; | ||
| height: 4em; | ||
| overflow: auto; | ||
|
|
||
| /* to make failing more obvious */ | ||
| background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; | ||
| /* avoid anti-aliasing issues */ | ||
| font: 20px/1 sans-serif; | ||
| scrollbar-width: none; | ||
| } | ||
| .container > div { | ||
| height: 1em; | ||
| } | ||
| .container { scroll-padding: .5em 0 0; } /* set up a snap position */ | ||
| #target { scroll-margin: .5em 0 0; | ||
| scroll-snap-align: center; } | ||
| #stripe { background: green; } /* color part of the snap area */ | ||
| .fail { color: red; } /* make failing more obvious */ | ||
| </style> | ||
|
|
||
| <div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> | ||
|
|
||
| <div class="container"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div class="fail">FAIL</div> | ||
| <div></div> | ||
| <div id="stripe"></div> | ||
| <div id="target"></div> | ||
| <div></div> | ||
| <div class="fail">FAIL</div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
|
|
||
| <script> | ||
| document.getElementById('target').scrollIntoView(); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <title>focus() and snap position with snapping off (y-axis)</title> | ||
| <link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> | ||
| <link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'> | ||
| <link rel='match' href='scroll-target-001-ref.html'> | ||
| <meta name="flags" content="may"> | ||
| <meta name='assert' | ||
| content="Test passes if scroll snapping is honored | ||
| on a scroll container with 'scroll-snap-type: none' | ||
| when scrolling an element into view | ||
| even if that operation is implied (in this case, by .focus())."> | ||
| <style type='text/css'> | ||
| .container { | ||
| border: solid blue 4px; | ||
| height: 4em; | ||
| overflow: auto; | ||
|
|
||
| /* to make failing more obvious */ | ||
| background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; | ||
| /* avoid anti-aliasing issues */ | ||
| font: 20px/1 sans-serif; | ||
| scrollbar-width: none; | ||
| } | ||
| .container > div, a { | ||
| height: 1em; | ||
| display: block; | ||
| outline: none; | ||
| } | ||
| .container { scroll-padding: .5em 0 0; } /* set up a snap position */ | ||
| #target { scroll-margin: .5em 0 0; | ||
| scroll-snap-align: center; } | ||
| #stripe { background: green; } /* color part of the snap area */ | ||
| .fail { color: red; } /* make failing more obvious */ | ||
| </style> | ||
|
|
||
| <div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> | ||
|
|
||
| <div class="container"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div class="fail">FAIL</div> | ||
| <div></div> | ||
| <div id="stripe"></div> | ||
| <a href="" id="target"></a> | ||
| <div></div> | ||
| <div class="fail">FAIL</div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
|
|
||
| <script> | ||
| document.getElementById('target').focus(); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <title>#target and scroll-margin with snapping off (y-axis)</title> | ||
| <link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> | ||
| <link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'> | ||
| <link rel='match' href='scroll-target-001-ref.html'> | ||
| <meta name="flags" content="should"> | ||
| <meta name='assert' | ||
| content="Test passes if scroll-margin is honored | ||
| on a scroll container with 'scroll-snap-type: none' | ||
| when navigating to an element with the target fragment ID."> | ||
|
|
||
| <style type='text/css'> | ||
| iframe { | ||
| border: solid blue 4px; | ||
| height: 80px; | ||
| width: calc(100% - 8px); | ||
| } | ||
| </style> | ||
|
|
||
| <div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> | ||
|
|
||
| <iframe class="container" src="support/scroll-target-margin-001-iframe.html#target">This UA doesn't support iframes; please request a custom version of this test!</iframe> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <title>scrollIntoView() and scroll-margin with snapping off (y-axis)</title> | ||
| <link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> | ||
| <link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'> | ||
| <link rel='match' href='scroll-target-001-ref.html'> | ||
| <meta name="flags" content="should"> | ||
| <meta name='assert' | ||
| content="Test passes if scroll-margin is honored | ||
| on a scroll container with 'scroll-snap-type: none' | ||
| when scrolling an element into view | ||
| explicitly by script."> | ||
| <style type='text/css'> | ||
| .container { | ||
| border: solid blue 4px; | ||
| height: 4em; | ||
| overflow: auto; | ||
|
|
||
| /* to make failing more obvious */ | ||
| background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; | ||
| /* avoid anti-aliasing issues */ | ||
| font: 20px/1 sans-serif; | ||
| scrollbar-width: none; | ||
| } | ||
| .container > div { | ||
| height: 1em; | ||
| } | ||
| #target { scroll-margin: 2em 0 1em; } /* snap area is exact fit for snapport */ | ||
| #stripe { background: green; } /* color part of the snap area */ | ||
| .fail { color: red; } /* make failing more obvious */ | ||
| </style> | ||
|
|
||
| <div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> | ||
|
|
||
| <div class="container"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div class="fail">FAIL</div> | ||
| <div></div> | ||
| <div id="stripe"></div> | ||
| <div id="target"></div> | ||
| <div></div> | ||
| <div class="fail">FAIL</div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
|
|
||
| <script> | ||
| document.getElementById('target').scrollIntoView(); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <title>focus() and scroll-margin with snapping off (y-axis)</title> | ||
| <link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> | ||
| <link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'> | ||
| <link rel='match' href='scroll-target-001-ref.html'> | ||
| <meta name="flags" content="should"> | ||
| <meta name='assert' | ||
| content="Test passes if scroll-margin is honored | ||
| on a scroll container with 'scroll-snap-type: none' | ||
| when scrolling an element into view | ||
| even if that operation is implied (in this case, by .focus())."> | ||
| <style type='text/css'> | ||
| .container { | ||
| border: solid blue 4px; | ||
| height: 4em; | ||
| overflow: auto; | ||
|
|
||
| /* to make failing more obvious */ | ||
| background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; | ||
| /* avoid anti-aliasing issues */ | ||
| font: 20px/1 sans-serif; | ||
| scrollbar-width: none; | ||
| } | ||
| .container > div, a { | ||
| height: 1em; | ||
| display: block; | ||
| outline: none; | ||
| } | ||
| #target { scroll-margin: 2em 0 1em; } /* snap area is exact fit for snapport */ | ||
| #stripe { background: green; } /* color part of the snap area */ | ||
| .fail { color: red; } /* make failing more obvious */ | ||
| </style> | ||
|
|
||
| <div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> | ||
|
|
||
| <div class="container"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div class="fail">FAIL</div> | ||
| <div></div> | ||
| <div id="stripe"></div> | ||
| <a href="" id="target"></a> | ||
| <div></div> | ||
| <div class="fail">FAIL</div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
|
|
||
| <script> | ||
| document.getElementById('target').focus(); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <title>#target and scroll-padding with snapping off (y-axis)</title> | ||
| <link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> | ||
| <link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-padding'> | ||
| <link rel='match' href='scroll-target-001-ref.html'> | ||
| <meta name='assert' | ||
| content="Test passes if scroll-padding is honored | ||
| on a scroll container with 'scroll-snap-type: none' | ||
| when navigating to an element with the target fragment ID."> | ||
| <style type='text/css'> | ||
| iframe { | ||
| border: solid blue 4px; | ||
| height: 80px; | ||
| width: calc(100% - 8px); | ||
| } | ||
| </style> | ||
|
|
||
| <div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> | ||
|
|
||
| <iframe class="container" src="support/scroll-target-padding-001-iframe.html#target">This UA doesn't support iframes; please request a custom version of this test!</iframe> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <title>scrollIntoView() and scroll-padding with snapping off (y-axis)</title> | ||
| <link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> | ||
| <link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-padding'> | ||
| <link rel='match' href='scroll-target-001-ref.html'> | ||
| <meta name='assert' | ||
| content="Test passes if scroll-padding is honored | ||
| on a scroll container with 'scroll-snap-type: none' | ||
| when scrolling an element into view | ||
| explicitly by script."> | ||
| <style type='text/css'> | ||
| .container { | ||
| border: solid blue 4px; | ||
| height: 4em; | ||
| overflow: auto; | ||
|
|
||
| /* to make failing more obvious */ | ||
| background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; | ||
| /* avoid anti-aliasing issues */ | ||
| font: 20px/1 sans-serif; | ||
| scrollbar-width: none; | ||
| } | ||
| .container > div { | ||
| height: 1em; | ||
| } | ||
| .container { scroll-padding: 2em 0 1em; } /* snap area is exact fit for snapport */ | ||
| #stripe { background: green; } /* color part of the snap area */ | ||
| .fail { color: red; } /* make failing more obvious */ | ||
| </style> | ||
|
|
||
| <div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> | ||
|
|
||
| <div class="container"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div class="fail">FAIL</div> | ||
| <div></div> | ||
| <div id="stripe"></div> | ||
| <div id="target"></div> | ||
| <div></div> | ||
| <div class="fail">FAIL</div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
|
|
||
| <script> | ||
| document.getElementById('target').scrollIntoView(); | ||
| </script> |
Oops, something went wrong.