You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This should be extracted into an exported definition that can be used independently of the property.
351
351
352
352
<figure>
353
-
<img src="phone-browser.svg" width="200" height="335" alt="A diagram of a phone screen, including a top status bar, a browser URL bar, web-content area with a floating scrollbar, a virtual keyboard, and a bottom bar with an OS back button">
354
-
<img src="phone-browser-snapshot-viewport.svg" width="200" height="335" alt="The previous diagram, but highlights the area that's the 'snapshot' viewport, which includes everything except the top status bar and the bottom bar with the OS back button">
353
+
<img src="diagrams/phone-browser.svg" width="200" height="335" alt="A diagram of a phone screen, including a top status bar, a browser URL bar, web-content area with a floating scrollbar, a virtual keyboard, and a bottom bar with an OS back button">
354
+
<img src="diagrams/phone-browser-snapshot-viewport.svg" width="200" height="335" alt="The previous diagram, but highlights the area that's the 'snapshot' viewport, which includes everything except the top status bar and the bottom bar with the OS back button">
355
355
<figcaption>
356
356
An example of the [=snapshot viewport=] on a mobile OS.
357
357
The snapshot includes the URL bar, as this can be scrolled away.
<img src="desktop-browser.svg" width="132" height="79" alt="A diagram of a desktop browser window, including a tab bar, a URL bar, and a web-content area featuring both horizontal and vertical scrollbars" style="height:auto; width: 600px">
365
-
<img src="desktop-browser-snapshot-viewport.svg" width="132" height="79" alt="The previous diagram, but highlights the area that's the 'snapshot' viewport, which includes the web content area and the scrollbars" style="height:auto; width: 600px">
364
+
<img src="diagrams/desktop-browser.svg" width="132" height="79" alt="A diagram of a desktop browser window, including a tab bar, a URL bar, and a web-content area featuring both horizontal and vertical scrollbars" style="height:auto; width: 600px">
365
+
<img src="diagrams/desktop-browser-snapshot-viewport.svg" width="132" height="79" alt="The previous diagram, but highlights the area that's the 'snapshot' viewport, which includes the web content area and the scrollbars" style="height:auto; width: 600px">
366
366
<figcaption>
367
367
An example of the [=snapshot viewport=] on a desktop OS.
368
368
This includes the scrollbars, but does not include the URL bar, as web content never appears in that area.
Issue: "scrolling box" and "layout viewport" are not exported. They either need exporting, or replaced with better references.
888
888
889
889
<figure>
890
-
<img src="phone-browser-with-url.svg" width="202" height="297" alt="A phone browser window, showing a URL bar, a fixed-position element directly beneath it, and some page content beneath that. A scroll bar indicates the page has been scrolled significantly.">
891
-
<img src="phone-browser-without-url.svg" width="202" height="297" alt="The captured snapshot. It shows that content beneath the URL bar was included in the capture.">
890
+
<img src="diagrams/phone-browser-with-url.svg" width="202" height="297" alt="A phone browser window, showing a URL bar, a fixed-position element directly beneath it, and some page content beneath that. A scroll bar indicates the page has been scrolled significantly.">
891
+
<img src="diagrams/phone-browser-without-url.svg" width="202" height="297" alt="The captured snapshot. It shows that content beneath the URL bar was included in the capture.">
892
892
<figcaption>
893
893
An example of what the user sees compared to the captured snapshot.
894
894
This example assumes the root is the only element with a transition name.
<img src="phone-browser-scrolled-to-top-with-url.svg" width="202" height="297" alt="A phone browser window, showing a URL bar, and some content beneath. A scroll bar indicates the page is scrolled to the top.">
903
-
<img src="phone-browser-scrolled-to-top-without-url.svg" width="202" height="297" alt="The captured snapshot. It shows the area underneath the URL bar as the same color as the rest of the document.">
902
+
<img src="diagrams/phone-browser-scrolled-to-top-with-url.svg" width="202" height="297" alt="A phone browser window, showing a URL bar, and some content beneath. A scroll bar indicates the page is scrolled to the top.">
903
+
<img src="diagrams/phone-browser-scrolled-to-top-without-url.svg" width="202" height="297" alt="The captured snapshot. It shows the area underneath the URL bar as the same color as the rest of the document.">
904
904
<figcaption>
905
905
An example of what the user sees compared to the captured snapshot.
906
906
This example assumes the root is the only element with a transition name.
0 commit comments