This repository was archived by the owner on Sep 6, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7.6k
Research: HTML DOM Data Structure
Narciso Jaramillo edited this page Jun 13, 2013
·
36 revisions
Status: Research Starting (Sprint 27)
This page will collect the results of the HTML DOM Data Structure research story.
Each scenario is numbered for ease of reference, but the order makes no difference.
These scenarios use the Getting Started sample file. That link points to a specific SHA of the file to ensure that these scenarios keep working even if the file changes.
Each scenario starts with a fresh copy of the file, though many could work as a straight run-through.
- Line 13: insert "YOU SHOULD BE " immediately after the
<h1>
open tag- Expected
<h1>YOU SHOULD BE GETTING STARTED WITH BRACKETS</h1>
- Expected
- Line 13: Replace the text "GETTING STARTED WITH" with "ALREADY USING"
- Expected
<h1>YOU SHOULD BE ALREADY USING BRACKETS</h1>
- Expected
That was easy, wasn't it?
- Line 13: after "h1", type ' class="main"'.
- Expected
<h1 class="main">GETTING STARTED WITH BRACKETS</h1>
- Expected
- Line 61: Change "showing" to "displaying"
- Expected
<img alt="A screenshot displaying CSS Quick Edit" src="screenshots/quick-edit.png" />
- Expected
- Line 61: Delete the
alt
attribute entirely- Use backspace starting from the "s" in
src
- Expected
<img src="screenshots/quick-edit.png" />
- Use backspace starting from the "s" in
Still kind of easy, but there are some invalid states while editing.
- Line 75: Surround
"save/reload dance"
with a<span class="save-reload">
tag- Start with the caret before the opening "
- Type in the new tag
- Navigate to just after the closing "
- Type
</span>
- Line 74: Add
id
and surround paragraph with<span>
- Put the caret after the "p"
- Type
id="foo"<span>
(note thatp
tag was not closed properly) - Navigate to line 84, before the
</p>
tag - Type
</span>
- Put the caret just before the opening
<span>
on line 74 - Type
>
- Navigate to the end of the line and delete the extra
>
- At this point, the paragraph is properly set up
This tests invalid states with nested tags and adding new tags across lines.
- Line 141: Adding a new item after this one
- Navigate to the end of the line
- Hit enter to create a new line at 142
- Type
<li>Sometimes read about us on
- Note that the state is valid as soon as the
>
is typed - Type
<a href="http://news.ycombinator.com">Hacker News</a></li>
- Line 150: Adding a table
- Type:
<h3>Ratio of Brackets Goodness</h3>
<table>
<thead>
<tr><th>Item</th><th>Brackets Superiority Ratio</th></tr>
</thead>
<tbody>
<tr><td>Apple Pie</td><td>27</td></tr>
<tr><td>"edlin" editor</td><td>2,567</td></tr>
<tr><td>Bacon</td><td>2</td></tr>
</tbody>
</table>
- Cut/paste, same parent
- Select the
<li>
on line 142 - Cut it
- Move to the beginning of line 141
- Paste. This should result in the DOM node (and its children) moving without being recreated.
- Select the
- Cut/paste, different parents
- Select the
<img>
on line 61 - Cut it
- Move to the text at the beginning of line 65 (inside the
<p>
tag) - Paste. This should result in the DOM node moving without being recreated.
- Select the
- TODO: For copy/paste, it's harder to know what to do since you're actually creating a new node. Is there any expectation that you'll copy the state of the original node somehow, or should we just treat it as if you retyped the text?
- Commenting out code
- At the beginning of line 114, type
<!--
- Move the cursor to line 121 and type
-->
- Ideally, the DOM nodes after line 121 would reappear with all their original state. (That sounds hard, but if we use the marked range info in the document, perhaps we could be try to be smart about this case and cache the DOM nodes that were removed after the first step, then reinsert them after the second step.)
- At the beginning of line 114, type
- Uncommenting code
- After doing the previous case, delete the
<!--
from line 114, then delete the-->
from line 121. - Ideally, the original DOM node for the
<p>
would reappear (but at the very least, we should create a new<p>
).
- After doing the previous case, delete the