and Barrier may sometimes get first line overlap (and cut) by tab selection line.

Display tries to append a <div> and in new CSS, it will be flowed outside the iframe viewport.

Barrier seem to have incorrect calculated the width according to full window (i.e., it looks better if we hide the console part).

Display: Some pytests used to do AppendHTML to include reference to CSS file, with extra DIVs. This won't work if a template is also used.

 plankton_display
 display_point
 pointing_device
 display_idle
 touchscreen
 backlight
 
Note 'countdown' uses AppendHTML but it does not use templates so it's fine.

pointing_device is already using state directly, and and touchscreen does not use template.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromiumos/platform/factory/+/988059121082420828524e121656eb1ac278630b

commit 988059121082420828524e121656eb1ac278630b
Author: Hung-Te Lin <hungte@chromium.org>
Date: Mon Aug 28 13:47:19 2017

goofy: Remove extra white bar for two-section UI template.

The template-prompt-container is a sibling of template-state-container-*
so it should have same background and margin as state containers.

Without margin, the left and right side will be filled with white
background.

Also, progress bar should appear in same location where instruction
lives, otherwise it may overlap the state area.

BUG= chromium:759443 
TEST=make test; manually tested on DUT.

Change-Id: I762c898a56423bc850b55c91f7b5a1abae11f593
Reviewed-on: https://chromium-review.googlesource.com/637432
Commit-Ready: Hung-Te Lin <hungte@chromium.org>
Tested-by: Hung-Te Lin <hungte@chromium.org>
Reviewed-by: Ting Shen <phoenixshen@chromium.org>

[modify] https://crrev.com/988059121082420828524e121656eb1ac278630b/py/goofy/static/ui_templates/template_two_sections.html
[modify] https://crrev.com/988059121082420828524e121656eb1ac278630b/py/goofy/static/ui_templates/template.css

The following revision refers to this bug:
  https://chromium.googlesource.com/chromiumos/platform/factory/+/09a2d8e14a983a34ad21ab2b2a7e93fbe3231880

commit 09a2d8e14a983a34ad21ab2b2a7e93fbe3231880
Author: Hung-Te Lin <hungte@chromium.org>
Date: Mon Aug 28 13:47:20 2017

goofy: Fix random background in default test UI.

The background color property in default_test_ui.css was incorrectly set
to 0xffffffd0, which should only contain 6 bytes for RGB.

BUG= chromium:759443 
TEST=make test; manually verified.

Change-Id: Ib3b4d11f335e77c14c96a3b355729022cb5742f6
Reviewed-on: https://chromium-review.googlesource.com/637433
Commit-Ready: Hung-Te Lin <hungte@chromium.org>
Tested-by: Hung-Te Lin <hungte@chromium.org>
Reviewed-by: Ting Shen <phoenixshen@chromium.org>

[modify] https://crrev.com/09a2d8e14a983a34ad21ab2b2a7e93fbe3231880/py/goofy/static/css/default_test_ui.css

The following revision refers to this bug:
  https://chromium.googlesource.com/chromiumos/platform/factory/+/309c4f27cc19751c55b031692b89c619cc84f109

commit 309c4f27cc19751c55b031692b89c619cc84f109
Author: Hung-Te Lin <hungte@chromium.org>
Date: Mon Aug 28 13:47:20 2017

pytests: Fix blank UI after test CSS change.

The UI templates have been changed to let test state fully occupy the
test pane on UI, so if a test calls AppendHTML and use the extra DOM
nodes there, nothing will be rendered on screen (clipped by viewport).

The right approach is to use 'state' (ui_templates.STATE_ID) directly,
and add CSS links by inserting <link> elements (this is now the
AppendCSSLink in test_ui).

BUG= chromium:759443 
TEST=make test; manually run tests.

Change-Id: If0964c0465bc9f7b4096a580ae2e48e9bf6d3d46
Reviewed-on: https://chromium-review.googlesource.com/637610
Commit-Ready: Hung-Te Lin <hungte@chromium.org>
Tested-by: Hung-Te Lin <hungte@chromium.org>
Reviewed-by: Ting Shen <phoenixshen@chromium.org>

[modify] https://crrev.com/309c4f27cc19751c55b031692b89c619cc84f109/py/goofy/static/ui_templates/default_test_ui.html
[modify] https://crrev.com/309c4f27cc19751c55b031692b89c619cc84f109/py/test/ui_templates.py
[modify] https://crrev.com/309c4f27cc19751c55b031692b89c619cc84f109/py/test/pytests/display_point.py
[modify] https://crrev.com/309c4f27cc19751c55b031692b89c619cc84f109/py/test/pytests/backlight.py
[modify] https://crrev.com/309c4f27cc19751c55b031692b89c619cc84f109/py/test/test_ui.py
[modify] https://crrev.com/309c4f27cc19751c55b031692b89c619cc84f109/py/test/pytests/display.py
[modify] https://crrev.com/309c4f27cc19751c55b031692b89c619cc84f109/py/test/pytests/plankton_display.py
[modify] https://crrev.com/309c4f27cc19751c55b031692b89c619cc84f109/py/test/pytests/display_idle.py

I've fixed critical ones. Those left:

- tablet_rotate/tablet_mode ui overlaps
- Barrier (summary) state height calculation wrong

Maybe there are related to same reason - .test-vcenter-outer and .test-vcenter-inner.

I'll leave this part for pihsun to fix.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromiumos/platform/factory/+/6989939ac7d9d833997241b92b3b58f117cbb293

commit 6989939ac7d9d833997241b92b3b58f117cbb293
Author: Peter Shih <pihsun@chromium.org>
Date: Tue Aug 29 09:39:06 2017

default_test_ui: Change background to semi-transparent white.

Use a white background with alpha 0.5, so the chromium logo in the
background would be seen.

BUG=b:64963909, chromium:759443 
TEST=make test

Change-Id: I9c00fba3e484fdc7b10711ac258a2e08e236b77f
Reviewed-on: https://chromium-review.googlesource.com/640333
Commit-Ready: Pi-Hsun Shih <pihsun@chromium.org>
Tested-by: Pi-Hsun Shih <pihsun@chromium.org>
Reviewed-by: Hung-Te Lin <hungte@chromium.org>

[modify] https://crrev.com/6989939ac7d9d833997241b92b3b58f117cbb293/py/goofy/static/css/default_test_ui.css

The following revision refers to this bug:
  https://chromium.googlesource.com/chromiumos/platform/factory/+/77277538fc406b52a23a4584b7372774a1d103d5

commit 77277538fc406b52a23a4584b7372774a1d103d5
Author: Peter Shih <pihsun@chromium.org>
Date: Wed Aug 30 14:06:30 2017

ui_templates: Simplify state HTML structure.

The state DOM is now the full white area with some default CSS rules, so
it's easier to write test CSS that works well on different screen size.

Also fix some pytests with broken layouts.

BUG= chromium:759443 , b:64963909
TEST=make test
TEST=manually on DUT.

Change-Id: Ib6749e4fdb4dd957e1cad93ca932943d9f33f083
Reviewed-on: https://chromium-review.googlesource.com/640235
Commit-Ready: Pi-Hsun Shih <pihsun@chromium.org>
Tested-by: Pi-Hsun Shih <pihsun@chromium.org>
Reviewed-by: Hung-Te Lin <hungte@chromium.org>

[modify] https://crrev.com/77277538fc406b52a23a4584b7372774a1d103d5/py/test/pytests/touchpad.py
[modify] https://crrev.com/77277538fc406b52a23a4584b7372774a1d103d5/py/test/pytests/summary/summary.py
[modify] https://crrev.com/77277538fc406b52a23a4584b7372774a1d103d5/py/goofy/static/ui_templates/template.css
[modify] https://crrev.com/77277538fc406b52a23a4584b7372774a1d103d5/py/test/pytests/keyboard/keyboard.py
[modify] https://crrev.com/77277538fc406b52a23a4584b7372774a1d103d5/py/test/pytests/led/led.py
[modify] https://crrev.com/77277538fc406b52a23a4584b7372774a1d103d5/py/goofy/static/ui_templates/template_one_scrollable_section.html
[modify] https://crrev.com/77277538fc406b52a23a4584b7372774a1d103d5/py/goofy/static/ui_templates/template_one_section.html
[modify] https://crrev.com/77277538fc406b52a23a4584b7372774a1d103d5/py/goofy/static/css/test.css
[modify] https://crrev.com/77277538fc406b52a23a4584b7372774a1d103d5/py/goofy/static/ui_templates/template_two_sections.html
[modify] https://crrev.com/77277538fc406b52a23a4584b7372774a1d103d5/py/test/pytests/touchpad_static/touchpad.js
[modify] https://crrev.com/77277538fc406b52a23a4584b7372774a1d103d5/py/test/pytests/tablet_rotation.py
[add] https://crrev.com/77277538fc406b52a23a4584b7372774a1d103d5/py/test/pytests/touchpad_static/touchpad.css